step1~4已经经历了
将URL变成字符流
-> 把字符流变成词（token），把词流构造成DOM树
-> 把不含样式信息的DOM树应用CSS规则，变成包含样式信息的DOM树
-> 根据样式信息，计算了每个元素的位置和大小
本文就是接下来的步骤，根据这些样式信息和大小信息，为每个元素在内存中渲染它的图形，并把它绘制到对应的位置。
渲染
渲染过程把元素变成位图。
浏览器中渲染这个过程，是把每个元素(包括HTML元素和伪元素)对应的盒变成位图。一个元素可能对应多个盒（如inline元素，可能会分成多行），每一个盒对应着一张位图。
盒的背景、边框、SVG元素、阴影等特性，都是需要绘制的图形类。一般操作系统会提供一个底层库，如在android中的Skia，Windows平台的GDI，一般的浏览器会做一个兼容来处理掉平台的差异。
盒中的文字，也需要底层库来支持——字体库。字体库提供读取字体文件的基本能力，它能根据字符的码点，抽取出字形。字形分为像素字形和矢量字形。通常字体会在6px 8px等小尺寸提供像素字形，较大尺寸提供矢量字形。矢量字形需要经过渲染才能继续渲染到元素的位图上。目前最常用的字体库是Freetype，是一个C++编写的开源的字体库。
通常 渲染过程生成的位图尺寸跟它在上一步排版时占据的尺寸相同。实际情况下，很多属性会影响渲染位图的大小，如阴影，浏览器实际的实现中会把阴影作为一个独立的盒来处理。
这里讲的渲染过程，是不会把子元素绘制到渲染的位图上的，档父子元素的相对位置发生变化时，可以保证渲染的结果能够最大程度被缓存，减少重新渲染
渲染过程除了位图，最终绘制上去还产生一个‘热区’，这个‘热区’不但与input相关，还跟用户选择、鼠标事件、scroll等交互相关
合成
合成把一部分位图变成合成层。
上一小节说过‘渲染过程不会把子元素渲染到位图上面’，合成的过程就是为一些元素创建一个 合成后的位图(合成层)，把一部分子元素渲染到合成的位图上面。
是为哪些元素创建合成后的位图？把哪些子元素渲染到合成的位图上面呢？
合成是一个性能考量，合成的目标就是提高性能，根据此目标，合成的策略 就是最大限度减少绘制的次数。
‘猜测’可能变化的元素，把它排除到合成之外。目前主流浏览器一般根据position、transform等属性来决定合成策略，来猜测这些元素未来可能发生变化。
在新的css标准中，规定了will-change属性，可以由业务代码来提示浏览器的合成策略，灵活运用这样的特性可以大大提升合成策略的效果。
绘制
绘制过程把合成层显示到屏幕上。
绘制是把 位图最终绘制到屏幕上，变成肉眼可见的图像 的过程。一般来说浏览器只需要把最终要展示的位图交给操作系统即可。
一般最终位图位于显存中，在有些运行环境下，浏览器只需要把内存中的一张位图提交给操作系统或驱动。我们将 任何位图合成到‘最终位图’的操作称为绘制。
网友评论