javascript - html DOM 节点限制

Question

为了好玩，我正在开发终端模拟器，并且具备后端启动和运行的基础知识。但是，我一直在前端遇到性能问题。

众所周知，终端窗口中的每个字符都可以有不同的样式。 (颜色、背景、粗体、下划线等)。所以我的想法是使用 <span>对于 View 窗口中的每个字符，并在必要时应用内联样式，以便我拥有所需的控制程度。

问题是刷新后的性能非常糟糕。 Chrome 可以在我的电脑上处理它，每秒大约 120 次操作，firefox 每秒 80 次。但是 Internet Explorer 几乎没有 6。所以在我使用 html 之后，我尝试使用 Canvas ，但 Canvas 上的文本非常慢。我在网上阅读了缓存帮助，因此我为每个字符实现了一个缓存，并且可以通过一些复合操作将颜色应用于当时的位图字体。然而，这比 DOM 慢得多。

然后我回到 dom 并尝试使用 document.createDocumentFragment但它的性能比仅使用标准差一点。

我现在不知道从哪里开始优化。我可以跟踪什么时候字符会发生变化，但是当终端获得大量输入时，我仍然会遇到这种缓慢的情况。

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

感谢任何帮助!

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

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

Answer 1

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

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 中的一个对象(它们只是普通字符串)，因此您不能，例如，直接将事件监听器附加到他们每个人。 (您可以在事后使用 document.querySelectorAll(".css selector) 查询生成的 HTML 以查找匹配元素。)

如果你真的只是格式化输出到屏幕上，insertAdjacentHTML 是完美的。