浏览器渲染页面的过程

上网浏览网页对普通人来讲是非常简单的操作，而对于程序员来说，这件事的背后发生了什么事情呢？

输入的网址在通过DNS解析后得到服务器地址，

浏览器向服务器发起http请求，经过TCP三次握手确认链接后，

服务器将需要的代码发回给浏览器，

浏览器接收到代码后进行解析，

经过三大步骤：DOM构造、布局以及绘制页面。

最终展现为人人都能看懂的网页。

第一步：DOM构造。

浏览器首先将收到的html代码，通过html解析器解析构建为一颗DOM树。

数据结构中有许多的树，而DOM树就像是一颗倒着长的大树，这样的对象模型决定了节点之间都有一定的关联，它们关系可能有父子有兄弟，我们可以顺着这棵树做出许多操作。

接着将接收到的css代码，通过css解析器构建出样式表规则。将这些规则分别放到对应的DOM树节点上，得到一颗带有样式属性的DOM树。

第二步：布局。

浏览器按从上到下、从左到右的顺序，读取DOM树的文档节点，顺序存放到一条虚拟的传送带上，传送带上的盒子就是节点，而这条流动的传送带就是文档流。

如果我们读取到的节点是属于另一个节点下的子节点，那么在放入传送带的时候，就应该按顺序放到该节点盒子的内部。

如果子节点下还有子节点，在传送带上的时候就继续套到子一级的盒子内部，根据它在DOM树上的结构，可以嵌套的层级没有限制的。

文档流排完之后，开始获取计算节点的坐标和大小等css属性，作为盒子的包装说明，

然后把盒子在仓库里一一摆放，这就将节点布局到了页面。

第三步：绘制页面。

布局完成之后，我们在页面上其实是看不到任何内容的，浏览器只是计算出了每一个节点对象，应该被放到页面的哪个位置上，但并没有可视化，

因此最后一步就是将所有内容绘制出来，完成整个页面的渲染。

 

举个栗子

浏览器获得一些代码，它们最终会渲染成这样。

第一步是将代码解析为一颗DOM树。

第二步是按照从上到下、从左到右的顺序，将树上的节点压入文档流。我们看看从body节点开始，然后是body节点下的input节点label节点，一个接一个的被压入文档流。第三步是布局。布局的时候因为是行内元素无法占满一行，会在同一行里挨个排列，如果调整页面宽度让它变窄，行内元素会因为一行放不下而换行。第四步是渲染。最后将它们渲染就完成了这个页面。可见文档流与网页之间的关系，其实就是将一维节点映射到二维空间的关系。（备注：块级元素，每个盒子都会独占一行。遇到图片只需把它当作设置了宽高的普通行内元素处理。）

 

原文视频连接：https://www.iqiyi.com/w_19sad9379l.html

好文：https://www.jianshu.com/p/b22ff1771225

https://blog.youkuaiyun.com/Liu_yunzhao/article/details/91550704?utm_medium=distribute.pc_relevant.none-task-blog-BlogCommendFromBaidu-2.not_use_machine_learn_pai&depth_1-utm_source=distribute.pc_relevant.none-task-blog-BlogCommendFromBaidu-2.not_use_machine_learn_pai