更新大量数字

Question

从websocket页面以高速率接收超过500个数字的字符串。 就资源而言，在页面列上显示这些数字的最有效方法是什么？

到目前为止，我尝试了两种不同的方法：

1. 使用.innerHTML创建在for循环中更新的span元素的静态列表。函数getElementsByTagName在页面加载时在init函数中调用，以便获取for循环中使用的数组中的span元素来更新它们。
2. 在for循环中使用Jquery append（）将数字附加到段落元素中，其中数字已与标记br（eak）连接以创建列。在循环之前，函数emtpy（）用于从段落中删除旧的麻木。

这可以更有效地完成吗？因此，浏览器的CPU负载会减少。

Answer 1

不要对循环内DOM中当前元素进行append或innerHTML修改。

创建或修改不在页面上的元素，然后替换或追加新元素一次。这将减少页面重绘的次数，并应尽量减少计算机上的压力。

Answer 2

创建documentFragment（http://ejohn.org/blog/dom-documentfragments/）

将所有列表元素附加到文档片段中。这不会触发文档的重绘，因为片段不是DOM的一部分。

然后，从DOM中删除现有列表，并附加片段。这一切都是立刻完成的，只能重绘一次。有关详细信息，请参阅链接的资源。