性能优化之渲染

关键英文词: layout paint composite

渲染的管道流程

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

• JS/CSS -> layout -> paint -> composite

  改变元素宽高布局属性的，都会引发layout，从而有后面的管道

• JS/css -> paint -> composite

  只改变元素的颜色、阴影什么的

• JS/css -> composite

  目前只引发合成层渲染的CSS属性: transform & opacity

  特殊使用，提高到其本身的层，建合成器层：

  will-change: transform;
  transform: translateZ(0);
  复制代码

合成器层为何牛

合成器线程能够单独处理用户的交互并使内容更变,不需求主线程去执行,主线程执行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…