前言

此题无论是在笔试题中还是面试题中，考察的频率都及其高，今天就图文并茂地梳理一下这个流程。
这里我们以天猫(淘宝)为例。

客户端的视角

用户输入URL

浏览器一般会根据历史记录自动补全url，有的浏览器直接从浏览器缓存中把页面展示出来。

浏览器自动补全url

chrome缓存

浏览器解析url

我们都知道，url其实是一种方便人类记忆的标识符，实际上计算机都是通过IP地址进行通信的。这个url转IP的过程就叫解析域名。
步骤一般分为下面几步：

1.利用本地host文件进行解析
2.向本地DNS服务器请求解析
3.本地DNS服务器向根DNS服务器、域服务器等请求解析(有递归和迭代两种方式)
4.本地DNS服务器在请求完成后需要缓存url和ip的映射关系

DNS解析图

淘宝网的DNS解析过程

浏览器发起连接

浏览器会先和服务器建立TCP连接（80端口），再构造http报文发送http请求，如果是https(443)还需要提供证书来加密。

http报文

由请求方法、请求头、请求正文等构成

天猫的GET请求报文

请求方法：
GET 从服务器向客户端发送命名资源
PUT 将客户端录入的数据存储到一个命名的服务器资源中去
DELET 从服务器删除命名资源
POST 将客户端数据发送到一个服务器网关应用程序
HEAD 仅发送命名资源响应中的HTTP首部
其他方法：比如TRACE、OPTION、LOCK、UNLOCK等，可查阅维基百科

请求头：包括客户端的一些环境信息
Accept：浏览器可接受的MIME类型。
Accept-Encoding：浏览器能够进行解码的数据编码方式。
Accept-Language：浏览器所希望的语言种类，当服务器能够提供一种以上的语言版本时要用到。
Connection：表示是否需要持久连接。
Content-Length：表示请求消息正文的长度。
Cookie：浏览器端存储的信息
Host：初始URL中的主机和端口。
If-Modified-Since：只有当所请求的内容在指定的日期之后又经过修改才返回它，否则返回304“Not Modified”应答。
Referer：包含一个URL，用户从该URL代表的页面出发访问当前请求的页面。
User-Agent：浏览器类型，如果Servlet返回的内容与浏览器类型有关则该值非常有用。
...

请求正文：一般是post或者put方法附带的请求信息

访问天猫产生的其中一个post请求

注意：在这个过程中可能会有重定向，浏览器会跟踪重定向地址，再次发送一个HTTP请求

访问天猫的http站点会301重定向到https站点

等待服务器返回报文

这个过程用户也只能跟着等待，但是一般来说不会太久，前提是网络情况好的情况下。

浏览器渲染页面

浏览器根据返回的报文解析DOM树和CSSOM树、然后解析成Render树,开始渲染HTML页面(布局，绘制，展现)，并请求相关资源（主流浏览器并发HTTP数量一般是4个或6个）。

网络的视角

客户端和服务端经历了tcp三次握手(SSL/TLS握手)

• tcp三次握手

第一次握手：客户端A将标志位SYN置为1,随机产生一个值为seq=J（J的取值范围为=1234567）的数据包到服务器，客户端A进入SYN_SENT状态，等待服务端B确认；
第二次握手：服务端B收到数据包后由标志位SYN=1知道客户端A请求建立连接，服务端B将标志位SYN和ACK都置为1，ack=J+1，随机产生一个值seq=K，并将该数据包发送给客户端A以确认连接请求，服务端B进入SYN_RCVD状态。
第三次握手：客户端A收到确认后，检查ack是否为J+1，ACK是否为1，如果正确则将标志位ACK置为1，ack=K+1，并将该数据包发送给服务端B，服务端B检查ack是否为K+1，ACK是否为1，如果正确则连接建立成功，客户端A和服务端B进入ESTABLISHED状态，完成三次握手。

TCP三次握手过程

• SSL/TLS握手

第一次握手：客户端先向服务器发出加密通信的请求，并且提供自己的一些信息(加密方法等)，这被叫做ClientHello请求。
第二次握手：服务器收到客户端请求后，向客户端发出回应，并且提供服务器证书、确认的加密方法等，这叫做SeverHello。
第三次握手：客户端收到服务器回应以后，首先验证服务器证书，如果没问题的话会向服务器发送用于加密的随机数、编码改变通知、客户端握手结束通知。
第四次握手：服务器收到客户端的随机数之后，计算生成本次会话所用的"会话密钥"，然后向客户端发送编码改变通知和服务器握手结束通知。

