![f11d37fffd99f865e437ee5620e7acc7.png](https://i-blog.csdnimg.cn/blog_migrate/3b719a47eafc4409c89439749df6f392.png)
前言
在Web相关的问题中,从输入URL到整个页面加载展示到用户面前这个问题是绕不开的,它主要涉及到两个步骤:
- 网络请求
- 页面渲染
- 解析HTML文件,构建DOM树
- 解析CSS文件,构建CSSOM树
- 将DOM树和CSSOM树合并,生成渲染树
- 计算渲染树的布局
- 将布局渲染到屏幕上
本文主要介绍页面渲染部分。
构建DOM树
什么是DOM树?
DOM模型:HTML和XML文档的编程接口。它提供了对文档的结构化的表述,并定义了一种方式可以使从程序中对该结构进行访问,从而改变文档的结构,样式和内容。
DOM 将文档解析为一个由节点和对象(包含属性和方法的对象)组成的结构集合。简言之,它会将web页面和脚本或程序语言连接起来。
DOM的结构是由各种子节点组成的,那么以HTMLDocument
为根节点,其余节点为子节点,那么组织成的树型数据结构的表示就是DOM树。
![459d5239bef6ff990ad0ef3f60ce85d0.png](https://i-blog.csdnimg.cn/blog_migrate/0e0f9a405b478cc4385edb33171ea8e1.jpeg)
利用HTML解释器构建DOM树
HTML解释器会将从网络或者本地获取的HTML文件解析成DOM树。需要经过以下几个步骤:
- 将字节流转换成字符流,根据不同的编码进行解码
- 通过词法分析将字符流解析为一个个词语(Token)。这个过程会跳过空格与换行内容。词法分析由
HTMLTokenizer
完成。 - 使用
XSSAuditor
来进行词语验证及过滤,主要是出于安全方面的考虑 - 在经过
XSSAuditor
过滤之后,由解释器调用方法构建DOM节点 - 从上面的DOM节点构建出来DOM树,包括创建元素节点的属性节点工作
![7cb3682d29e3c8e810a9933b711a06fb.png](https://i-blog.csdnimg.cn/blog_migrate/9114d22e269a13531b7288b2e6e71042.jpeg)
构建CSSOM
什么是CSSOM?
CSSOM(CSS对象模型)定义了媒体查询、选择器以及CSS本身的一系列API(包括一般的解析和序列化规则)。它是对附在DOM结构树上的样式的表达,与DOM树的呈现方式相似,只是每个节点都会带上样式属性,包括明确定义和隐式继承的样式。
![262bea5d4f88b523aa7b3bbf3be08e9f.png](https://i-blog.csdnimg.cn/blog_migrate/c2cdc6bb3bfd798dfa2ea0fe150b42d0.jpeg)
CSS是一种渲染阻塞资源(render blocking resource),它需要完全被解析完毕之后才能进入生成渲染树的环节。
CSS并不像HTML那样能执行部分并显示,因为CSS具有继承属性, 后面定义的样式会覆盖或者修改前面的样式。如果我们只使用样式表中部分解析好的样式,我们可能会得到错误的页面效果。所以,我们只能等待CSS完全解析之后,才能进入关键渲染路径的下一环节。
在CSSOM构建完毕之前,页面会一直处于白屏状态,这也是为什么建议将CSS引用及<style>
标签放在head
中,通过优先解析CSS,从而提高用户体验。
CSS解释器
与处理HTML的逻辑一样,CSS解释器做的工作也是将收到的CSS文件转换成浏览器能够理解处理的结构:
- 将字节流转换成字符流
- 接着将字符流转换成词语(Token)
- 将Token转换成相应的节点
- 最后组装成CSSOM树
![35042c19aca093c3b909bc6045c0d7f4.png](https://i-blog.csdnimg.cn/blog_migrate/5020485030f20200a808794b46c49185.jpeg)
阻塞页面渲染
CSSOM树在构建过程中会阻塞页面的渲染,但是不会阻塞DOM的解析。
因为DOM树与CSSOM树的解析生成是独立的,在生成过程中无需阻塞DOM解析。
对于页面渲染来说,如果CSSOM树不进行阻塞,那会使页面首先呈现出一个版本,在浏览器加载完毕CSSOM树渲染后又变更了一个版本,用户体验很差,而且反复渲染的成本也很高。
JavaScript解析
阻塞DOM的解析
JavaScript可以操作DOM来修改DOM结构,因此在遇到外链脚本或者script
标签时,需要等待这部分代码执行完成才会继续解析DOM。
一般现在的浏览器对这部分有做一些优化,在脚本阻塞时会继续下载其他资源,但是解析DOM的过程依然是阻塞的,只是优化了下载资源这个步骤。因此一般是建议将script
标签放在页面底部。
同时也可以通过增加defer
属性来改变脚本的执行特性,使其延迟执行:
- 浏览器下载HTML页面,边下载边解析
- 解析过程中发现带有
defer
属性的script
标签 - 网页继续下载解析,同时启动
script
开始下载外部脚本 - 等待页面渲染完成,执行下载的脚本
构建渲染树
什么是渲染树?
当DOM树与CSSOM树构建完成后,浏览器会将两者进行结合,生成渲染树,这棵树包含了页面所有可见元素及其渲染信息。
![d5b636e4cfb435ec95a253279ef9e25c.png](https://i-blog.csdnimg.cn/blog_migrate/70a93e1ae37bc7dc0683674ca073699d.jpeg)
布局
渲染树生成之后,浏览器会根据渲染树中的样式以及设备的屏幕尺寸,来计算每个元素的坐标和大小。
回流
如果页面元素的结构、位置或者尺寸发生了变化,那么就需要重新计算样式并构建渲染树。回流的性能成本开销是比较高的,一般开发时都需要尽量避免页面频繁回流。
引起回流的操作:
- 页面初始化渲染
- 删除或者新增某个DOM节点
- 修改页面元素的尺寸值
- 改变字体的大小
- 获取某些属性值也会造成回流:
offsetTop
等scrollTop
等clientTop
等width
、height
绘制
计算最终的渲染信息,在实际的渲染过程中浏览器会在尽可能多的层上去渲染,类似于Photoshop里图层的概念。并将每个渲染层进行合并,最终生成一层渲染画面。在绘制过程中,每个层独立渲染,并不关心与其他层之间的关系。