一次性插入多个 DOM 节点,考虑性能
DOM 性能
- DOM 操作非常“昂贵”,避免频繁的 DOM 操作
- 对 DOM 查询做缓存
js
// 不缓存 DOM 查询结果
for (let i = 0; i < document.getElementsByTagName('p').length; i++) {}
// 缓存 DOM 查询结果
const length = document.getElementsByTagName('p').length;
for (let i = 0; i < length; i++) {}
- 将频繁操作改为一次性操作
js
const list = 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 结构中
list.appendChild(frag);