浏览器是如何渲染页面

• 输入的网址在通过DNS解析后得到服务器地址
• 浏览器向服务器发起http请求，经过TCP/IP三次握手确认链接后，服务器将需要的代码发回给浏览器。
• 浏览器接收到代码后进行解析，经过三大步骤：
  DOM构造、布局以及绘制页面

DOM构造

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

布局

• 浏览器按从上到下，从左到右的顺序，读取DOM树的文档节点，顺序存放到一条虚拟的传送带上。
• 传送带上的盒子就是节点，而这条流动的传送带就是文档流。
• 如果我们读取到的节点是属于另一个节点下的子节点，那么在放入传送带的时候，就应该按顺序放到该节点盒子的内部。
• 如果子节点下还有子节点，在传送带上的时候就继续套到子一级的盒子内部。根据它在DOM树上的结构，可以嵌套的层级没有限制的
• 文档流排完之后，开始获取计算节点的坐标和大小等CSS属性，作为盒子的包装说明
• 然后把盒子在仓库里一一摆放，这就将节点布局到了页面。

绘制

• 布局完成之后，我们在页面上其实是看不到任何内容的浏览器只是计算出了每一个节点对象应该被放到页面的哪个位置上，但并没有可视化。因此最后一步就是将所有内容绘制出来，完成整个页面的渲染。