从输入URL到页面显示的过程（概括版）

本文是概括的版本，想了解更多细节可以查看文章：从输入URL到页面加载的过程？如何由一道题完善自己的前端知识体系！

过程概述

1.浏览器解析域名对应的IP地址（通过DNS协议逐层查找解析）；

2.浏览器根据IP地址与服务器建立TCP/IP连接（通过三次握手）；

3.浏览器与服务器进行通信，发起请求（封装HTTP报文，TCP报文头，IP报文头...）；

4.服务器接收到请求后，根据请求报文头中的信息执行对应的处理，并返回HTML文件给客户端浏览器；

5.浏览器接收到HTML文件后，开始解析、渲染并展示网页（DOM树、STYLE树、渲染树、绘制页面）；

6.数据传输完毕，关闭客户端与服务器端的双工连接（通过四次挥手）。

详细解析

根据域名查找 IP 地址

概念解释

• IP 地址：IP 协议为互联网上的每一个网络和每一台主机分配的一个逻辑地址。IP 地址如同门牌号码，通过 IP 地址才能确定一台主机位置。服务器本质也是一台主机，想要访问某个服务器，必须先知道它的 IP 地址；
• 域名（ DN ）：IP 地址由四个数字组成，中间用点号连接，在使用过程中难记忆且易输入错误，所以用我们熟悉的字母和数字组合来代替纯数字的 IP 地址，比如我们只会记住 www.baidu.com（百度域名） 而不是 220.181.112.244（百度的其中一个 IP 地址）；
• DNS： 每个域名都对应一个或多个提供相同服务服务器的 IP 地址，只有知道服务器 IP 地址才能建立连接，所以需要通过 DNS 把域名解析成一个 IP 地址。

知道了上面的概念，大概就知道了想要获得服务器的门牌号码，需要先将域名转换成 IP 地址。转换过程如下（以查询 www.baidu.com 的 IP 地址为例，其中2、3、4步均在上一步未查询成功的情况下进行）：

查找过程

1.浏览器搜索自己的 DNS 缓存（维护一张域名与 IP 地址的对应表）；

2.搜索操作系统中的 DNS 缓存（维护一张域名与 IP 地址的对应表）；

3.搜索操作系统的 hosts 文件（ Windows 环境下，维护一张域名与 IP 地址的对应表）；

4.操作系统将域名发送至 LDNS（本地区域名服务器，如果你在学校接入互联网，则 LDNS 服务器就在学校，如果通过电信接入互联网，则 LDNS 服务器就在你当地的电信那里。）LDNS 查询自己的 DNS 缓存（一般查找成功率在 80% 左右），查找成功则返回结果，失败则发起一个迭代 DNS 解析请求；

• LDNS 向 Root Name Server （根域名服务器，其虽然没有每个域名的的具体信息，但存储了负责每个域，如 com、net、org等的解析的顶级域名服务器的地址，其实com后面有个默认的.被省略了，这个.就是根域名服务器）发起请求，此处，Root Name Server 返回 com 域的顶级域名服务器的地址；
• LDNS 向 com 域的顶级域名服务器发起请求，返回 baidu.com 域名服务器地址；
• LDNS 向 baidu.com 域名服务器发起请求，得到 www.baidu.com 的 IP 地址；

5.LDNS 将得到的 IP 地址返回给操作系统，同时自己也将 IP 地址缓存起来；

6.操作系统将 IP 地址返回给浏览器，同时自己也将 IP 地址缓存起来；

7.至此，浏览器已经得到了域名对应的 IP 地址。

补充说明

• 域名与 URL 是两个概念：域名是一台或一组服务器的名称，用来确定服务器在 Internet 上的位置；URL 是统一资源定位符，用来确定某一个文件的具体位置，例如，zhihu.com 是 知乎的域名，根据这个域名可以找到知乎的服务器，zhihu.com/people/CompileYouth 是 URL ，可以根据这个 URL 定位我的知乎主页；
• IP 地址与域名不是一一对应的关系：可以把多个提供相同服务的服务器 IP 设置为同一个域名，但在同一时刻一个域名只能解析出一个 IP地址；同时，一个 IP 地址可以绑定多个域名，数量不限；

