html页面解析 成dom树,DOM，页面渲染

什么是DOM？

需要我们要站在浏览器的角度来思考。🤔

DOM (Document Object Model) 文档对象模型，是 HTML 和 XML 文档的编程接口。HTML DOM 定义了访问和操作 HTML 文档的标准方法。DOM是接口，HTML是标记语言。

节点

在HTML 文档中的所有内容都是节点：

整个文档是一个文档节点

每个 HTML 元素是元素节点

HTML 元素内的文本是文本节点

每个 HTML 属性是属性节点

注释是注释节点

而HTML DOM 将 HTML 文档视作树结构。这种结构被称为节点树：

节点树中的节点彼此拥有层级关系。常用父(parent)、子(child)和同胞(sibling)等术语来描述这些关系。父节点拥有子节点。同级的子节点被称为同胞(兄弟或姐妹)。

在节点树中，顶端节点被称为根(root)。

每个节点都有父节点、除了根(它没有父节点)。

一个节点可拥有任意数量的子节点。

同胞是拥有相同父节点的节点。

HTML片段

节点是根节点

文本节点 "Hello world!" 的父节点是

节点

DOM

DOM

Hello world!

浏览器渲染页面的过程

用户输入网址通过DNS(Domain Name System)解析后得到服务器地址，浏览器向服务器发起http请求，经过TCP/IP三次握手确认链接后，服务器将需要的代码发回给浏览器。

浏览器接收到代码后进行解析，经过DOM构造、布局以及绘制页面，最终展现为网页。

第一步，DOM构造

浏览器首先将收到的html代码，通过html解析器解析构建为一颗DOM树。DOM树就像是一颗倒长着的大树，可以顺着这颗树做出许多操作。然后将接收到的css代码，通过css解析器构建出样式表规则将这些规则分别放到对应的DOM树节点上，得到一颗带有样式属性的DOM树。

第二步，布局

浏览器按从上到下，从左到右的顺序，读取DOM树的文档节点，顺序存放到一条虚拟的传送带上。传送带上的盒子就是节点，而这条流动的传送带就是文档流。文档流排完之后，开始获取计算节点的坐标和大小等CSS属性，作为盒子的包装说明。然后把盒子在仓库里一一摆放，这就将节点布局到了页面。

第三步，绘制页面

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

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