更新大量的数字

Question

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

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

创建一个静态的span元素列表，这些元素使用. innerhtml在for循环中更新。getElementsByTagName函数在页面加载时的init函数中被调用，以便在for循环中使用的数组中获取span元素来更新它们。
1. 在for循环中使用Jquery append()在段落元素中添加数字，其中数字已与标签br(ak)连接以创建列。在循环之前，使用函数empty()从段落中删除所有旧的数字。

这可以更有效地完成吗?

Answer 1

创建documentFragment (http://ejohn.org/blog/dom-documentfragments/)

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

然后，从DOM中删除现有的列表，并附加片段。这都是一次完成的，只需要重画一次。

Answer 2

不要在循环中对当前DOM中的元素进行追加或innerHTML修改。

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