DOM操作优化

1. 为什么DOM操作会影响性能？

答案：DOM操作影响性能是因为：

1. DOM操作通常比JavaScript操作慢
2. 频繁的DOM操作可能导致浏览器重排（reflow）和重绘（repaint）
3. DOM是渲染引擎和JavaScript引擎之间的桥梁，涉及跨层通信

2. 什么是文档片段（Document Fragment）？如何使用它来优化DOM操作？

答案：文档片段是一个轻量级的文档对象，存在于内存中，不在DOM树中。使用它可以：

1. 在内存中操作DOM，减少页面重排和重绘
2. 一次性将多个节点添加到DOM中

示例：

const fragment = document.createDocumentFragment();
for (let i = 0; i < 1000; i++) {
    const li = document.createElement('li');
    li.textContent = `Item ${i}`;
    fragment.appendChild(li);
}
document.getElementById('myList').appendChild(fragment);

3. 如何减少DOM查询？

答案：减少DOM查询的方法：

1. 缓存DOM查询结果
2. 使用选择器API（如querySelector）代替获取方法（如getElementById）
3. 使用事件委托
4. 避免在循环中进行DOM查询

4. 什么是虚拟DOM？它如何提高性能？

答案：虚拟DOM是DOM的JavaScript表示。它通过以下方式提高性能：

1. 减少实际DOM操作，降低重排和重绘的频率
2. 批量处理DOM更新
3. 实现高效的DOM diff算法，只更新需要变化的部分

5. 如何优化DOM插入操作？

答案：优化DOM插入操作的方法：

1. 使用文档片段（DocumentFragment）
2. 使用innerHTML一次性插入大量HTML
3. 在插入大量元素时，先将元素从文档流中移除，操作完成后再放回
4. 使用虚拟DOM库（如React、Vue）

6. 什么是重排（reflow）和重绘（repaint）？如何减少它们？

答案：

• 重排：元素的位置或大小发生变化，浏览器需要重新计算布局
• 重绘：元素外观发生变化，但不影响布局

减少重排和重绘的方法：

1. 批量修改样式
2. 使用CSS类替代多个样式修改
3. 使用transform和opacity进行动画，它们不会触发重排
4. 使用position: absolute或fixed将元素脱离文档流
5. 避免使用table布局

7. 如何使用事件委托来优化事件处理？

答案：事件委托是将事件监听器添加到父元素而不是每个子元素的技术。优点：

1. 减少事件监听器数量，节省内存
2. 动态添加的元素也能响应事件
3. 简化代码结构

示例：

document.getElementById('parent').addEventListener('click', function(e) {
    if (e.target.className === 'child') {
        console.log('Child element clicked');
    }
});

8. 如何优化DOM动画？

答案：优化DOM动画的方法：

1. 使用CSS3动画代替JavaScript动画
2. 使用requestAnimationFrame代替setTimeout或setInterval
3. 使用transform和opacity进行动画
4. 对动画元素使用will-change属性
5. 使用GPU加速（如transform: translateZ(0)）

9. 什么是DOM回流（DOM thrashing）？如何避免？

答案：DOM回流是指在短时间内多次读取和修改DOM属性，导致强制同步布局的现象。避免方法：

1. 批量读取DOM属性，然后批量修改
2. 使用FastDOM等库来自动批处理DOM操作
3. 使用虚拟DOM
4. 使用requestAnimationFrame来调度DOM操作

10. 如何使用Web Workers来优化DOM操作？

答案：Web Workers可以在后台线程中运行JavaScript，不会阻塞UI线程。使用Web Workers优化DOM操作：

1. 将复杂计算移至Web Worker中
2. 在Worker中处理大量数据，然后将结果传回主线程更新DOM
3. 使用Worker处理长时间运行的任务，避免阻塞UI

注意：Web Workers不能直接操作DOM，需要通过消息传递与主线程通信。