Question

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

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

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

然后我回到了dom并尝试使用document.createDocumentFragment，但它的表现略差一些，只是使用标准。

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

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

任何帮助表示赞赏！

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

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

Answer 1

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

＆＃13;

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>");
}

＆＃13;

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

＆＃13;

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

＆＃13;

这种方法的缺点是显而易见的：你永远不会有机会将每个附加元素视为JavaScript中的对象（它们只是简单的字符串），所以你不能直接附加每个人的事件监听器。（事后可以通过使用document.querySelectorAll(".css selector)查询生成的HTML匹配元素来实现此目的。）

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

html DOM节点限制

1 个答案: