显示器是怎么显示图像的

显示器一般都有一个固定的刷新频率，比如说144Hz，也就是每秒更新144张图片，更新的图片来自于显卡中前缓冲区。显示器每秒固定从前缓冲区读取144张图像并显示到显示器上。

显卡的用途

显卡的职责就是合成图像，并将图像保存到后缓冲区，当图像存到后缓冲区后，系统会让后缓冲区和前缓冲区互换，通常，显卡的更新频率和显示器的刷新频率相同，但是在某些情况下，显卡处理图片的速度慢，就会造成视觉上的卡顿。

我们把渲染流水线生产的每一张图片称为一帧，把渲染流水线每秒更新了多少帧称为帧率。也就是一秒更新了144张图片就是144Hz。

渲染流水线生成一帧图像的方式有重排、重绘、合成三种方式。

这三种方式的渲染路径不同，渲染路径越长生成的图像就越耗时。其中重排时间最长，因为需要走完全部的流程，重绘省去了重新布局的阶段，所以相对重排效率高，合成不需要触发布局和绘制阶段，所以效率最高。[这里详细在这篇中讲过](Web页面加载过程及渲染流程 - 掘金 (juejin.cn))，可以看一下。

这里主要讲合成，Chrome的合成技术主要用三个词来概括：分层、分块和合成。

为了提高每帧的渲染效率,Chrome引入了分层和合成的机制。

跟ps一样,最终展示的网页是由很多个图层合成的。在生成图像的过程中,把素材分为多个图层的过程称为分层.最终将这些页面合并到一起的操作称为合成.

比如说一个页面被分为两层,在上面一层的页面需要进行变换的时候只需要对这一层进行操作然后合成就好了,这样所花费的时间就非常短.

在大部分情况下,页面的内容会比屏幕大,显示一个页面只需要把需要的大小展示在屏幕上就好了.如果都合成了在展示是不必要的.所以合成线程会将每个图层划分为大小相等的图块,然后优先绘制靠近视口的图块.

因为计算机内存上的数据传到GPU内存的速度比较慢,所以Chrome采用了在首次合成图块的时候使用一个低分辨率的图片,等到正常的页面绘制出来后在将当前低分辨率的图片替换.