在浏览器输入URL时Web页面的呈现过程

8次阅读

共计 940 个字符，预计需要花费 3 分钟才能阅读完成。

一个简单回答：

浏览器生成请求并发送到服务器；
服务器接受到请求后，执行一些动作或获取某些资源，然后将响应发送回客户端；
浏览器在接收到响应数据之后，解析 DOM 树和 CSS 树，处理 JavaScript，构建页面。

如果这是你是在面试中的回答，那估计面试官的表情就是这样的。

很明显，面试官在问这个问题的时候，重点应该是 浏览器生成请求并发送到服务器 是如何工作的。那这又不得不提到 TCP/IP 四层模型 了。

我们都知道，TCP/IP 四层模型，分别是 应用层、传输层、网络层、链路层。利用 TCP/IP 协议簇进行网络通信时，发送端从应用层往下走，接收端则往应用层往上走。以 HTTP 发送端为例，在应用层发起一个请求时，会将数据包交由传输层进行分割（TCP），并在各个报文上打上标记序号和端口号之后转发给网络层，网络层将目的 MAC 地址添加上之后又交由链路层。

那我们现在再回到这个问题，在浏览器输入 URL 后，发生了什么？

回想一下四层模型的数据流动方向，再结合上面的图，我们再来试试回答这个问题。

首先需要解析 IP（应用层）。我们在浏览器中输入的一般都是域名，相当于是 IP 的一个映射，所以需要 DNS 解析域名来获取 IP 地址。下图则是一个表述了这个 DNS 的查找过程。客户端首先会查找本地是否有对应的域名的缓存（浏览器缓存、hosts 文件），没有则去请求根 DNS 服务器或者其他权威的 DNS 服务器。

建立 TCP 请求（传输层）。在得到上一层的数据包之后，TCP 会对将请求报文分割成报文段，通过 三次握手 建立可靠的连接。
发送 HTTP 请求。在经过传输层的处理之后，到达网络层，通过 IP 协议，搜索对方的地址，一边中转一边发送。到达链路层之后则是将数据包以帧为单位进行广播发送。直到服务器接收到数据，这个过程和上述过程是个逆过程，就不多做赘述了。
服务器处理 。服务器在对数据处理执行一些动作之后，将响应的数据又通过 TCP 发送到客户端，待数据发送完毕，会进行 四次握手 来关闭 TCP 连接。
客户端响应。客户端会通过服务器返回的状态进行响应，比如重定向、zip 压缩的解压等等。
浏览器渲染页面。解析 CSS 规则树和 DOM 树，浏览器进行布局和渲染，处理 js。