URL =>字符流; 字符流=>词（token）流; 词（token）流=> DOM 树; DOM 树=> CSS 规则; 计算了每个元素的位置和大小; 根据样式信息和大小信息，为每个元素在内存中渲染它的图形，并且把它绘制到对应的位置
一、渲染
指把模型变成位图的过程
盒的背景、边框、SVG 元素、阴影等特性，都是需要绘制的图形类。像实现 HTTP 协议必须要基于 TCP 库一样，这一部分需要一个底层库来支持。
一般的操作系统会提供一个底层库，比如在 Android 中，有大名鼎鼎的 Skia，而 Windows 平台则有 GDI，一般的浏览器会做一个兼容层来处理掉平台差异。
盒中的文字，也需要用底层库来支持，叫做字体库。字体库提供读取字体文件的基本能力，它能根据字符的码点抽取出字形。
二、合成
合成的过程，就是为一些元素创建一个“合成后的位图”（我们把它称为合成层），把一部分子元素渲染到合成的位图上面。
根据目标，建立的原则就是最大限度减少绘制次数原则。
因为一旦我们用 JavaScript 或者别的什么方式，改变了任何一个 CSS 属性，这份合成后的位图就失效了，我们需要重新绘制所有的元素。
//例如
<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，从而减少了绘制次数。
三、绘制
绘制是把“位图最终绘制到屏幕上，变成肉眼可见的图像”的过程。
一般来说，浏览器并不需要用代码来处理这个过程，浏览器只需要把最终要显示的位图交给操作系统即可。
一般最终位图位于显存中，也有一些情况下，浏览器只需要把内存中的一张位图提交给操作系统或者驱动就可以了，这取决于浏览器运行的环境。不过无论如何，把任何位图合成到这个“最终位图”的操作称为绘制。
