从URL输入到页面展示出来到底发生了什么？【超详解】

总的来说大概分为以下几个过程：

• DNS域名解析:将域名解析成可识别的IP地址
• TCP连接：TCP的三次握手
• 发送HTTP请求
• 服务器处理请求并返回 HTTP 报文
• 浏览器解析渲染页面
• 断开连接：TCP 四次挥手

一.URL是什么呢？

URL 统一资源定位符：是用来表示从互联网上得到的资源位置和访问这些资源的方法。
scheme://host.domain:port/path/filename
scheme - 定义因特网服务的类型。常见的协议有 http、https、ftp、file
其中最常见的类型是 http，而 https 则是进行加密的网络传输。
host - 定义域主机（http 的默认主机是 www）
domain - 定义因特网域名，比如 baidu.com.cn
port - 定义主机上的端口号（http 的默认端口号是 80）
path - 定义服务器上的路径（如果省略，则文档必须位于网站的根目录中）。
filename - 定义文档/资源的名称

二.DNS域名解析

域名解析是指把域名映射成为IP地址或把IP地址映射成域名的过程。前者称为正向解析，后者称为反向解析。
当客户端需要域名解析时，通过本机的DNS客户端构造一个DNS请求报文，以UDP数据包方式发往本地域名服务器。

1.IP地址是什么？

IP地址（Internet Protocol Address），缩写为IP Adress，是一种在Internet上的给主机统一编址的地址格式，也称为网络协议（IP协议）地址。它为互联网上的每一个网络和每一台主机分配一个逻辑地址，常见的IP地址，分为IPv4与IPv6两大类。

2.浏览器如何通过域名查询URL的IP？

• 浏览器缓存：浏览器会按照一定的频率缓存 DNS 记录
• 操作系统缓存：如果浏览器缓存中找不到需要的 DNS 记录，那就去操作系统中找
• 路由缓存：路由器的DNS缓存
• ISP的DNS服务器：ISP 是互联网服务提供商(Internet Service Provider)的简称，ISP 有专门的 DNS 服务器应对 DNS 查询请求
• 根服务器：ISP 的 DNS 服务器还找不到的话，它就会向根服务器发出请求，进行递归查询（DNS 服务器先问—>根域名服务器.com 域名服务器的 IP 地址，然后再问—>baidu 域名服务器，依次类推）
  

3.图解

浏览器通过向 DNS 服务器发送域名，DNS 服务器查询到与域名相对应的 IP 地址，然后返回给浏览器，浏览器再将 IP 地址打在协议上，同时请求参数也会在协议搭载，然后一并发送给对应的服务器。接下来介绍向服务器发送 HTTP 请求阶段，HTTP 请求分为三个部分：TCP 三次握手、http 请求响应信息、关闭 TCP 连接。

三.TCP三次握手

1.过程

客户端A：发送SYN连接报文，序列号为x，进入SYNC-SENT状态。
【第一次握手：浏览器发起，告诉服务器我要过来了】
服务端B：发送SYN连接确认报文（SYN=1，ACK = 1），序列号为y（seq = y），确认报文x（ack = x + 1），进入SYNC-RCVD状态。
【第二次握手，由服务器发起，告诉浏览器我准备接受了，你赶紧过来吧】
客户端A：发送ACK确认报文（ACK = 1），序列号为x+1（seq = x + 1），确认报文y+1（ack = y + 1），进入ESTABLISHED状态。
【第三次握手，由浏览器发送，告诉服务器，我马上就发了，准备接受吧】
服务器B：收到后进入ESTABLISHED状态。

2.三次握手的原因

• 三次握手是为了防止客户端的请求报文在网络滞留，客户端超时重传了请求报文，服务端建立连接，传输数据，释放连接之后，服务器又收到了客户端滞留的请求报文，建立连接一直等待客户端发送数据。
• 服务器对客户端的请求进行回应(第二次握手)后，就会理所当然的认为连接已建立，而如果客户端并没有收到服务器的回应呢？此时，客户端仍认为连接未建立，服务器会对已建立的连接保存必要的资源，如果大量的这种情况，服务器会崩溃。
• 总结：为了防止已失效的连接请求报文段突然又传送到了服务端，因而产生错误

