jQuery DOM操作 - 性能比較？

Question

我正在學習使用jQuery進行DOM操作，並希望瞭解瀏覽器性能的最佳實踐。

說我有兩個DOM元素（div，p，ol等），我希望用戶只能看到第一個元素，然後只看到第二個元素。

我：

1. 使用替代（）
2. 刪除（）的第一個元素，並添加（）的第二個元素
3. 隱藏（）的第一個元素和show（）的第二個元素

之間有什麼性能差異：

• 1對2
• 2對比3
• 1對3

是否有附加的性能方面的考慮，如果元素是不同類型的？或者如果元素是按鈕或表單域？

Answer 1

由於browser reflow（其中瀏覽器必須重新呈現頁面的一部分或全部），因此刪除元素並將其添加到DOM中的成本很高。你想盡可能避免迴流;他們是昂貴的。

更換基本上是一個刪除，然後再添加，所以上述適用。

顯示和隱藏是最好的，因爲它只是爲元素添加樣式。

您應用這些方法的元素類型也不應導致上述變化。

總之，使用.show()和.hide()以獲得最佳性能。

Answer 2

基本上，如果你不想隱藏某些東西然後再顯示它，最好隱藏（）和show（）。這不會改變關於dom的任何事情，只是改變它的顯示方式。