常见的 JavaScript 性能优化实战技巧

1. 减少 DOM 操作
问题：DOM 操作是昂贵的，频繁操作会导致重排（reflow）和重绘（repaint）。

优化：

使用 documentFragment 进行批量 DOM 操作。

缓存 DOM 查询结果，避免重复查询。

使用 classList 代替直接修改 className。

将复杂的 DOM 操作移到 display: none 的元素上，操作完成后再显示。

javascript
复制
// 不推荐
for (let i = 0; i < 100; i++) {
    document.body.innerHTML += '

' + i + '

';
}

// 推荐
const fragment = document.createDocumentFragment();
for (let i = 0; i < 100; i++) {
    const div = document.createElement('div');
    div.textContent = i;
    fragment.appendChild(div);
}
document.body.appendChild(fragment);
2. 避免全局变量
问题：全局变量会增加内存占用，且容易被意外修改。

优化：

使用模块化（如 ES6 的 import/export&#x