html DOM 节点限制

我正在开发一个终端模拟器以获取乐趣，并了解后端的基础知识和运行。然而，我不断遇到前端的性能问题。

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

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

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

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

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

任何帮助表示赞赏！

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

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

当您使用时，将 HTML 作为字符串文本直接插入的效率惊人insertAdjacentHTML将 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 中的对象（它们只是普通字符串），因此您无法直接将事件侦听器附加到每个元素。 （您可以在事后通过使用以下命令查询结果 HTML 中的匹配元素来执行此操作document.querySelectorAll(".css selector).)

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