浏览器加载、渲染页面的过程

本文参照这个优秀宝宝的http://blog.csdn.net/XIAOZHUXMEN/article/details/52014901

参照链接：https://www.jianshu.com/p/f59bc859d771

1.渲染引擎在内容后的基本流程：

（1）浏览器解析html源码，然后创建一个 DOM树。（自上而下，深层遍历）

在DOM树中，每一个HTML标签都有一个对应的节点，每一个文本也有一个对应的文

本节点。DOM树的根节点就是 documentElement，对应的是html标签。

（2）浏览器解析CSS代码，计算出最终的样式数据。构建CSSOM树。

对CSS代码中非法的语法它会直接忽略掉。解析CSS的时候会按照如下顺序来定义优先

级：浏览器默认设置 < 用户设置 < 外链样式 < 内联样式 < html中的style。

（3）DOM Tree + CSSOM --> 渲染树（rendering tree）。

渲染树和DOM树有点像，但是是有区别的。DOM树完全和html标签一一对应，但是

渲染树会忽略掉不需要渲染的元素，比如head、display:none的元素等。而且一大段

文本中的每一个行在渲染树中都是独立的一个节点。渲染树中的每一个节点都存储有

对应的css属性。

（4）一旦渲染树创建好了，浏览器就可以根据渲染树直接把页面绘制到屏幕上。

以上四个步骤并不是一次性顺序完成的。如果DOM或者CSSOM被修改，以上过程会

被重复执行。实际上，CSS和JavaScript往往会多次修改DOM或者CSSOM。

2.HTML页面加载和解析流程 

1. 用户输入网址（假设是个html页面，并且是第一次访问），浏览器向服务器发出请

求，服务器返回html文件； 

2. 浏览器开始载入html代码，发现＜head＞标签内有一个＜link＞标签引用外部CSS

文件； 
3. 浏览器又发出CSS文件的请求，服务器返回这个CSS文件；

4. 浏览器继续载入html中＜body＞部分的代码，并且CSS文件已经拿到手了，可以开

始渲染页面了； 

5. 浏览器在代码中发现一个＜img＞标签引用了一张图片，向服务器发出请求。此时

浏览器不会等到图片下载完，而是继续渲染后面的代码； 

6. 服务器返回图片文件，由于图片占用了一定面积，影响了后面段落的排布，因此浏

览器需要回过头来重新渲染这部分代码； 

7. 浏览器发现了一个包含一行Javascript代码的＜script＞标签，赶快运行它； 

8. Javascript脚本执行了这条语句，它命令浏览器隐藏掉代码中的某个＜div

＞ （style.display=”none”）。突然少了这么一个元素，浏览器不得不重新渲染这

部分代码； 

9. 终于等到了＜/html＞的到来，浏览器泪流满面…… 

10. 等等，还没完，用户点了一下界面中的“换肤”按钮，Javascript让浏览器换了一

下＜link＞标签的CSS路径； 

11. 浏览器召集了在座的各位＜div＞＜span＞＜ul＞＜li＞们，“大伙儿收拾收拾行

李，咱得重新来过……”，浏览器向服务器请求了新的CSS文件，重新渲染页面。