HTML渲染过程

我们一直在写HTML,关注的一直是界面和功能,很少考虑整个HTML的渲染过程。也是,在开发过程中确实不需要关注这方面,但是知道和理解HTML的渲染过程,对于HTML的一些性能有很好的认识。

HTML解析过程:构建DOM树、构建CSSOM树、根据DOM树和CSSOM树构建render树、有了render树就开始布局Layout、最后绘制paint。

1、构建DOM树

将HTML构建成一个DOM树,也就是构建节点,把所有的节点都构建出来。

2、构建CSSOM

解析css去构建CSSOM树

3、构建render树

DOM已经构建好了,css也有了,浏览器就会根据这两个来构造render树,浏览器就知道了有哪些节点、各个节点的CSS定义以及他们的从属关系。

4、布局

当render树有了,通过render树,浏览器开始计算各个节点的位置和样式。

5、绘制

遍历render树,在页面上绘制每个节点。

6、重排reflow

当render树绘制完成之后,比如JavaScript改变样式或添加节点,这时候render树就需要重新计算。

7、重绘repaint

既然重排了,最后当然得重新绘制页面。

HTML整个解析过程看起来很简单,但是我们要知道解析过程中css、js和dom的加载顺序。我们都知道HTML是自上往下解析的,在解析过程中:

1、如果遇到link和style,那就就会去下载这些外部的css资源,但是css跟DOM的构建是并行的,就是说不会阻塞DOM树的构建。

2、如果遇到script,那么页面就会把控制权交给JavaScript,直到脚本加载完毕或者是执行完毕。

3、页面的渲染是依靠render树,也就是说如果css没有加载完成,页面也不会渲染显示。

4、JavaScript执行过程中有可能需要改变样式,所以css加载也会阻塞JavaScript的加载。

5、JavaScript执行过程中如果操作DOM,但是DOM树又是在JavaScript之后才能构建,就会报错,找不到节点。

这就是HTML的渲染过程,因为DOM和css并行构建,我们会把css用外部引入,可以更快的构建DOM,因为JavaScript会阻塞DOM和css构建,且操作DOM一定要在DOM构建完成,我们选择把script放在最下面。如果我们过多的在render渲染完成后改变render,那么重排和重绘就会一直被动重发执行,这也会造成渲染速度变慢。

(完)

Coding 个人笔记

  • 发表于:
  • 原文链接https://kuaibao.qq.com/s/20180626G1V4C000?refer=cp_1026
  • 腾讯「云+社区」是腾讯内容开放平台帐号(企鹅号)传播渠道之一,根据《腾讯内容开放平台服务协议》转载发布内容。

扫码关注云+社区

领取腾讯云代金券