目录
在现代 Web 应用开发中，JavaScript 与 DOM（文档对象模型）的交互极为频繁。无论是创建动态界面、响应用户操作，还是更新页面内容，DOM 操作都扮演着关键角色。然而，不当的 DOM 操作往往是导致页面性能瓶颈的重要因素。优化 DOM 操作，对于提升 Web 应用的交互响应速度和用户体验至关重要。本文将深入探讨如何在 JavaScript 中高效优化 DOM 操作，通过实战案例展示具体的优化策略与技巧。
一、理解 DOM 操作的性能损耗
DOM 操作之所以耗费性能，主要原因在于浏览器渲染机制。当 JavaScript 对 DOM 进行修改时，浏览器需要重新计算元素的布局（回流）和重新绘制页面（重绘）。回流是指浏览器为了重新渲染页面，需要重新计算元素的位置和几何形状，这涉及到复杂的布局算法。重绘则是在元素的外观发生改变，但布局未变时，浏览器对元素进行重新绘制的过程。频繁的回流和重绘会极大地消耗浏览器资源，导致页面卡顿，交互响应迟缓。
例如，当我们通过 JavaScript 改变一个元素的宽度时，不仅该元素自身的布局会发生变化，还可能影响到其兄弟元素、父元素甚至整个页面的布局，从而触发多次回流和重绘。此外，每次 DOM 查询（如document.getElementById、document.querySelectorAll等）也需要浏览器遍历 DOM 树，这同样是一个相对耗时的操作。
二、减少 DOM 操作次数
（一）批量操作 DOM
在对 DOM 进行多次修改时，尽量将这些修改合并为一次操作。可以先在内存中创建一个虚拟的 DOM 节点，对其进行所有的修改，然后一次性将虚拟节点添加到真实的 DOM 树中。例如，当需要向一个ul列表中添加多个li元素时：
// 不推荐，多次直接操作DOM
const ul = document.getElementById('myList');
const li1 = document.createElement('li');
li1.textContent = 'Item 1';
ul.appendChild(li1);
const li2 = document.createElement('li');
li2.textContent = 'Item 2';
ul.appendChild(li2);
// 推荐，批量操作
const ul = document.getElementById('myList');
const fragment = document.createDocumentFragment();
const li1 = document.createElement('li');
li1.textContent = 'Item 1';
fragment.appendChild(li1);
const li2 = document.createElement('li');
li2.textContent = 'Item 2';
fragment.appendChild(li2);
ul.appendChild(fragment);
通过使用document.createDocumentFragment创建一个文档片段，将所有新创建的li元素添加到文档片段中，最后再将文档片段添加到ul元素，这样只触发了一次回流和重绘，大大提高了性能。
（二）缓存 DOM 查询结果
避免在循环或频繁调用的函数中重复进行 DOM 查询。因为每次查询 DOM 都需要浏览器遍历 DOM 树，这是一个性能开销较大的操作。将 DOM 查询结果缓存起来，多次使用同一结果可以显著提升性能。例如：
// 不推荐，在循环中重复查询DOM
for (let i = 0; i < 10; i++) {
const element = document.getElementById('myElement');
element.style.left = i * 10 + 'px';
}
// 推荐，缓存DOM查询结果
const element = document.getElementById('myElement');
for (let i = 0; i < 10; i++) {
element.style.left = i * 10 + 'px';
}
在上述代码中，将document.getElementById('myElement')的查询结果缓存到element变量中，在循环中直接使用该变量，避免了每次循环都进行 DOM 查询。
三、优化 DOM 查询
（一）使用更高效的查询方法
在进行 DOM 查询时，优先选择更高效的方法。例如，document.getElementById是根据元素的id属性进行查询，由于id在文档中是唯一的，所以这种查询方式效率非常高。相比之下，document.querySelectorAll虽然功能更强大，可以通过 CSS 选择器查询多个元素，但它的性能相对较低，因为它需要遍历整个 DOM 树并匹配所有符合条件的元素。
如果只需要获取单个元素，并且知道其id，应优先使用document.getElementById。如果需要根据类名查询元素，在现代浏览器中，document.getElementsByClassName比document.querySelectorAll更高效，因为前者返回的是一个实时的HTMLCollection，而后者返回的是一个静态的NodeList。
（二）利用事件委托
事件委托是一种将事件处理程序绑定到父元素上，通过事件冒泡机制来处理子元素事件的技术。这样可以减少事件处理程序的数量，避免为每个子元素都绑定一个事件处理程序，从而降低内存消耗和 DOM 操作的复杂度。
例如，在一个包含大量li元素的ul列表中，需要为每个li元素添加点击事件：
// 不推荐，为每个li元素绑定事件
const lis = document.querySelectorAll('ul li');
lis.forEach((li) => {
li.addEventListener('click', () => {
console.log('Clicked on an item');
});
});
// 推荐，使用事件委托
const ul = document.getElementById('myList');
ul.addEventListener('click', (e) => {
if (e.target.tagName === 'LI') {
console.log('Clicked on an item');
}
});
通过将点击事件绑定到ul元素上，利用事件冒泡，当点击任何一个li元素时，事件会冒泡到ul元素，然后在ul元素的事件处理程序中判断点击的目标是否为li元素，从而进行相应的处理。
四、减少回流与重绘
（一）批量修改样式
当需要修改元素的多个样式属性时，不要逐一修改，而是通过修改 CSS 类名或使用cssText属性来一次性修改多个样式。因为每次单独修改样式属性都会触发回流和重绘，而通过修改类名或cssText可以将多个样式修改合并为一次操作。
例如，要同时修改一个元素的宽度、高度和背景颜色：
// 不推荐，逐一修改样式属性
const element = document.getElementById('myElement');
element.style.width = '200px';
element.style.height = '100px';
element.style.backgroundColor = 'blue';
// 推荐，修改CSS类名
const element = document.getElementById('myElement');
element.classList.add('new-style');
.new-style {
width: 200px;
height: 100px;
background-color: blue;
}
或者使用cssText属性：
const element = document.getElementById('myElement');
element.style.cssText = 'width: 200px; height: 100px; background-color: blue;';
（二）使用requestAnimationFrame
requestAnimationFrame是浏览器提供的一个用于在下次重绘之前执行回调函数的 API。它会在浏览器下一次重绘之前调用指定的函数，通常每秒调用 60 次左右，与浏览器的刷新频率同步。使用requestAnimationFrame可以将一些需要频繁更新的 DOM 操作集中在一次重绘中进行，避免频繁触发回流和重绘。
例如，在实现一个动画效果时：
const element = document.getElementById('myElement');
let position = 0;
function animate() {
position += 5;
element.style.left = position + 'px';
requestAnimationFrame(animate);
}
requestAnimationFrame(animate);
通过requestAnimationFrame，动画的每一帧更新都在浏览器下一次重绘之前进行，确保了动画的流畅性，同时减少了不必要的回流和重绘。
优化 DOM 操作是提升 JavaScript 性能的关键环节。通过减少 DOM 操作次数、优化 DOM 查询、降低回流与重绘的频率等策略，可以显著提升 Web 应用的交互响应速度，为用户带来更加流畅的使用体验。在实际开发中，开发者应时刻关注 DOM 操作的性能影响，根据具体场景选择最合适的优化方法，不断优化应用的性能表现。
扫一扫
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
