性能优化之渲染

关键英文词: layout paint composite

渲染的管道流程

管道，恩， 跟linux上的概念很像，上一个处理完了交给下一个

合成器层为什么牛

合成器线程可以单独处理用户的交互并使内容更变,不需求主线程去执行,主线程执行js、布局、样式、绘制。

动画性能优化(没有使用transform或opacity的动画)

1. FLIP: aerotwist.com/blog/flip-y…

能立即触发布局的js方法(forces a sync layout)

ele.getBoundingClientRect()

requestAnimationFrame

确保回调在下一帧开始时运行，确保当前样式已渲染OK

requestAnimationFrame(function () {
    el.classList.add('animate-to-transform')
    el.style.transform = ''
})
复制代码

Tools

1. Chrome Devtools里面的“layer”选项卡，可以帮助看到页面上的层。

参考文档

developers.google.com/web/fundame… developers.google.com/web/fundame… developers.google.com/web/fundame…