最后一步：渲染和绘制

浏览器的工作步骤如下：

URL>字符流>词（token）流>DOM树（不含样式信息的 DOM）>DOM树+CSS规则（含样式信息的 DOM）>根据样式信息，计算了每个元素的位置和大小>根据这些样式信息和大小信息，为每个元素在内存中渲染它的图形，并且把它绘制到对应的位置

这节我们就看最后一个步骤：根据这些样式信息和大小信息，为每个元素在内存中渲染它的图形，并且把它绘制到对应的位置

---

渲染（render）:模型变成位图的过程

位图：就是在内存里建立一张二维表格，把一张图片的每个像素对应的颜色保存进去（位图信息也是 DOM 树中占据浏览器内存最多的信息，我们在做内存占用优化时，主要就是考虑这一部分）。浏览器中渲染这个过程，就是把每一个元素对应的盒变成位图。这里的元素包括 HTML 元素和伪元素，一个元素可能对应多个盒（比如 inline 元素，可能会分成多行）。每一个盒对应着一张位图。

只要分为两大类：图形，文字

盒的背景、边框、SVG 元素、阴影等特性，都是需要绘制的图形类，一般的操作系统会提供一个底层库，一般的浏览器会做一个兼容层来处理掉平台差异。

盒中的文字，也需要用底层库来支持，叫做字体库。字体库提供读取字体文件的基本能力，它能根据字符的码点抽取出字形。

另外：因为阴影，它可能非常巨大，或者渲染到非常遥远的位置，为了优化，浏览器实际的实现中会把阴影作为一个独立的盒来处理。

合成（compositing）：因为渲染不会将子元素绘制到渲染的位图上，所以需要用到合成

合成策略是“猜测”可能变化的元素，把它排除到合成之外

<div id="a">
    <div id="b">...</div>
    <div id="c" style="transform:translate(0,0)"></div>
</div>

假设我们的合成策略能够把 a、b 两个 div 合成，而不把 c 合成，那么，当我执行以下代码时：

document.getElementById("c").style.transform = "translate(100px, 0)";

我们绘制的时候，就可以只需要绘制 a 和 b 合成好的位图和 c，从而减少了绘制次数。这里需要注意的是，在实际场景中，我们的 b 可能有很多复杂的子元素，所以当合成命中时，性能提升收益非常之高。

目前，主流浏览器一般根据 position、transform 等属性来决定合成策略，来“猜测”这些元素未来可能发生变化。但是，这样的猜测准确性有限，所以新的 CSS 标准中，规定了 will-change 属性，可以由业务代码来提示浏览器的合成策略，灵活运用这样的特性，可以大大提升合成策略的效果。从这里我们可以看到一些提高我们渲染性能的一些方法。

绘制

绘制是把“位图最终绘制到屏幕上，变成肉眼可见的图像”的过程，不过，一般来说，浏览器并不需要用代码来处理这个过程，浏览器只需要把最终要显示的位图交给操作系统即可。

CSS 性能优化，应该尽量避免“重排”和“重绘”，以提高性能。

总结：

渲染过程把元素变成位图，合成把一部分位图变成合成层，最终的绘制过程把合成层显示到屏幕上

小作业：自己实现一个玩具浏览器。

此文章为4月Day10学习笔记，内容来源于极客时间《重学前端》