浏览器渲染页面流程

当浏览器拿到服务器返回的数据之后,如何渲染页面

做为一名web开发人员,通常都知道浏览器的http请求流程,但是对于浏览器的拿到数据之后如何渲染页面可能并不是太清楚之间的流程

此处借网上流传的概念,分为五步渲染页面:
1) 构建DOM
2) 构建CSSOM
3) 构建渲染树
4) 布局
5) 绘制

构建DOM:

用于加载整个页面的内容
构建DOM的简述就是浏览器读取HTML页面的原始字节,然后根据文件制定的编码将它们转换成字符串,然后生成节点对象构建DOM

构建CSSOM:

用于构建页面的样式
构建CSSOM的过程与DOM树是类似的,但是需要注意的是 CSS匹配HTML是一件非常复杂且耗性能的事情.(不过不用担心,基本上在开发中你不会碰到这个问题).

构建渲染树

用于渲染页面时使用
渲染树是由 DOM+CSSOM 组合在一起就成了渲染树,在这一过程中,不是简单的将两者合并就可以了,除了CSS与HTML匹配之外,还有一些其他的逻辑判断在其中,如某个节点是 display:none的,那么在渲染树中就不会出现了.

布局:

用于提前画好页面架构
布局的时候会计算每个节点的位置与大小,相当于搭建好一个页面的框架如此在绘制的时候才知道那个地方该用什么颜色从那个坐标到那个坐标等信息

绘制:

用于展示出整个页面效果
绘制是根据布局时的坐标将对应的效果展示上去,如此我们的web效果就出来了