用户在使用浏览器访问一个网站时需要先通过HTTP(HTTPS)协议向服务器发送请求,之后服务器返回HTML文件与响应信息。这时,浏览器会根据HTML文件来进行解析与渲染(该阶段还包括向服务器请求非内联的CSS文件与JavaScript文件或者其他资源),最终再将页面呈现在用户面前。
关键渲染路径
览器接收到服务器返回的HTML、CSS和JavaScript字节数据并对其进行解析和转变成像素的渲染过程被称为关键渲染路径
浏览器在渲染页面前需要先构建出DOM树与CSSOM树(如果没有DOM树和CSSOM树就无法确定页面的结构与样式,所以这两项是必须先构建出来的)
构建DOM树
DOM树全称为Document Object Model文档对象模型,它是HTML和XML文档的编程接口,提供了对文档的结构化表示,并定义了一种可以使程序对该结构进行访问的方式(比如JavaScript就是通过DOM来操作结构、样式和内容)。DOM将文档解析为一个由节点和对象组成的集合,可以说一个WEB页面其实就是一个DOM。
浏览器从网络或硬盘中获得HTML字节数据后会经过一个流程将字节解析为DOM树: 字节 -> 字符 -> 令牌 -> 节点对象 -> 对象模型
下面通过一个例子来清晰地展示整个过程
Critical Path
Hello web performance students!