浏览器的渲染原理

渲染引擎：

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。
复制代码