页面渲染机制(一、DOM和CSSOM树的构建)

1、HTML的加载

  HTML是一个网页的基础,下载完成后解析

2、其他静态资源加载

  解析HTML时,发现其中有其他外部资源链接比如CSS、JS、图片等,会立即启用别的线程下载。

  但当外部资源是JS时,HTML的解析会停下来,等JS下载完执行结束后才继续解析HTML,防止JS修改已经完成的解析结果

3、DOM树构建

  在HTML解析的同时,解析器会把解析完成的结果转换成DOM对象,再进一步构建DOM树

4、CSSOM树构建

  CSS下载完之后对CSS进行解析,解析成CSS对象,然后把CSS对象组装起来,构建CSSOM树

5、渲染树构建

  当DOM树和CSSOM树都构建完之后,浏览器根据这两个树构建一棵渲染树

6、布局计算

  渲染树构建完成以后,浏览器计算所有元素大小和绝对位置

7、渲染

  布局计算完成后,浏览器在页面渲染元素。经过渲染引擎处理后,整个页面就显示出来

猜你喜欢

转载自www.cnblogs.com/zhuxingqing/p/11075831.html
今日推荐