从输完 URL 到页面内容展现做了哪些事情

一、DNS(Domain Name System) 域名解析

根据输入的 URL 域名找到真实 IP 地址，在查找的过程中，首先 DNS 会查询是否有缓存。

1. 从浏览器中查找，不同浏览器设置的缓存时间不同，一般在2-30分钟；

2. 从操作系统中查找；

3. 从路由器中查找；

4. 从 ISP 中查找；

5. 域名服务器递归查询，首先从顶级域名（一般顶级域名已经在缓存中了），再到二级域名，以此类推。

二、建立TCP 连接

根据 IP 地址，客户端与服务端进行三次握手，建立连接（参考文章https://mp.csdn.net/postedit/87977518）。

三、传输数据

连接后，客户端向服务端发起 HTTP 请求，服务器接收到请求后，返回请求静态资源，并同时调用 apache 服务器请求接口数据。

四、关闭 TCP 连接

数据传输完成，客户端与服务端进行四次挥手，关闭连接。

五、渲染页面

对于浏览器根据服务端返回的静态资源，浏览器使用 Native GUI 引擎渲染 HTML 和 CSS ；使用 JS 引擎加载 JS 。

1. 将 HTML 节点解析成 DOM 树结构

从 HTML 字节码到 DOM 树结构的流程：字节(Bytes) => 字符串(Characters) => Tokens => 节点(Nodes) => DOM

计算机只能识别0和1的字节，根据字节的编码规则将字节转换成字符串，再将字符串转化为 W3C 定义的各种标签，生成 tokens（令牌），匹配字符串，将 tokens 按照规则转换为包含属性和规则的节点对象（nodes）,根据每个节点的层次关系（父子节点关系）和规则转换为直观的树形结构。HTML 是增量构建的，在 HTML 文件还在传输时，这个转换过程就已经开始了。最终得到完整的 DOM(Document Object Module文档对象模型)

2. 将 CSS 解析成 CSSOM 规则树

CSS 构建的过程跟 DOM 差不多，只不过 CSS 会涉及到复杂的计算，如 CSS 的属性来源，匹配不同的类（id 或者 class）,确认复写规则及权重，最后确定每个节点的样式值，形成 CSSOM(CSS Object Module  CSS对象模型)。

3. 将 DOM 与 CSSOM 组合成 Render-tree（渲染树）

从 DOM 节点开始遍历 HTML 上和 CSS 上的可见节点；

对于每个可见的节点，为其找到适配的 CSSOM并组合他们；

将所有的节点根据层级关系和规则构建成 render-tree 树。

4. 加载 JavaScript 脚本

虽然 HTML\CSS 与 JS 是通过不同的引擎加载，但是却是互斥的，即加载 HTML\CSS 时，JS 会停止加载，相反亦然，这是因为 JS 引擎可以操作 DOM，改变样式、内容等。所以当执行了 JS 之后，渲染树要重新构建。