頻繁操作 DOM , 容易造成重繪和重排, 造成卡頓, 所以有必要對DOM 操作進行一些優(yōu)化
// 不緩存 DOM 查詢結(jié)果
for (let 0; i < document.getElementByTagName('p').length; i++) {
// 每次循環(huán), 都會計算 length, 頻繁進行 DOM 查詢
}
// 緩存 DOM 查詢結(jié)果
let divEl = documnet.querySelectAll('div')
let length = divEl.length
for(let i = 0; i < length; i++) {
// 緩存 length, 只進行一次 DOM 查詢
}
cont list = document.getElementById('list')
// 創(chuàng)建一個文檔片段, 此時還沒有插入到 DOM 結(jié)構(gòu)中
const frag = document.createDocumentFragment()
for(let i = 0; i < 20; i++) {
const li = document.createElement('li')
// 先插入文檔片段中
frag.appendChild(li)
}
// 都完成之后, 再同意插入到 DOM 結(jié)構(gòu)中
list.appendChild(frag)
