DOM性能

DOM操作非常"昂贵"，避免频繁的DOM操作。

 

1.对DOM查询做缓存。

2.将频繁操作改为一次性操作。

 

可以使用文档片段节点处理完dom的片段变化，再添加到dom结构中：

// 创建一个文档片段
const frag = document.createDocumentFragment();

// 执行插入
 for(let x=0; x<10; x++) { 
    const li = document.createElement("li");
    li.innerHTMl = "List item" + x; 
    frag.appendChild(li); 
}

// 都完全之后，再插入到DOM树中
const listNode = document.getElementById('list');
listNode.appendChild(frag);