浏览器解析HTML原理

  用户输入的网址后，通过DNS解析后得到服务器的地址，然后浏览器向服务器发起请求，经过TCP三次握手确认连接后，服务器将需要的代码发回给浏览器。如果输入的不是网址而是一串关键词，浏览器就会知道你是要搜索，然后会使用默认的搜索引擎来查询。
  浏览器安全校验通过和接收到代码完毕后，浏览器通过IPC管道将数据以次传递给渲染进程进入渲染进程。然后渲染器进程将会对HTML代码进行解析。

1.构建DOM树

浏览器渲染引擎对收到的HTML代码进行逐一解析，遍历文档节点后构造出DOM树，DOM树节点与HTML标签一一对应。我们可以顺着这颗树做出许多操作，接着将接受到的CSS代码，通过CSS解析构建出样式表规则。

2.构建渲染树

浏览器通过DOM树和CSS的样式表规则构造出渲染树，此树能够使内容按正确的顺序绘制。

3.布局

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

4．绘制页面

布局完成之后，在页面上还看不到任何内容，浏览器只是计算出了每一个节点对象应该被放在页面的那个位置上，并没有可视化，最后一步就是将所有内容绘制出来，完成整个页面的渲染。浏览器将遍历渲染树，利用UI后端组件完成绘制。