SSL/TLS四次握手过程

充当中间人

因为报文会经过路由设备、代理/网关、防火墙等，在网络里的这些设备都会做相应的处理，其中最常用的技术是CDN：想尽一切办法使用户可就近取得所需内容，尽可能地降低因为Internet网拥挤造成的慢，提高用户访问网站的响应速度。

TCP四次挥手

第一次挥手：客户端发送一个FIN，客户端进入FIN_WAIT_1状态。
第二次挥手：服务端收到FIN后，发送一个ACK给客户端，确认序号为收到seq+1（与SYN相同，一个FIN占用一个序号），服务端进入CLOSE_WAIT状态。
第三次挥手：服务端发送一个FIN，服务端进入LAST_ACK状态。
第四次挥手：客户端收到FIN后，客户端进入TIME_WAIT状态，接着发送一个ACK给服务端，确认序号为收到seq+1，服务端进入CLOSED状态，完成四次挥手。

TCP四次挥手

服务端的视角

负载均衡

请求报文不是直接到服务器的，可能是经过反向代理负载均衡处理过才到达的。
负载均衡有DNS负载均衡、IP负载均衡等多种方式，常用的负载均衡算法有，轮询，随机，最少链接，源地址散列，加权等方式。

处理请求

如果服务端设置了反向代理的话，请求会先经过它，反向代理类似于"中间人"，既可以是客户端，也可以是服务端，它最大的作用就是帮助服务端更有效率地处理报文，比如负载均衡、缓存静态内容等。

返回响应报文

有时候因为一些特殊的原因，比如http转https、网站结构调整等，会用301永久重定向或者302临时重定向响应客户端。

天猫官网的返回报文

响应报文由状态行、响应头、响应正文组成，比较重要的是状态行，响应头和响应正文可以类比请求头和请求正文，在此我不再赘述，有兴趣研究的朋友可以自行去查阅其他资料。

状态码

100~199 信息性状态码
• 100 Continue
• 101 Switching Protocols
200~299 成功状态码
• 200 OK
• 201 Created
• 202 Accepted
• 203 Non-Authoritative Information
• 204 No Content
• 205 Reset Content
300~399 重定向状态码
• 300 Multiple Choices：客户端请求一个实际指向多个资源的URL时会返回这个状态码。
• 301 Move Permanently：所请求的资源已经被移走(永久性重定向)。
• 302 Found：临时性重定向。
• 303 See Other：该状态码表示请求对应的资源存在另一个URL，应使用GET方法获取资源。
• 304 Not Modified：该状态码表示客户端发送附带条件的请求(包含If-Match、If-Modified、no-store、no-cache、Expires、catch-control等首部)时，服务器端允许请求访问资源，但因发生请求为满足条件的情况后，直接返回304 Not Modified(服务器端资源未改变，可直接使用客户端未过期的缓存)。304状态码返回时，不包含任何响应的主体部分。304虽然放在3XX类别中，但是和重定向没有一点关系。
• 307 Temporary Redirect：临时重定向。不会从POST变成GET。每种浏览器有可能出现不同的情况。
400~499 客户端错误状态码
• 400 Bad Request：请求报文中存在语法错误
• 401 Unauthorized：用户需进行认证。
• 403 Forbidden：表明对所请求资源的访问被服务器拒绝了。
• 404 Not Found：服务器上无法找到所请求的资源，也有可能是服务器拒绝请求且不想说明理由时使用
500~599 服务器错误
• 500 Internal Sever Error：服务器遇到一个妨碍它为请求提供服务的错误时，使用此状态码
• 502 Bad Gateway：网关错误
• 503 Service Unavailable：用来说明服务器现在无法为请求提供服务，但是将来可以。如果服务器知道服务什么时候可用，可以在响应中包含一个Retry-After首部。
• 504 Gateway Timeout

总结

一图抵千言

URl输入到页面展示经过的所有过程

参考资料

• • 维基百科
• 《HTTP权威指南》
• 《图解HTTP》
• 《计算机网络原理 第四版》