JavaScript 文檔碎片

JavaScript 文檔碎片是一種內存中的容器，用于存儲 HTML DOM 元素，可以在其上執行操作，然后將整個碎片一次性地添加到文檔中。在大量操作 DOM 元素時，使用文檔碎片可以大大提高性能。

舉個例子，如果我們要在某個容器內添加多個子元素，通常使用以下代碼：

const container = document.getElementById('container');
for (let i = 0; i< 100; i++) {
const div = document.createElement('div');
div.innerHTML = i + 1;
container.appendChild(div);
}

上述代碼每次循環都會調用 appendChild() 方法，將一個新的 div 元素添加到容器中。這樣做是沒有問題的，但當需要添加大量元素時，可能會明顯影響網頁性能，因為每次添加元素都會觸發 DOM 重繪。

使用文檔碎片可以避免這種情況，只需稍加修改上面的代碼：

const container = document.getElementById('container');
const fragment = document.createDocumentFragment();
for (let i = 0; i< 100; i++) {
const div = document.createElement('div');
div.innerHTML = i + 1;
fragment.appendChild(div);
}
container.appendChild(fragment);

在這個示例中，我們創建了一個文檔碎片，然后將所有子元素添加到此碎片中，最后將整個碎片添加到容器中。這個修改可能看起來微不足道，但實際上它可以顯著提高性能。

除了提高性能之外，文檔碎片還有以下優點：

• 可以減少網頁閃爍問題。如果您使用 appendChild() 方法將每個元素單獨添加到文檔中，那么在添加元素時可能會發生閃爍。這種情況不會出現在文檔碎片中。
• 可以簡化代碼。使用文檔碎片可以使代碼更加簡潔。
• 可以優化代碼。使用文檔碎片可以優化一些需要在 DOM 中進行復雜操作的代碼。

總之，如果要向網頁中添加大量元素，使用文檔碎片是一個好習慣。這可以提高性能，減少網頁閃爍問題，并讓您的代碼更加簡潔。