为了减少对 DOM 操作的代价, 可以采取以下优化措施:

1.批量操作

将多个 DOM 操作合并成一个批量操作, 减少页面的重排和重绘次数。

假设我们有一个列表，需要对其中的元素进行修改，包括添加、删除和修改等操作。如果我们使用传统的逐个操作的方式，那么每次操作都会触发一次回流和重绘，导致页面性能下降。

// 逐个操作方式
for (let i = 0; i < list.length; i++) {
    let item = document.getElementById(list[i]);
    item.innerHTML = 'new content';
}

而如果我们将这些操作合并成一个批量操作，就可以避免多次回流和重绘，提高页面性能。

// 批量操作方式
let fragment = document.createDocumentFragment();
for (let i = 0; i < list.length; i++) {
    let item = document.createElement('div');
    item.innerHTML = 'new content';
    fragment.appendChild(item);
}
document.body.appendChild(fragment);

2.使用文档片段 (DocumentFragment)

将多个 DOM 元素的操作放在文档片段中, 然后一次性插入到页面中, 减少页面渲染的次数
同上，
在上述代码中，我们首先创建了一个文档片段（DocumentFragment），然后将需要修改的元素添加到该片段中，最后再将整个片段一次性添加到页面中。这样，所有的修改操作都只会触发一次回流和重绘，从而提高了页面性能。

3.缓存 DOM 查询结果

避免多次查询同一个 DOM 元素, 将查询结果缓存在变量中以提高性能。

4.使用事件委托

将事件处理程序绑定在父元素上, 通过事件冒泡机制处理子元素的事件, 减少事件绑定的数量。

例如，假设我们有一个列表，需要为每个列表项添加点击事件。如果我们使用传统的逐个操作的方式，那么每次点击都会触发一次回流和重绘，导致页面性能下降。

// 逐个操作方式
for (let i = 0; i < list.length; i++) {
    let item = document.getElementById(list[i]);
    item.addEventListener('click', function() {
        console.log('item clicked');
    });
}

而如果我们使用事件委托的方式，就可以避免多次回流和重绘，提高页面性能。

// 事件委托方式
let parent = document.getElementById('parent');
parent.addEventListener('click', function(event) {
    if (event.target.tagName === 'LI') {
        console.log('item clicked');
    }
});

在上述代码中，我们将事件监听器绑定在父元素上，而不是直接绑定在每个子元素上。当子元素被点击时，事件会冒泡到父元素，然后由父元素的事件监听器处理。这样，我们就只需要为父元素添加一个事件监听器，而不是为每个子元素都添加一个事件监听器，从而减少了对 DOM 的操作，提高了页面性能。