渲染引擎：
Firefox使用Geoko ——Mozilla自主研发的渲染引擎
Safari和Chrome都使用webkit ——Webkit是一款开源渲染引擎
浏览器的渲染过程主要包括以下几步：
1. 解析HTML生成DOM树。
2. 解析CSS生成CSSOM规则树。
3. 将DOM树与CSSOM规则树合并在一起生成渲染树。
4. 遍历渲染树开始布局，计算每个节点的位置大小信息。
5. 将渲染树每个节点绘制到屏幕。
构建DOM树
当浏览器接收到服务器响应来的HTML文档后，会遍历文档节点，生成DOM树。
需要注意的是，DOM树的生成过程中可能会被CSS和JS的加载执行阻塞。
构建CSSOM规则树
浏览器解析CSS文件并生成CSS规则树，每个CSS文件都被分析成一个StyleSheet对象
每个对象都包含CSS规则。CSS规则对象包含对应于CSS语法的选择器和声明对象以及其他对象。
渲染阻塞
当浏览器遇到一个script标记时，DOM构建将暂停，直至脚本完成执行，然后继续构建DOM。
每次去执行JavaScript脚本都会严重地阻塞DOM树的构建，如果JavaScript脚本还操作了CSSOM，
而正好这个CSSOM还没有下载和构建，浏览器甚至会延迟脚本执行和构建DOM，直至完成其CSSOM的
下载和构建。
所以，script 标签的位置很重要。
实际使用时，可以遵循下面两个原则：
CSS 优先：引入顺序上，CSS 资源先于 JavaScript 资源。
JS置后：我们通常把JS代码放到页面底部，且JavaScript 应尽量少影响 DOM 的构建。
构建渲染树
通过DOM树和CSS规则树我们便可以构建渲染树。浏览器会先从DOM树的根节点开始遍历每个
可见节点。对每个可见节点，找到其适配的CSS样式规则并应用。
渲染树绘制
在绘制阶段，遍历渲染树，调用渲染器的paint()方法在屏幕上显示其内容。渲染树的绘制
工作是由浏览器的UI后端组件完成的。
replaint（重绘）：屏幕的一部分重画，不影响整体布局，比如某个CSS的背景色变了，但
元素的几何尺寸和位置不变。
reflow（回流）： 意味着元件的几何尺寸变了，我们需要重新验证并计算渲染树。是渲染
树的一部分或全部发生了变化。这就是Reflow，或是Layout。
有些情况下，比如修改了元素的样式，浏览器并不会立刻 reflow 或 repaint一次，
而是会把这样的操作积攒一批，然后做一次 reflow，这又叫异步 reflow或增量异步 reflow。
有些情况下，比如 resize窗口，改变了页面默认的字体等。
对于这些操作，浏览器会马上进行 reflow。
