从输入 URL 到页面加载完成的过程中都发生了什么？

2018-11-21 本文已影响0人 mingzihhh

关于这道经典问题的答案，看了一些大佬的博客，顺便复习了一些计算机网络基础，整理一下做个笔记。

流程概述

1、浏览器接收URL
2、域名解析，即浏览器根据域名查询IP
3、浏览器与服务器建立连接
4、浏览器与服务器之间进行通信：服务器处理请求，浏览器接收处理数据
5、断开连接

通信传输流

以访问http://www.baidu.com为例：

一、浏览器接收URL，将其切分

统一资源定位符，用来确定某一个文件的具体位置。
url包含的信息：协议、服务器地址:端口号、资源路径、查询字符串、片段标识符

协议：主要指一些应用层协议，包括但不限于

http：超文本传输协议，主要用于Web浏览器和Web服务器之间的通信
https：超文本传输安全协定，加密的HTTP
ftp：文件传输协议，用于访问位于FTP服务器上的资源或传输大的文件
file：主要用于访问本地计算机中的文件

服务器地址

可以是www.baidu.com这样的域名，也可以是192.168.1.1这类IPv4地址，或者IPv6地址

二、浏览器通过DNS解析域名查询IP地址

DNS(Domain Name System)服务:

应用层协议，提供域名到IP地址的解析服务，运行在UDP协议之上。

域名：

方便人类记忆的服务器地址，如www.baidu.com，以此代替IP地址

IP地址：

IP 协议提供的一种统一地址格式，为互联网上的每一个网络和每一台主机分配的一个逻辑地址，纯数字。只有知道服务器 IP 地址才能建立连接，所以需要通过 DNS 把域名解析成一个 IP 地址。

DNS查询过程

查询浏览器缓存（一张域名与 IP 地址的对应表）；

请求地址需要在浏览器缓存中存在且未过期，浏览器缓存机制可参考浅谈Web缓存
(不懂先放着...)

查询操作系统的 hosts 文件；
查询路由器DNS缓存
查询本地DNS服务器缓存，本地DNS服务器一般都是你的网络接入服务器商提供，比如中国电信，中国移动。查找成功则返回结果，失败则发起一个迭代 DNS 解析请求；

4.1. 本地DNS服务器向根域名服务器（如 com、net、org等的顶级域名服务器）发起请求，根域名服务器返回 com 域的顶级域名服务器的地址；

4.2. 本地DNS服务器向 com 域的顶级域名服务器发起请求，返回 baidu.com 域名服务器地址；

4.3. 本地DNS服务器向baidu.com 域名服务器发起请求，得到 www.baidu.com的 IP 地址；
本地DNS服务器将得到的 IP 地址保存在缓存中并返回给主机，浏览器得到了域名对应的 IP 地址，可以继续访问。

补充说明
1、DNS查询分为两个大类：

递归查询：查询者改变

执行递归查询的DNS服务器会替发起请求的用户客户端完成一系列的DNS查询，直到获取了最终结果后，返回给查询客户端。

迭代查询：查询者不变

迭代查询过程中，各级DNS都把自己知道的信息反馈给客户端，所有的查询过程都由发起请求的客户端自己完成。

2、IP 地址与域名不是一一对应的关系，可以把多个提供相同服务的服务器 IP 设置为同一个域名，但在同一时刻一个域名只能解析出一个 IP地址；同时，一个 IP 地址可以绑定多个域名，数量不限；

三、浏览器与服务器通过三次握手(SYN/ACK)建立TCP 连接

三次握手

