一个页面从输入 URL 到页面加载显示完成，这个过程中都发生了什么

当我们在浏览器输入URL后会在瞬间显示页面，虽然就这短短的一瞬间，但是中间却经过非常复杂的处理过程，今天我们就简单来剖析下它们之间的主要处理过程。

1.URL

url：统一资源定位符，互联网上的每个文件都有一个唯一的URL，它包含的信息指出文件的位置以及浏览器应该怎么处理它。它最初是由蒂姆·伯纳斯·李发明用来作为万维网的地址，通俗的说就是咱们现日常所见的网页地址，如：www.baidu.com，那么这个地址就是百度的URL。

统一资源定位符的标准格式如下：

协议类型:[//服务器地址[:端口号]][/资源层级UNIX文件路径]文件名[?查询][#片段ID]

以下面为例：

baike.baidu.com:80/item/url/11…

• 1.https是协议
• 2.层级URL标记符号(为[//],固定不变)
• 3.baike.baidu.com是服务器地址（通常为域名，有时为IP地址）
• 4.80是端口
• 5./item/url/110640是路径
• 6.?fr=aladdin是查询参数
• 7.#19是锚点

2.DNS转换

在浏览器输入url后，浏览器并不能直接通过url找到服务器，而是要通过ip地址，

IP 地址是指互联网协议地址，IP 地址是IP协议提供的一种统一的地址格式，它为互联网上的每一个网络和每一台主机分配一个逻辑地址IP 地址是一个 32 位的二进制数，比如 127.0.0.1 为本机 IP。

url(域名)可以说是一个IP地址的代称，目的是为了便于记忆后者。例如www.baidu.com是一个域名，和IP地址220.181.115.244相对应。人们可以直接访问www.baidu.com来代替IP地址，然后域名系统（DNS）就会将它转化成便于机器识别的IP地址。这样，人们只需要记忆www.baidu.com这一串带有特殊含义的字符，而不需要记忆没有含义的数字。

域名系统（英语：Domain NameSystem，缩写：DNS）是互联网的一项服务。它作为将域名和IP地址相互映射的一个分布式数据库，能够使人更方便地访问互联网。而不用去记住能够被机器直接读取的IP数串。通过主机名，最终得到该主机名对应的IP地址的过程叫做域名解析（或主机名解析），他会在DNS上记录一条信息记录。

• 浏览器会从浏览器自身缓存中查找是否有目标域名和对应的IP地址。

• 从本地电脑的hosts文件查找是否有存储DNS信息。

• 从路由器的缓存DNS信息中查找。

• ISP DNS缓存查找，从网络服务商（比如电信）的DNS缓存信息中查找。

• 经由以上几种方法还没查找到目标URL对应的IP的话，就会向根域名DNS服务器查找目标URL的对应IP，根域名服务器会向下级服务器转送请求，层层下发，直至找到对应IP为止

经过以上IP寻址的过程，目标URL查找到对应的IP地址之后，通过IP地址查找到对应的服务器，浏览器将用户发起的http请求发送给服务器。下一步就到了服务器处理阶段的工作。

3.http服务器请求

HTTP 请求分为三个部分：TCP 三次握手、http 请求响应信息、关闭 TCP 连接。

在客户端发送数据之前会发起 TCP 三次握手用以同步客户端和服务端的序列号和确认号，并交换 TCP 窗口大小信息。

第一次

第一次握手：建立连接时，客户端（浏览器）发送syn包（syn=j）到服务器，并进入SYN_SENT状态，等待服务器确认；（浏览器：我要连接你啦） SYN：同步序列编号（Synchronize Sequence Numbers）。

第二次

第二次握手：服务器收到syn包，必须确认客户的SYN（ack=j+1），同时自己也发送一个SYN包（syn=k），即SYN+ACK包，此时服务器进入SYN_RECV状态；（服务器收到请求，并回复：同意你连接）

第三次

第三次握手：客户端（浏览器）收到服务器的SYN+ACK包，向服务器发送确认包ACK(ack=k+1），此包发送完毕，客户端和服务器进入ESTABLISHED（TCP连接成功）状态，完成三次握手。（浏览器回复：收到你的回复，）

三次握手结束后，开始发送 HTTP 请求报文。

请求的内容如下：

HTTP/1.1协议中共定义了八种方法（也叫“动作”） GET、POST、PUT、DELETE、PATCH、HEAD、OPTIONS、TRACE。其中较为常用的又GET、POST、PUT方法；

请求的格式：

1 动词 路径 协议/版本
2 Key1: value1
2 Key2: value2
2 Key3: value3
2 Content-Type: application/x-www-form-urlencoded
2 Host: www.baidu.com
2 User-Agent: curl/7.54.0
3 
4 要上传的数据
请求最多包含四部分，最少包含三部分。（也就是说第四部分可以为空）
第三部分永远都是一个回车（\n）
动词有 GET POST PUT PATCH DELETE HEAD OPTIONS 等
这里的路径包括「查询参数」，但不包括「锚点」
如果你没有写路径，那么路径默认为 /
第 2 部分中的 Content-Type 标注了第 4 部分的格式
复制代码

请求了之后，应该都能得到一个响应，除非断网了，或者服务器宕机了。接下来服务器开始处理请求并返回 HTTP 报文

4.服务器处理请求

每台服务器上都会安装处理请求的应用——web server（常见的web server产品有apache、nginx、IIS或Lighttpd等）。

web server 担任管控的角色，对于不同用户发送的请求，会结合配置文件，把不同请求委托给服务器上处理对应请求的程序进行处理（例如CGI脚本，JSP脚本，servlets，ASP脚本，服务器端JavaScript，或者一些其它的服务器端技术等），然后返回后台程序处理产生的结果作为响应。

5.网站后台处理阶段

网站处理，就是实际后台处理的工作。后台开发现在有很多框架，但大部分都还是按照MVC设计模式进行搭建的。

MVC是三个单词的首字母缩写，它们是Model（模型）、View（视图）和Controller（控制）。

这个模式认为，程序不论简单或复杂，从结构上看，都可以分成三层。

1）最上面的一层，是直接面向最终用户的"视图层"（View）。它是提供给用户的操作界面，是程序的外壳。

2**）最底下的一层，是核心的"数据层"（Model），也就是程序需要操作的数据或信息。在 MVC 的三个部件中，模型拥有最多的处理任务。一个模型能为多个视图提供数据。**

3）中间的一层，就是"控制层"（Controller），它负责根据用户从"视图层"输入的指令，选取"数据层"中的数据，然后对其进行相应的操作，产生最终结果，控制器属于管理者角色，从视图接收请求并决定调用哪个模型构件去处理请求，然后再确定用哪个视图来显示模型处理返回的数据。

总结而言，首先控制器接收用户的请求，并决定应该调用哪个模型来进行处理，然后模型用业务逻辑来处理用户的请求并返回数据，最后控制器用相应的视图格式化模型返回html字符串给浏览器，浏览器呈现网页给用户。 返回相应报文内容如下：

6.浏览器解析渲染页面

通过后台处理返回的html字符串结果会被浏览器读取解析，对应就是html页面加载、解析、渲染的工作。

1、加载

浏览器对一个html页面的加载顺序是从上而下的，并在加载过程并行进行解析渲染处理。在这个过程中遇到link标签、image标签、script标签时，浏览器会再次向服务器发送请求获取css文件、图片资源、js文件，并执行js代码，同步进行加载解析。

2、解析、渲染

解析的过程，其实就是生成解析树，即dom树。dom树是由dom元素及属性节点组成，加上css解析的样式对象和js解析后的动作实现。而渲染，就是将DOM树进行可视化表示。下一步就来到了绘制网页的工作阶段。

六、绘制页面 浏览器通过上面步骤计算得到渲染树，是DOM树的可视化表示，构建渲染树使页面以正确的顺序绘制出来，遵循一定的渲染规则，经过一系列的渲染工作，实现网站页面的绘制，由此最终完成了页面展示。

7.断开链接

当数据传送完毕，需要断开 tcp 连接，此时发起 tcp 四次挥手。

1.TCP客户端发送一个FIN，用来关闭客户到服务器的数据传送。(浏览器发起通知，请求已经发送完毕，你准备关闭吧)

2.服务器收到这个FIN，它发回一个ACK，确认序号为收到的序号加1。和SYN一样，一个FIN将占用一个序号。(服务器发起通知，请求已经已经接收完毕，你准备关闭吧)

3.服务器关闭客户端的连接，发送一个FIN给客户端。(服务器发起通知，响应报文已经发送完毕，你准备关闭吧)

4.客户端发回ACK报文确认，并将确认序号设置为收到序号加1。(浏览器发起通知，我准备关闭了，你也准备关闭吧)

以上基本就是个页面从输入 URL 到页面加载显示完成，发生的全过程，当然还可以在细化一些，不过这些知识对于前端来说已经足够了，有兴趣的同学可以自行深究。

结尾

文章参考多篇该类主题的文章以及维基百科，本人进行归纳整理，删繁就简，如有不足错误之处，欢迎指出。

转载于:https://juejin.im/post/5cb44c365188257ab74c639c