HTML的渲染过程

HTML渲染过程

解析渲染该过程主要分为5个步骤：

1. 解析HTML
2. 构建DOM树 :
   将HTML构建成一个DOM树，也就是构件结点，把所有的节点都构建出来。解析构建CSSOM树
3. DOM树与CSS样式进行附着构造呈现树（构建render树）：
   DOM已经构建好，css也由，浏览器就会来构造render树，浏览器就知道有哪些节点，各个节点的css定义以及它们的从属关系）
4. 布局
   当render树有了，通过render树，浏览器开始计算各个节点的位置和样式
5. 绘制
   遍历reader树，在页面上绘制各节点

解析和构建DOM树
浏览器将解析HTML和构建DOM树这两项工作是放在一起进行的。
对于HTML，浏览器有专门的HTML解析器来解析HTML，并且在解析的过程中构建DOM树 。
浏览器采用自上而下的方式进行解析，在遇到样式文件（link style）和脚本文件（script）时，都会阻塞浏览器的解析，直到外部资源加载并解析或者执行完毕以后才会继续向下解析HTML。
对于样式和脚本的先后顺序同样也会影响到浏览器的解析过程，主要原因在于script脚本执行过程中可能会修改html界面。DOM结点的CSS样式会影响JS的执行结果。

构建呈现树
HTML解析完毕后，开始构建呈现树RenderTree，这一步的主要工作在于将css样式应用到DOM节点上，WebKit内核将这一过程称为附着，其他浏览器有不同的概念。对前端工程师而言这个过程会涉及到CSS层叠问题。

首先将根据样式重要性排序，由低到高依次为：

1. 浏览器声明
2. 用户普通声明
3. 作者普通声明
4. 作者重要声明
5. 用户重要声明

对于同一重要级别，则是根据CSS选择符的特指度来判定优先级；一条样式声明的特指度由以下四个部分决定：S-I-C-E.

1. 声明来自内联的style属性则 S+1；
2. 声明中含有id属性则 I+1；
3. 声明中含有类、伪类、属性选择器则 C+1；
4. 生命中含有元素、伪元素选择器则 E+1；

特指度的比较类似于两个字符串之间比较大小。
　
　呈现树的每一个节点即为与其相对应的DOM节点的CSS框，框的类型与DOM节点的display属性有关，block元素生成block框，inline元素生成inline框。每一个呈现树节点都有与之相对应的DOM节点，但DOM节点不一定有与之相对应的呈现树节点，比如display属性为none的DOM节点，而且呈现树节点在呈现树中的位置与他们在DOM树中的位置不一定相同，比如float与绝对定位元素。

布局
呈现树构造完成后浏览器便进行布局处理，及计算每个呈现树节点的大小和位置信息。有道友可能要问，前面已将样式附着到DOM节点上，不是已经有了样式信息为何还要计算大小。这里可以这样理解，以上包含大小的样式信息只是存在内存里，并没有实际使用，浏览器要根据窗口的实际大小来处理呈现树节点的实际显示大小和位置，比如对于margin为auto的处理。

绘制
布局完成后，便是将呈现树绘制出来显示在屏幕上。对于每一个呈现树节点来说，主要绘制顺序如下：

1. 背景颜色
2. 背景图片
3. 边框
4. 子呈现树节点
5. 轮廓