《浏览器原理》学习笔记Day59

分层和合成机制：为什么CSS动画比JavaScript高效？

DOM 树生成之后，还要经历布局、分层、绘制、合成、显示等阶段后才能显示出漂亮的页面。

显示器是怎么显示图像的

显示器的作用就是按刷新率从显卡前缓存区读取图片
显卡的职责就是合成新的图像，并将图像保存到后缓冲区。

帧 VS 帧率

大多数设备屏幕的更新频率是 60 次 / 秒，渲染引擎60次/s更新到显卡后缓存区，显卡的后缓存区每60/s更新到前缓存区，显示器60次/s读取前缓存区

如何生成一帧图像

关于其中任意一帧的生成方式，有重排、重绘和合成三种方式。
重排，需要重新根据CSSOM和DOM来计算布局树
重绘，不需要重新布局，但依然需要重新计算绘制信息
合成，不需要触发布局和绘制两个阶段，如果采用GPU，那么合成的效率非常高
Chrome 中的合成技术，分层和合成
为了提升每帧的渲染效率，Chrome 引入了分层和合成的机制。那
将素材分解为多个图层的操作就称为分层，最后将这些图层合并到一起的操作就称为合成。

分块

如果说分层是从宏观上提升了渲染效率，那么分块则是从微观层面提升了渲染效率。
通常，页面的内容都要比屏幕大得多，显示一个页面时，合成线程会将每个图层分割为大小固定的图块，这样可以大大加速页面的显示速度。
即使只渲染优先级最高的图块，也要耗费不少时间，为了解决这个问题，Chrome 又采取了一个策略：在首次合成图块的时候使用一个低分辨率的图片。

如何利用分层技术优化代码

如果经常需要对某个元素做几何形状的变换、透明度变换或是缩放变换，如果使用JavaScript来实现，就会显得效率低下。这时可以使用 will-change 来告诉渲染引擎你会对元素做一些特效变换，CSS代码如下：

.box {
will-change: transform, opacity;
}

此文章为4月Day20学习笔记，内容来源于极客时间《浏览器原理》，学习使我快乐，每天进步一点点💪💪