更新大量數字

Question

從WebSocket中，頁面以高速率接收超過500個數字的字符串。 關於資源，在頁面列上顯示這些數字的最有效方法是什麼？

到目前爲止，我嘗試了兩種不同的方法：

1. 創建span元素誰在for循環使用.innerHTML更新的靜態列表。函數getElementsByTagName在頁面加載時在初始化函數中調用，以便獲取for循環中用於更新它們的數組中的span元素。
2. 在for循環中使用jquery append（）將數字附加到段落元素中，其中數字已與標記br（eak）連接以創建列。在循環之前，函數emtpy（）用於刪除段落中的舊麻煩。

這可以更有效地完成嗎？所以，瀏覽器的CPU負載減少了。

Answer 1

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

追加所有列表元素融入到文檔片段。這不會觸發對文檔的重繪，因爲該片段不是DOM的一部分。

然後，從DOM中刪除現有列表，並追加片段。這一切都一次完成，只導致一次重繪。有關更多信息，請參閱鏈接的資源。

Answer 2

不要對當前循環中DOM中的元素執行append或innerHTML修改。

創建或修改不在頁面上的元素，然後替換或追加一次新元素。這將減少頁面重新繪製的次數，並且應該儘量減少計算機上的壓力。