浏览器渲染原理
学习浏览器渲染原理是为了能够提高页面性能，避免无意间对性能造成损耗。并且面试过程中答得比较好的话... 虽然我还是一名在校生...
本文讨论的是基于WebKit内核（Chrome和Safair）渲染引擎的内容，渲染引擎在不同内核实现的浏览器中存在差异。
概述
从服务端接受到数据后，浏览器将这些字节码转变成渲染的像素这一过程，都经历了什么？了解其中的过程，有助于我们写出更加精干的代码，这些过程简称为关键选渲染路径。通过优化关键渲染路径，能够为构建高性能交互式操作打下基础。 浏览器进行渲染页面前，需要先构建出DOM树和CSSOM树，因此我们需要确保尽快将HTML代码和CSS代码提供给浏览器。
- HTML 标记转换成文档对象模型 (DOM),CSS 标记转换成 CSS 对象模型 (CSSOM)
- DOM 和 CSSOM 是独立的数据结构
HTML文件转化成DOM树
-
打开网页，浏览器首先通过网络请求对应的HTML文件，由于计算机硬件是不识别字符串的（HTML、CSS和JS 文件）,所以在网络传输过程中转化成0和1的字节数据。当浏览器接受收到这些字节数据后，它会将字节数据转化成字符串（characters）。
-
浏览器将转换成的字符串，按照W3C的标准规定转化成各种token(令牌),例如
<html>标签等其他尖括号内的字符串，每个token都具有特殊含义以及一组规则。
-
当结束标记化后，这些token会立即转化为Node，同时这些Node会根据不同Node之间的关系构成一颗DOM树。整个流程的最终输出是我们访问页面的文档对象模型 (DOM)，浏览器对页面进行的进一步处理都会用到它。
补充：在node转化为DOM树这一过程中，是根据每个token之间的层级嵌套关系，进而确定DOM的树形结构。并且DOM树的构建是逐步逐步构建的，而不是在整个过程最后构建。 以上就是浏览器从网络中接收到HTML文件后一系列的转换过程。
在解析HTML文件构建DOM树时，还会遇到CSS和JS文件，这时候浏览器也会去下载并解析这些文件。但请记住在这过程中如果执行了JS代码，会暂停DOM树的构建，目的是保证能够正确的构建DOM树（JavaScript代码能够修改DOM节点）
CSS文件转换成CSSOM树
在浏览器构建DOM树时，在文档的head部分会遇到link标记，该标记引用一个外部CSS样式表，由于预测到需要利用该文件来进行渲染页面，他会立即发出对该资源的请求。 与处理HTML时一样，我们需要将收到的CSS文件转换成某种浏览器能够理解和处理的东西。因此我们会重复创建DOM树的过程来创建CSSOM树。最终形成一颗CSSOM树结构。
这一过程中，浏览器会确定每一个节点的样式，此过程实际是比较消耗资源的。因为在设置样式的时候可以直接设置样式，也可以通过继承获得，所以浏览器就得递归CSSOM树。最终确定某元素的样式。 举例：
<div>
<a> <span></span> </a>
</div>
<style>
span {
color: red;
}
div > a > span {
color: red;
}
</style>
对于第一种情况，浏览器需要找到页面中所有的span标签然后设置颜色。 对于第二种情况，浏览器首先需要找到所有的span标签，然后找到span标签上的a标签，最后找到div标签，确定满足条件的span元素后设置颜色，这样的递归过程很复杂。 所以要避免写过于具体的CSS选择器，对于HTML来说尽量少添加无意义的标签，保持层级扁平化。
生成RenderTree（渲染树）
CSSOM树和DOM树合并成渲染树。但它们都是独立的对象，分别用于网罗文档不同方面的信息：一个描述内容，另一个则是描述需要对文档应用的样式规则。
可是我们应该如何合并两颗树呢？并让浏览器屏幕上渲染像素呢？
为构建渲染树，浏览器大体上完成以下工作
1.从DOM树的根节点开始遍历每个可见的节点
- 某些节点不可见（例如脚本标记 元标记等）导致他们并不会体现在渲染输出中，所以会忽略
- 某些节点通过CSS隐藏，因此在渲染树中会被忽略，例如display:none
2.对于每个可见的节点为他们找到匹配的CSSOM规则并应用他们。 最终输出的渲染树包含了屏幕上的所有可见内容及其样式信息。有了渲染树，我们就可以进入“布局”阶段。
布局(layout)
到目前为止，我们已经确定了哪些节点是可见的，以及经过计算后的样式信息，但是我们并没有计算他们在设备视口中的准确位置和大小。这就是在布局阶段需要解决的，同时也称为自动重排 当浏览器经过布局计算后，确定了每个元素的大小以及精确的位置，并将所有测量值都转换为屏幕上的绝对像素后，将会把这些信息传递给最后一个阶段，绘制阶段。
小结
上述步骤都需要浏览器完成大量工作，所以相当耗时。执行渲染树构建、布局和绘制所需的时间将取决于文档大小、应用的样式，以及运行文档的设备：文档越大，浏览器需要完成的工作就越多；样式越复杂，绘制需要的时间就越长。 我们说起来可能很简单，实际上浏览器却需要完成相当多的工作。如果 DOM树 或 CSSOM树 被修改，只能再执行一遍以上所有步骤，以确定哪些像素需要在屏幕上进行重新渲染。
概述一下浏览器所经历的过程：
- 处理 HTML 标记并构建 DOM 树。
- 处理 CSS 标记并构建 CSSOM 树。
- 将 DOM 与 CSSOM 合并成一个渲染树。
- 根据渲染树来布局，以计算每个节点的几何信息。
- 将各个节点绘制到屏幕上。
