HTML DOM节点限制

Question

我在开发一个终端仿真器，但是前端的性能问题一直困扰着我。大家都知道终端窗口中每个字符都可以有不同的样式（颜色，背景，粗体，下划线等）。所以我的想法是在视窗中为每个字符使用元素，并在必要时应用内联样式，以获得所需的控制程度。问题是在刷新时性能非常糟糕。Chrome在我的电脑上每秒处理约120次，Firefox处理约80次，而Internet Explorer只有6次。因此，在尝试了HTML后，我尝试使用画布，但画布上的文本速度非常慢。我在网上读到缓存有帮助，因此我为每个字符实现了一个缓存，并可以使用某些组合操作将颜色应用于位图字体。但这比DOM慢得多。然后我回到DOM并尝试使用document.createDocumentFragment，但它的性能略逊于标准方法。现在我不知道从哪里开始优化。我可以跟踪每个字符的更改情况，但当终端输入很多时仍会遇到这种缓慢的情况。

我对DOM还不熟悉，可能会做错什么...

非常感谢任何帮助！

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

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

- user2882307

---

你应该使用CSS文件而不是内联样式。请参见https://dev59.com/HGsy5IYBdhLWcg3w1xiU#8284398。 - James Brierley

另外，http://jsperf.com/style-element-vs-attr。 - James Brierley

尝试为每个样式实例使用一个<span>标记。例如，如果样式从不更改，则一个<span>标记就足够了。如果样式更改一次，然后恢复到原始样式，则需要三个<span>标签。 - Tyler Crompton

这是否合理？你有分析可能导致这种情况发生的任何用例吗？有时“好了就够了”是你最好的选择。 - Tyler Crompton

@TylerCrompton 嗯，这种情况可能几乎不会发生，但我认为，由于性能问题，我无法在浏览器中本地复制自90年代以来就已经存在的技术，这有点荒谬。如果不能通过这种方式解决，我可能会编写一个WebGL渲染器。 - user2882307

Answer 1

使用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中的对象（它们只是普通字符串），因此您不能直接将事件侦听器附加到它们中的每一个。 （您可以通过使用document.querySelectorAll（“.css选择器）查询生成的HTML以查找匹配的元素后进行操作。）

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

- Thriggle