浏览器进程中的网络线程请求获取到html数据后，
通过IPC将数据传给渲染器进程的主线程，
主线程将html解析构造Dom树，然后进行样式计算
根据Dom树和生成好的样式生成Layout Tree
通过遍历Layout Tree 生成绘制顺序表
接着便离了Layout Tree 生成了 Layer Tree
然后主线程将Layer Tree 和绘制顺序信息一起传给合成器线程
合成器线程按规则进行分图层，并把图层分为更小的图块（tiles）传给栅格线程进行栅格化 栅格化完成后 合成器线程会获得栅格线程传过来的“draw quads”图块信息
根据这些信息合成器上合成了一个合成器帧
然后将该合成器帧通过IPC传回给浏览器进程
浏览器进程再传到GPU进行渲染 之后就展示到用户的屏幕上了
当我们改变一个元素的尺寸位置属性时，会重新进行样式计算（Computed Style）布局（Layout）绘制（Paint) 以及后面的所有流程
这种行为我们称为重排
当我们改变某个元素的颜色属性时 不会重新触发布局 但还是会触发样式计算和绘制
这个就是重绘
重排和重绘都会占用主线程 JS也会占用主线程
JS他们都是在主线程运行就会出现抢占执行时间的问题 如果你写了一个不断导致重排重绘的动画
浏览器则需要在每一帧都运行样式计算 布局和绘制的操作
当页面以每秒60帧的刷新率时 才不会让用户感觉到页面卡顿
如果你在运行动画还有大量的JS任务需要执行
因为布局绘制和JS执行都是在主线程运行的
当在一帧的时间内布局和绘制结束后 还有剩余时间 JS就会拿到主线程的使用权
如果JS执行时间过长 就会导致在下一帧开始时的JS没有及时归还主线程 导致下一帧动画没有按时渲染 就会出现页面的卡顿
优化：
（1）通过requestAnimationFrame()来解决
requestAnimationFrame()这个方法会在每一帧被调用，然后我们可以把JS运行任务分成一些更小的任务块(分到每一帧)，在每一帧时间用完之前暂停JS执行 归还主线程，如此，在下一帧开始运行时，主线程就可以按时执行布局和绘制
(react最新的渲染引擎 react Fiber就用到了api来做了很多优化)
（2）通过栅格化的方式。 栅格化的整个流程是不占用主线程的，只在合成器线程和栅格线程中运行，这就意味着它无须和JS枪夺主线程
在css中有个动画属性transform，通过该属性实现的动画不会经过布局和绘制而是直接运行在合成器线程和栅格化线程中 所以不会收到主线程中JS执行的影响
更重要的是通过transform 实现了的动画由于不需要经过布局和绘制样式计算等操作，所以节省了很多运算时间（方便实现负责的动画）
实现动画的效果：
（1）postion
（2）scale
（3）Rotaion
位置变化、宽高变化(旋转、3D等)
网友评论