html DOM节点限制

Question

我正在开发终端模拟器以获得乐趣,并且具有后端运行的基础知识.但是我在前端遇到了性能问题.

你可能都知道,终端窗口中的每个角色都可以有不同的风格.(颜色,背景,粗体,下划线等).所以我的想法是<span>在视图窗口中为每个字符使用a 并在必要时应用内联样式,因此我具有我需要的控制程度.

问题是刷新时的性能是可怕的.Chrome可以在我的电脑上处理它,每秒大约120次操作,而firefox则是80.但是Internet Explorer几乎没有得到6.所以在我使用html进行操作之后我尝试使用画布,但画布上的文字速度非常慢.在线我读缓存有帮助,所以我为每个字符实现一个缓存,并可以通过一些复合操作将颜色应用于当时的位图字体.然而,这比DOM慢.

然后我回到dom尝​​试使用,document.createDocumentFragment但它只是使用标准执行有点差.

我现在不知道从哪里开始优化.我可以跟踪什么角色的变化,但是当终端获得大量输入时我仍然会遇到这种缓慢.

我是DOM的新手,所以我可能会做一些完全错误的事情......

任何帮助表示赞赏!

这是一个带有几个测试用例的jsperf:

http://jsperf.com/canvas-bitma32p-cache-test/6

Answer 1

当您将 HTML 附加到元素时，将 HTML 作为字符串文本直接插入的效率惊人insertAdjacentHTML。

var div = document.getElementById("output");
var charCount = 50;
var line, i, j;

for (i = 0; i < charCount; i++) {
  line = "";
  for (j = 0; j < charCount; j++) {
    line += "<span style=\"background-color:rgb(0,0,255);color:rgb(255,127,0)\">o</span>";
  }
  div.insertAdjacentHTML("beforeend","<div>"+line+"</div>");
}

#output{font-family:courier; font-size:6pt;}

<div id="output"></div>

这种方法的缺点是显而易见的：您永远没有机会将每个附加元素视为 JavaScript 中的对象（它们只是普通字符串），因此您无法直接将事件侦听器附加到每个元素。（您可以在事后通过使用 查询生成的 HTML 来查找匹配元素来执行此操作document.querySelectorAll(".css selector)。）

如果您确实只是格式化打印到屏幕上的输出，那么insertAdjacentHTML这是完美的。