浏览器加载显示html页面内容的顺序

1.浏览器请求到HTML代码后,在生成DOM的最开始阶段, 并行发起css、图片、js的请求,无论他们是否在HEAD里。
2.CSS文件下载完成,开始构建CSSOM。
3.所有CSS文件下载完成,CSSOM构建结束后,和 DOM 一起生成 Render Tree。
3.有了Render Tree,浏览器已经能知道网页中有哪些节点、各个节点的CSS定义以及他们的从属关系。下一步操作称之为Layout,顾名思义就是计算出每个节点在屏幕中的位置。
4.Layout后,浏览器已经知道了哪些节点要显示(which nodes are visible)、每个节点的CSS属性是什么(their computed styles)、每个节点在屏幕中的位置是哪里(geometry)。就进入了最后一步:Painting,按照算出来的规则,通过显卡,把内容画到屏幕上。

DOM:Document Object Model,浏览器将HTML解析成树形的数据结构,简称DOM。
CSSOM:CSS Object Model,浏览器将CSS代码解析成树形的数据结构
Render Tree:DOM 和 CSSOM 合并后生成 Render Tree(Render Tree 和DOM一样,以多叉树的形式保存了每个节点的css属性、节点本身属性、以及节点的孩子节点,display:none 的节点不会被加入 Render Tree,而 visibility: hidden 则会,所以,如果某个节点最开始是不显示的,设为 display:none 是更优的。)

注意:

你可能感兴趣的:(浏览器加载显示html页面内容的顺序)