一次性插入多个DOM节点,考虑性能

一次性插入多个DOM节点,考虑性能

频繁操作会导致卡顿,因此要考虑以下两点:

• 对DOM操作做缓存

//不缓存查询结果
for( let i = 0; i < document.getElementsByTagName('p').length; i++) {
//每次循环DOM都会查询获取length,从而导致卡顿
}

//缓存查询结果
const list = document.getElementsByTagName('p');
const length = pList.length;
for( let i = 0; i < length; i++){
//直接获取缓存过的length,只进行一次DOM查询
}

• 将频繁多次操作改为一次性对DOM结构的操作

const list = document.getElementsById('list');//获取元素
const frag = document.createDocumentFragment();//创建文档片段,用于存储新增的DOM节点,最后一次性插入DOM树
for( let i = 0; i < 20; i++){
	const li = document.createElement('li');//创建DOM元素
	li.innerHTML = `list item ${i}`;
	frag.appendChild(li);//写入文档片段
}
list.appendChild(frag);//循环结束,一次性插入DOM树