HTML渲染过程详解                

　　无意中看到寒冬关于前端的 九个问题，细细想来我也只是对第一、二、九问有所了解，正好也趁着这个机会梳理一下自己的知识体系。由于本人对http协议以及dns对url的解析问题并不了解， 所以这里之探讨url请求加载到浏览器端时，浏览器对html的解析到呈现过程，后来经过几位道友分享，整理了一下 url解析的过程，如下：

1. 用户输入url地址，浏览器根据域名寻找IP地址
2. 浏览器向服务器发送http请求，如果服务器段返回以301之类的重定向，浏览器根据相应头中的location再次发送请求
3. 服务器端接受请求，处理请求生成html代码，返回给浏览器，这时的html页面代码可能是经过压缩的
4. 浏览器接收服务器响应结果，如果有压缩则首先进行解压处理，紧接着就是页面解析渲染

　　解析渲染该过程主要分为以下步骤：

1. 解析HTML
2. 构建DOM树
3. DOM树与CSS样式进行附着构造呈现树
4. 布局
5. 绘制

解析与构建DOM树

　　前两步我们放在一起讨论，浏览器的实际工作也是将他们放在一起进行的。对于HTML浏览器有专门的 html解析器来解析HTML，并在解析的过程中构建 DOM树。在这里我们讨论两种DOM元素的解析，即样式（link、style）与脚本文件（script）。由于浏览器采用自上而下的方式解析，在遇到这两种元素时都会阻塞浏览器的解析，直到外部资源加载并解析或执行完毕后才会继续向下解析html。对于样式与脚本的先后顺序同样也会影响到浏览器的解析过程，究其原因主要在于：script脚本执行过程中可能会修改html界面（如document.write函数）；DOM节点的CSS样式会影响js的执行结果。在我的测试中得到以下四条结论：

　　1）外部样式会阻塞后续脚本执行，直到外部样式加载并解析完毕。

View Code

　　2）外部样式不会阻塞后续外部脚本的加载，但会阻塞外部脚本的执行。

主页代码

外部脚本

　　从瀑布图中我们可以看到，外部脚本与外部样式是并行加载，但直到外部样式加载完毕，外部脚本才开始执行

　　3）如果后续外部脚本含有async属性（IE下为defer），则外部样式不会阻塞该脚本的加载与执行

View Code

　　从瀑布图中可以看到外部脚本的加载与执行并不受link的阻塞

　　4）对于动态创建的link标签不会阻塞其后动态创建的script的加载与执行，不管script标签是否具有async属性，但对于其他非动态创建的script，以上三条结论仍适用

View Code

　　这是最终页面结构

　　通过瀑布图与页面结果可以看到动态创建的外部脚本并未受link的阻塞。

　　link或style标签都会被解析成DOM节点。浏览器对于样式表还会生成CSSStyleSheet对象(C++代码)，他集成子CSSStyle，指标是样式表对象而不管该对象来自于Style还是link。该对象主要包含以下几个重要属性和方法

• CSSRules 即css样式代码
• type 表示样式表类型的字符串。对CSS样式表而言，这个字符串是“type/css”。
• href 通过link生成的为样式链接，否则为undefined
• insertRule(rule,index)：向cssRules集合中指定的位置插入rule字符串。IE不支持这个方法，但支持一个类似的addRule()方法。
• deleteRule(index)：删除cssRules集合中指定的位置的规则。IE不支持这个方法，但支持一个类似的removeRule()方法。

　　文档中对于所有的样式表集合可以通过document.styleSheets来访问。同时对于style或link DOM元素可以通过element.sheet来访问CSSStyleSheet对象，IE中则通过element.styleSheet来访问。

　　html解析完毕，DOM树创建完成后DOMContentLoaded事件即触发，这时候可以用过script来操作DOM节点。