建立连接--三次握手

知道了服务器的 IP 地址，客户端便可以与服务器建立TCP/IP连接了。

三次握手的过程如下:

1. 客户端请求连接发送请求同步包SYN，并将标志位置为1，序列号seq=J，客户端进入SYN_SENT状态
2. 服务端收到之后由标志位为1得知客户端请求连接，服务端会发送一个请求确认包ACK并将标志位置为J+1，序列号seq=K，同时发送请求同步包标志位置为1给客户端，服务端进入SYN_RCVD状态
3. 客户端接收到以后首先确认请求确认包的标志位是否位J+1.如果正确，则发送一个请求确认包将标志位置为K+1到服务端，服务端检查请求确认包的标志位是否为K+1，如果正确则建立连接成功，客户端和服务端都进入ESTABLISHED状态，完成三次握手。之后就可以开始传输数据了

补充说明

• TCP 协议：三次握手的过程采用 TCP 协议，其可以保证信息传输的可靠性，三次握手过程中，若一方收不到确认信号，协议会要求重新发送信号。

网页请求与显示

当服务器与客户端建立了连接之后，下面客户端便与服务器进行通信。网页请求是一个单向请求的过程，即是客户端向服务器请求数据，服务器返回相应的数据的过程。

1.浏览器根据 URL 内容，首先在应用层根据HTTP协议生成 HTTP 请求报文，报文体包含要传输的数据，报文头中包含请求文件的位置、请求文件的方式等信息；

2.HTTP报文经过传输层的TCP协议在首部封装TCP报文头，由于TCP协议是负责应用程序进程之间的通信的，TCP报文头中会包含源端口、目的端口等信息；

3.报文再经过网络层的IP协议在首部封装IP报文头，由于IP协议是负责主机之间的通信的，IP报文头中会包含源IP地址、目的IP地址等信息；

4.报文再经过数据链路层封装成帧，然后经过物理层传输给服务器；

5.服务器接收到请求后，会根据 HTTP 请求报文中的内容来执行一些处理，决定如何获取相应的 HTML 文件，然后将得到的HTML文件发送给客户端浏览器；

6.在浏览器还没有完全接收 HTML 文件时便开始渲染、显示网页；

7.在执行 HTML 中代码时，根据需要，浏览器会继续请求图片、CSS、JavsScript等文件，过程同请求 HTML ；

断开连接--四次挥手

客户端与服务器之间的数据传输完成后，可以通过四次挥手断开连接。

四次挥手过程如下：

1. 客户端发送连接释放报文，释放报文首部FIN=1，序列号seq=U，此时关闭客户端到服务器的数据发送
2. 服务端收到连接释放报文，发出确认报文，确认序号位U+1
3. 此时服务端还没有关闭发送数据到客户端，可以继续发送数据。如果无数据发送，就向客户端发送连接释放报文，序列号seq=W
4. 客户端收到连接释放报文后，发出确认报文，确认序号为W+1.到此完成了四次挥手

名称解释

 

• SYN表示请求连接，FIN表示关闭连接，ACK表示确认。

补充说明

• 为什么服务器在接到断开请求时不立即同意断开：当服务器收到断开连接的请求时，可能仍然有数据未发送完毕，所有服务器先发送确认信号，等所有数据发送完毕后再同意断开。
• 第四次握手后，主机发送确认信号后并没有立即断开连接，而是等待了 2 个报文传送周期，原因是：如果第四次握手的确认信息丢失，服务器将会重新发送第三次握手的断开连接的信号，而服务器发觉丢包与重新发送的断开连接到达主机的时间正好为 2 个报文传输周期。