html DOM 节点限制答案

【问题标题】：html DOM node limitshtml DOM 节点限制
【发布时间】：2016-01-13 03:44:32
【问题描述】：

我正在开发一个终端仿真器以获取乐趣，并且已经启动并运行了后端的基础知识。但是我一直在前端遇到性能问题。

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

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

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

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

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

感谢任何帮助！

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

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

【问题讨论】：

您应该使用 CSS 文件而不是内联样式。见stackoverflow.com/a/8284398/5111146。
还有jsperf.com/style-element-vs-attr
尝试为每个样式实例使用一个跨度。例如，如果样式永远不会改变，则应该使用一个 span 标记。如果样式改变一次，然后又变回原来的样式，三个span 标签应该可以。
@TylerCrompton 是的，但我想测试更糟糕的情况，显然每个字符都不同。
这合理吗？您是否分析过任何会导致这种情况发生的用例？有时“足够好”是您拥有的最佳选择。

标签： javascript html dom optimization

【解决方案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;}

&lt;div id="output"&gt;&lt;/div&gt;

这种方法的缺点很明显：在 JavaScript 中，您永远没有机会将每个附加元素视为一个对象（它们只是普通字符串），因此您不能直接将事件侦听器附加到他们每个人。（事后您可以通过使用 document.querySelectorAll(".css selector) 查询结果 HTML 以查找匹配元素来这样做。）

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

【讨论】：