HTTP中TCP连接的建立需要经历以下三个过程：
1、客户端向服务器发送一个建立连接的请求；
2、服务器接到请求后发送同意连接的信号；(客户端建立连接）
3、客户端接到同意连接的信号后，再次向服务器发送了确认信号，“握手”结束。（服务器建立连接，第三次可以携带数据）

HTTPS :HTTPS工作原理和TCP握手机制
为什么需要进行三次握手，而不是两次握手？

因为两次握手不可靠，三次握手可以防止失效的连接请求报文段被服务端接收，从而产生错误。

如果client发出的第一个连接请求报文段并没有丢失，而是在某个网络结点长时间的滞留了，以致延误到连接释放以后的某个时间才到达server。本来这是一个早已失效的报文段。但server收到此失效的连接请求报文段后，就误认为是client再次发出的一个新的连接请求。于是就向client发出确认报文段，同意建立连接。假设不采用“三次握手”，那么只要server发出确认，新的连接就建立了。由于现在client并没有发出建立连接的请求，因此不会理睬server的确认，也不会向server发送数据。但server却以为新的运输连接已经建立，并一直等待client发来数据。这时两次握手已经完成，两端就建立起一个无效的连接。但浏览器认为自己没发出请求，所以不会回应，这样就让服务器白白等待回应，浪费了服务器资源。而三次握手的机制下，浏览器知道自己并没有请求连接，会发送拒绝包给服务器，服务器收到回应后也会结束这次无效的连接。

补充说明

TCP协议：位于传输层，提供可靠的字节流服务，用三次握手策略确认数据最终能否送达对方。

四、浏览器与服务器通信

网页请求是一个单向请求的过程，即是一个主机向服务器请求数据，服务器返回相应的数据的过程。

1、浏览器发送请求

浏览器根据 URL 内容生成 HTTP 请求，请求中包含请求文件的位置、请求文件的方式等等。数据经过应用层、传输层、网络层、物理层逐层封装，传输到下一个目的地。

其中，每一层的作用如下。
1、应用层：为应用进程提供服务，加应用层首部封装为协议数据单元。
2、传输层：实现端到端通信，加TCP首部封装为数据包，TCP控制了数据包的发送序列的产生，不断的调整发送序列，实现流控和数据完整。
3、网络层：转发分组并选择路由；加IP首部封装为IP分组。
4、数据链路层：相邻的节点间的数据传输；加首部[mac地址]和尾部封装为帧。
5、物理层：具体物理媒介中的数据传送，数据转换为比特流。

下一个目的地接受到数据后，从物理层得到数据然后经过逐层的解包到链路层到网络层，然后开始上述的处理，在经网络层链路层物理层将数据封装好继续传往下一个地址。

到达最终目的地，再经过5层结构，逐层剥离，最终将数据送到目的主机的目的端口。

2、服务器处理请求

server
http server：主要关心HTTP 协议层面的传输和访问控制，代理、负载均衡等功能，如：Apache /Nginx/IIS
application server：主要运行业务逻辑，也会集成一些 HTTP Server 的功能，往往是运行在 HTTP Server 的背后，执行应用，将动态的内容转化为静态的内容之后，通过 HTTP Server 分发到客户端，如Tomcat/weblogic
请求处理过程（MVC）
对于每一个用户输入的请求，首先被控制器接收，控制器决定用哪个模型来进行处理，然后模型通过业务逻辑层处理用户的请求并返回数据，最后控制器确定用哪个视图模型，用相应的视图格式化模型返回数据。
MVC模式与三层架构的区别
 浅析前端开发中的 MVC/MVP/MVVM 模式
(不懂先放着...)

3、浏览器接收处理数据

3.1 检查 HTTP header 里的状态码，并做出不同的处理方式

3.2 根据首部判断响应是否可以在浏览器缓存，如果可以则存储起来。

3.3 解码：解析html代码文件，遇到js/css/image等静态资源时，就向服务器端去请求下载，解析成对应的树形数据结构DOM树、CSS规则树，Javascript脚本通过DOM API和CSSOM API来操作DOM树、CSS规则树。

3.4 根据HTML和CSS样式进行渲染绘制，执行JS
浏览器的渲染原理简介

五、断开连接

四次挥手

解除连接需要四个过程：
1、主机向服务器发送一个断开连接的请求
2、服务器接到请求后发送确认收到请求的信号
3、服务器向主机发送断开通知
4、主机接到断开通知后断开连接并反馈一个确认信号，服务器收到确认信号后断开连接；

为什么需要“四次挥手”

第一次挥手是浏览器发完数据后，发送FIN请求断开连接。
第二次挥手是服务器发送ACK表示同意，但考虑到服务器可能还有数据要发送，所以服务器先发送确认信号，等所有数据发送完毕后再同意断开。
简而言之，一端断开连接需要两次挥手（请求和回应），两端断开连接就需要四次挥手了。