【前端基础】如何优化DOM操作性能？

【前言】：DOM操作非常“昂贵”，应该尽量避免频繁操作，占用cpu较多，可能会导致浏览器重绘或重排

【主要思路】：

1. 对DOM查询做缓存；
2. 将频繁操作改成一次性操作。

一，对DOM查询做缓存：

代码示例：

//不缓存DOM查询结果
for(let i=0;i<document.getElementByTagName('p').length;i++){
    //每次循环都会计算length，频繁进行DOM查询
}

//缓存DOM查询结果
const length = document.getElementByTagName('p').length;
for(let i=0;i<length;i++){
//缓存length，只进行一次DOM查询
}

二，将频繁操作改成一次性操作：

代码示例：

    const listNode = document.getElementById('list');
    //创建一个文档片段，此时还没有插入到DOM树中
    const frag = document.createDocumentFragment();
    for (let i = 0; i < 10; i++) {
        const li = document.createElement('li');
        li.innerHTML = 'list item' + i;
        frag.appendChild(li);
    }
    //都完成后，在插入到DOM树中
    listNode.appendChild(frag);