主题
运行时优化
节流防抖
对于一些操作频繁的函数，可以使用节流防抖优化
长列表优化
- 分页
- 无限加载：滚动到一定距离才更新下一个列表，这个通常使用稳定的第三方库，如 element 的无限加载
切割大任务
把大任务切割成一个个小任务，分散到各个帧上执行
js
function loop(curTotal) {
if (curTotal < 0) return
let pageCount = Math.min(curTotal, 20)
requestAnimationFrame(() => {
let fragment = document.createDocumentFragment()
for (let i = 0; i < pageCount; i++) {
let div = document.createElement('div')
div.innerText = 1
fragment.appendChild(div)
}
container.appendChild(fragment)
loop(curTotal - pageCount)
})
}
loop(total)并行计算
使用 web worker，并行执行任务
减少重排重绘
看 web-浏览器-重排重绘
合成层
好处：
- 合成层的位图，会交由 GPU 合成，比 CPU 处理要快；
- 当需要 repaint 时，只需要 repaint 本身，不会影响到其他的层
开启合成层：
- 文档根元素（
<html>） - position 值不为 static，且 z-index 值不为 auto 的元素
- opacity 属性值小于 1 的元素；
- transform / filter / clip-path，属性不为none的元素
- will-change 值设定了任一属性
- contain 属性值为 layout、paint 或包含它们其中之一的合成值
- video, iframe, canvas
css
.animate-element-parent {
will-change: opacity;
}
.animate-element {
transition: opacity .2s linear
}