四.发送HTTP请求

TCP三次握手结束后，开始发送HTTP请求报文
请求报文的格式

1.请求行

请求方法、URL、协议版本

• 请求方法包含 8 种：GET、POST、PUT、DELETE、PATCH、HEAD、OPTIONS、TRACE
• URL 即请求地址，由 <协议>：//<主机>：<端口>/<路径>?<参数> 组成
• 协议版本即 http 版本号

2.请求头部

• 请求的附加信息，由关键字/值对组成，每行一对，关键字和值用英文冒号“:”分隔

3.请求体

• 承载多个请求参数的数据，包含回车符、换行符和请求数据，并不是所有请求都具有请求数据

五.服务器处理请求并返回 HTTP 报文

1.服务器

服务器是网络环境中的高性能计算机，它侦听网络上的其他计算机（客户机）提交的服务请求，并提供相应的服务，比如网页服务、文件下载服务、邮件服务、视频服务

客户端

客户端主要的功能是浏览网页、看视频、听音乐等等

2.http响应报文

• 响应行包含：协议版本，状态码，状态码描述
  这是关于状态码的描述

• 响应头部包含响应报文的附加信息，由 名/值 对组成

• 响应主体包含回车符、换行符和响应返回数据，并不是所有响应报文都有响应数据

六.浏览器解析渲染页面

浏览器拿到响应文本 HTML 后，开始浏览器渲染机制

• 根据 HTML 解析出 DOM 树
• 根据 CSS 解析生成 CSS 规则树
• 结合 DOM 树和 CSS 规则树，生成渲染树
• 根据渲染树计算每一个节点的信息
• 根据计算好的信息绘制页面

七.断开连接：TCP四次挥手

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

1.四次挥手的过程

• 发起方向被动方发送报文，Fin、Ack、Seq，表示已经没有数据传输了。并进入 FIN_WAIT_1 状态
  【第一次挥手：由浏览器发起的，发送给服务器，我请求报文发送完了，你准备一下关闭吧】

• 被动方发送报文，Ack、Seq，表示同意关闭请求。此时主机发起方进入 FIN_WAIT_2 状态
  【第二次挥手：由服务器发起的，告诉浏览器，我请求报文要接受完了，我准备关闭了，你也准备一下吧】

• 被动方向发起方发送报文段，Fin、Ack、Seq，请求关闭连接。并进入 LAST_ACK 状态
  【第三次挥手：由服务器发起，告诉浏览器，我响应报文发送完了，你准备关闭吧】

• 发起方向被动方发送报文段，Ack、Seq。然后进入等待 TIME_WAIT 状态。被动方收到发起方的报文段以后关闭连接。发起方等待一定时间未收到回复，则正常关闭
  【第四次挥手：由浏览器发起，告诉服务器，我响应报文接受完了，我准备关闭了，你也准备吧】

2.四次挥手的原因

• 当客户端确认发送完数据且知道服务器已经接收完了，想要关闭发送数据口（当然确认信号还是可以发），就会发FIN给服务器。
• 服务器收到客户端发送的FIN，表示收到了，就会发送ACK回复。
• 但这时候服务器可能还在发送数据，没有想要关闭数据口的意思，所以服务器的FIN与ACK不是同时发送的，而是等到服务器数据发送完了，才会发送FIN给客户端。
• 客户端收到服务器发来的FIN，知道服务器的数据也发送完了，回复ACK， 客户端等待2MSL以后，没有收到服务器传来的任何消息，知道服务器已经收到自己的ACK了，客户端就关闭链接，服务器也关闭链接了。

3.为什么是2MSL呢？

• 保证最后一次握手报文能到客户端，能进行超时重传
• 2MSL后，这次连接的所有报文都会消失，不会影响下一次连接