编辑“︁JavaScript DOM优化”︁（章节）

== DOM优化技巧 ==

以下是几种常见的DOM优化方法：

=== 1. 减少DOM访问 ===
频繁访问DOM元素会降低性能，应尽量减少直接操作DOM的次数。

<syntaxhighlight lang="javascript">
// 不推荐：多次访问DOM
for (let i = 0; i < 1000; i++) {
    document.getElementById("myElement").innerHTML += "New content " + i;
}

// 推荐：先缓存DOM元素，再操作
const element = document.getElementById("myElement");
let content = "";
for (let i = 0; i < 1000; i++) {
    content += "New content " + i;
}
element.innerHTML = content;
</syntaxhighlight>

=== 2. 批量修改DOM ===
使用文档片段（DocumentFragment）或离线DOM进行批量修改，减少回流次数。

<syntaxhighlight lang="javascript">
// 使用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.body.appendChild(fragment);
</syntaxhighlight>

=== 3. 使用事件委托 ===
事件委托利用事件冒泡机制，减少事件监听器的数量。

<syntaxhighlight lang="javascript">
// 不推荐：为每个元素绑定事件
const buttons = document.querySelectorAll(".button");
buttons.forEach(button => {
    button.addEventListener("click", handleClick);
});

// 推荐：事件委托
document.addEventListener("click", (event) => {
    if (event.target.classList.contains("button")) {
        handleClick(event);
    }
});
</syntaxhighlight>

=== 4. 避免强制同步布局（Layout Thrashing） ===
强制同步布局发生在JavaScript强制浏览器提前计算布局属性，导致性能下降。

<syntaxhighlight lang="javascript">
// 不推荐：强制同步布局
const elements = document.querySelectorAll(".box");
elements.forEach(element => {
    const width = element.offsetWidth; // 触发回流
    element.style.width = (width + 10) + "px";
});

// 推荐：使用requestAnimationFrame
const elements = document.querySelectorAll(".box");
requestAnimationFrame(() => {
    elements.forEach(element => {
        const width = element.offsetWidth;
        element.style.width = (width + 10) + "px";
    });
});
</syntaxhighlight>

=== 5. 使用CSS类代替直接样式修改 ===
通过切换CSS类来批量修改样式，减少回流次数。

<syntaxhighlight lang="javascript">
// 不推荐：直接修改样式
element.style.width = "100px";
element.style.height = "200px";
element.style.backgroundColor = "red";

// 推荐：使用CSS类
element.classList.add("active");
</syntaxhighlight>