JavaScript 大量 DOM 操作性能優化：DocumentFragment 最佳實踐

為什麼會慢？

每次 appendChild、innerHTML += 都會觸發瀏覽器重排，大量操作導致嚴重卡頓。

優化方案：DocumentFragment

const fragment = document.createDocumentFragment();
for (let i = 0; i < 1000; i++) {
    const div = document.createElement('div');
    div.textContent = `Item ${i}`;
    fragment.appendChild(div);
}
document.getElementById('container').appendChild(fragment); // 僅觸發一次重排

其他技巧

• 批量修改用 innerHTML 替換整個容器內容（注意 XSS）
• 虛擬滾動只渲染可視區
• CSS contain: strict 限制重排範圍

參考資源

知乎討論：DOM 操作性能深度解析