有一个很经典的面试题:当你在浏览器输入一个网址并按下回车之后发生了什么?今天我们就来说说当浏览器从服务器获取了HTML文件之后经历了什么。事实上,从获取HTML文件直到浏览器以像素点的方式在屏幕中绘制出页面的内容确实经历了很多步骤,这些步骤我们称之为关键渲染路径(Critial Rendering Path)。
理解关键渲染路径是提高页面性能的关键所在。总体来说,关键渲染路径分为六步。
-
创建DOM树(Constructing the DOM Tree)
-
创建CSSOM树(Constructing the CSSOM Tree)
-
执行脚本(Running
-
生成渲染树(Creating the Render Tree)
-
生成布局(Generating the Layout)
-
绘制(Painting)
-