重排、重绘和合成
重排,通常渲染路径越长,生成图像花费的时间就越多
重绘 没有了重新布局的阶段,操作效率稍微高点,但是依然需要重新计算绘制信息,并触发绘制操作之后的一系列操作。
合成 操作的路径就显得非常短了,并不需要触发布局和绘制两个阶段,如果采用了 GPU,那么合成的效率会非常高
分层和合成
为了提升每帧的渲染效率,Chrome 引入了分层和合成的机制。那该怎么来理解分层和合成机制呢?
在 Chrome 的渲染流水线中,分层体现在生成布局树之后,渲染引擎会根据布局树的特点将其转换为层树(Layer Tree),层树是渲染流水线后续流程的基础结构。
**需要重点关注的是,合成操作是在合成线程上完成的,这也就意味着在执行合成操作时,是不会影响到主线程执行的。**这就是为什么经常主线程卡住了,但是 CSS 动画依然能执行的原因。
分块
合成线程会将每个图层分割为大小固定的图块,然后优先绘制靠近视口的图块,这样就可以大大加速页面的显示速度。不过有时候,即使只绘制那些优先级最高的图块,也要耗费不少的时间,因为涉及到一个很关键的因素——**纹理上传,**这是因为从计算机内存上传到 GPU 内存的操作会比较慢。
Chrome 又采取了一个策略:**在首次合成图块的时候使用一个低分辨率的图片。**比如可以是正常分辨率的一半,分辨率减少一半,纹理就减少了四分之三。在首次显示页面内容的时候,将这个低分辨率的图片显示出来,然后合成器继续绘制正常比例的网页内容,当正常比例的网页内容绘制完成后&#