將大型元素/數據集附加到dom的性能

我一次追加大量的表格行元素，並遇到一些主要瓶頸。目前我正在使用jQuery，但如果它完成了這項工作，我將開放給基於JavaScript的解決方案。將大型元素/數據集附加到dom的性能

我需要在給定的時間追加0-100錶行的任何地方（它實際上可能更多，但我會分頁超過100）。

現在我單獨追加每個錶行的DOM ...

loop { 
    ..build html str... 
    $("#myTable").append(row); 
}

然後我淡出他們都在一次

$("#myTable tr").fadeIn();

有幾件事情需要考慮。 ..

1）我綁定數據到每個單獨的錶行，這就是爲什麼我從一個大規模追加切換到附加單獨的行首先。

2）我非常喜歡淡入淡出效果。雖然對於應用程序來說不是必不可少的，但我對美學和動畫非常重要（當然，這不會分散對應用程序的使用）。對於大量數據應用適度的淡入淡出效果，必須有一個好方法。我需要將特定的數據綁定到每一行，這主要是因爲我需要將特定的數據綁定到每一行。我綁定我的數據是否錯誤？有沒有更好的方法來跟蹤這些數據，而不是綁定到它們各自的tr？

是更好地運用影響/在遞歸函數大塊或小塊DOM操作？

有沒有哪種情況下最好做一個或另一個？如果是這樣，選擇合適方法的指標是什麼？

來源

2010-12-20 Derek Adair

「綁定」是什麼意思？您是否將數據屬性添加到您的tr或每行的綁定事件？ – Jaime 2010-12-20 17:49:07

我綁定數據屬性w/jQUERY .DATA api。 – 2010-12-21 14:05:53

看看這個post by John Resig，它解釋了在做大量DOM添加時使用DocumentFragments的好處。

DocumentFragment是一個容器，您可以添加節點而無需以任何方式實際更改DOM。準備好後，將整個片段添加到DOM中，並將其內容放入DOM中。

而且，這樣做對$("#myTable")真的不建議每個迭代 - 做循環之前曾經。

來源

2010-12-20 18:29:05

這是一篇非常有趣的文章！ – 2010-12-21 14:02:04

DocumentFragments是我的新朋友=） – 2010-12-23 15:21:25

我懷疑你的性能問題是因爲你在循環中多次修改DOM。

取而代之，請在獲取所有行後嘗試修改它。瀏覽器非常擅長innerHTML替換。嘗試類似

$("#myTable").html("all the rows dom here");

注意到你可能有確切的選擇發揮使用，以獲得DOM在正確的位置。但主要想法是使用innerHTML，並儘可能少地使用它。

來源

2010-12-20 17:44:35 hvgotcodes

將大型元素/數據集附加到dom的性能

回答

相關問題