我们一直在写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、如果