更快地操作現有的HTML或刪除HTML，然後重新創建它？

Question

我正在處理這個項目，我有一個元素列表並將它們轉換爲一個「圖形」（不是一個真正的圖形，但可以稱它爲僞造的圖形）。我有我的數據集，我在數據上運行for循環，然後爲每個數據創建一個li元素，創建父級ul，追加li，然後將父級附加到另一個DOM元素（我們稱之爲祖父母）已經在頁面上。之後，我必須根據用戶交互對該列表進行後續更新。
此外，這一切都在使用jQuery的上下文中。現在

，我的問題是 - 它速度更快，在每個後續調用創建的元素一次，然後更新所產生的HTML或者是更快地只是重建的每個元素，empty()祖父元素（這將擺脫父ul的），然後重新安裝新創建的ul（我現在正在這樣做）？

請記住，當我重新創建li s時，它們根本不在DOM中，因此在重新創建它們時沒有重繪/重新焊接。重新繪製只發生在我重新使用新創建的ul時。

我正在和一位同事說話，他說最好在創建HTML元素後更新它們，而不是每次都重新創建它們。我正在考慮走這條路線，但後來我認爲更新現有的lis實際上會導致對50個元素進行重繪，而對empty()重新創建新創建的ul進行重繪。

想法？

Answer 1

由於rsp says，您需要剖析您的解決方案，因爲這將取決於標記的結構和運行的特定瀏覽器。當然，如果您對目前的速度感到不滿意，那麼只有通過所有這些努力才值得！

有三種基本的方法，但是，其中每個可能是是最快的。第一個只會導致一次重繪;其他人只有兩個，如果你選擇你的父節點。

1. 構建新的內容爲HTML字符串（[...].join("")），然後用.html()適用。 優點：通常比方法＃2更快。 缺點：不一定太多，可以留下陳舊的jQuery數據/事件（即可能泄漏，如果你不小心）。

2. 建設與jQuery 新內容文檔外（例如把所有<li> s轉換爲<ul>，然後將<ul>到文檔中建設完成後），然後插入normall。 優點：往往比方法＃1更容易閱讀。 缺點：越糟越好你的標記得到。

3. 從文檔中刪除現有節點（理想情況下，單個父節點，如<ul>），進行更改，然後重新插入它們。 優點：可能比方法＃2更清晰且更具性能，特別是在複雜標記上。 缺點：如果元素的數量在渲染之間改變，則變得複雜得多。

最後一個唯一的原因，即使你正在做大量的變化兩個重新繪製的，因爲只有初始移除，並最終插入影響文檔。更改文檔外部的元素不會導致重新繪製。

Answer 2

我會建議首先分析您的代碼。不成熟的優化是萬惡之源。