从URL地址到页面的过程

每天做个总结吧，坚持就是胜利！

    /**
        @date 2021-07-05
        @description 从URL地址到页面的过程
    */
复制代码

壹（序）

从URL地址到页面的过程属于时老生常谈的一个问题，从这道题可以看出来很多东西，比如对HTTP的了解，对浏览器渲染的了解等等，深挖的点更多，今天根据我的知识储备做一个小小的总结，如有错误请指正。

我准备从两个方面分开讲解，一是网络请求部分，二是渲染部分。

贰（网络请求）

主要经历以下步骤：

1. 域名->IP地址：

我们最终去请求资源的地方，是根据IP地址去找到的，而为了更方便记忆，也为了更有标识性，我们一般是输入一个URL地址（更准确的说应该是URI），比如baidu.com，这能让我们一下就明白这是百度的网站，也方便记忆，那么第一步就必须得经历一个域名到IP地址的转换；

域名到IP地址的转换主要是使用DNS（Domain Name System）服务，DNS服务属于应用层，首先是查找客户端有没有缓存，然后查找操作系统缓存，还可能查找路由器缓存，都没有的话就是去DNS服务上查找

2. HTTP请求

知道了最后取资源的地方，我们就可以开始发送HTTP请求去获取资源了，这一步从客户端应用层->客户端传输层->客户端网络层->客户端链路层->服务器链路层->服务器网络层->服务器传输层->服务器应用层一层一层的进行通信，连接，最后返回获取到资源

应用层->传输层：使用HTTP协议发送报文
传输层->网络层：使用TCP协议传输报文
网络层与链路层：根据IP地址查找到相应的MAC地址，再通过IP协议（区别于IP地址）传输数据

其中涉及到TCP的三次握手与四次挥手：

三次握手：

1. 客户端发送带有SYN标识的报文，请求连接
2. 服务器发送带有SYN/ACK标识的报文，确认报文接收成功
3. 客户端发送带有ACK标识的报文，结束握手
为什么是三次握手：防止失效的请求报文重新发送到服务器，产生错误；
复制代码

四次挥手：

1. 客户端请求发送完成后，发送带有FIN标识的报文，请求断开连接
2. 服务器接收到断开请求后，发送带有ACK标识的报文，确认断开
3. 服务器发送完数据后，发送带有FIN标识的报文，表示断开连接
4. 客户端接收后，发送带有ACK 标识的确认报文
5. 到此四次挥手结束，服务器立马进入CLOSED状态，而客户端需要等待2 * MSL（最长报文寿命）之后再进入CLOSED状态
复制代码

到这一步，已经处理完成了从URL地址到获取到请求资源，下面就是浏览器渲染的时候了。

叁（浏览器渲染）

此时我们已经接收到了服务器的HTML资源，下面浏览器对HTML资源进行解析

HTML解析：浏览器使用HTML解析器解析HTML文件，解析过程中并不是一帆风顺的，可能会遇到style标签，这个时候会使用HTML解析器解析其中的样式，但是DOM解析是同时进行的，所以很可能出现DOM已经解析完成并渲染到页面，但是还在解析style中的样式，而出现‘闪屏‘，所以我们更应该使用link标签去引入CSS样式

CSS解析：在HTML解析器遇到link标签时，需要去加载CSS文件，加载完成后使用CSS解析器进行解析，CSS的解析是不会阻塞DOM解析的，所以一般我们把link标签放在头部，避免页面再次渲染，需要注意的是，CSS解析会阻塞页面的渲染，必须要等到CSS解析完再配合DOM树渲染页面，这个时间段内，就可能出现’白屏‘

JS加载与执行：在HTML解析器遇到script标签时，会去下载JS文件然后执行，因为JS可以操作DOM和样式，所以JS的执行会阻塞DOM的解析以及页面的渲染，所以一般将script标签放在底部，避免阻塞页面渲染，当然也可以使用script的异步属性defer和async，两者的区别可以参考这里

从上面的解析过程中，我们可以总结一下浏览器渲染的过程：

1. 解析HTML文件构建DOM树
2. 解析CSS文件构建CSS规则树
3. 根据DOM树和CSS规则树构建渲染树
4. 排列节点
5. 渲染页面

至此，整个页面就完整的渲染出来了，其中可以看到，很多点是我们应该注意和进行优化的，所以我的性能优化总结也是基于HTTP请求和浏览器渲染两个模块（明天总结）。