从输入URL到浏览器显示页面到底经历了什么？

从输入URL到浏览器显示页面到底经历了什么？

很多公司面试都喜欢问这个问题：从输入URL到看见页面发生了什么？今天就来做个总结。
简单来说，共有以下几个过程：

• DNS解析
• 建立TCP连接，进行三次握手
• 发送HTTP请求
• 服务器处理请求并返回HTTP报文
• 浏览器解析并渲染页面
• 释放TCP连接，进行四次挥手

DNS解析

我们知道用户想与因特网上某个主机通信时，必须要知道对方的IP地址。而DNS解析就是将域名解析为IP地址的过程。

1、DNS解析过程

（1）主机www.google.com先向其本地域名服务器10.1.1.1进行递归查询。
（2）本地域名服务器采用迭代查询。直到查到所查询主机的IP地址。
（3）本地域名服务器最后把结果告诉主机www.google.com。

2、DNS优化

很多时候我们不断的访问一个域名，并不需要每次都经过如此繁琐的查询，而是通过高速缓存提高查询效率。
高速缓存用来存放最近查询过的域名以及从何处获得域名映射信息的记录。
（1）主机向本地域名服务器查询IP地址，若本地域名服务器缓存中有该主机对映的IP地址，便直接返回。
（2）若本地域名服务器没有缓存该主机对映的IP地址，而缓存了顶级域名服务器的IP地址，则可以直接向顶级域名服务器查询。
（3）为保证高速缓存中的内容正确，域名服务器应为每项内容设置计时器并处理超过合理时间的项。

建立TCP连接

1、什么是TCP？

TCP是一种面向连接的协议，并提供一种可靠的传输。TCP连接有三个阶段，即：连接建立、数据传输和连接释放。
在TCP连接建立过程中要解决以下三个问题：
（1）要使每一方能够确知对方的存在。
（2）要允许双方协商一些参数（如最大窗口值等）
（3）能够对运输实体资源（如缓存大小等）进行分配。
TCP连接的建立采用客户服务器方式。主动发起连接建立的应用进程叫做客户，而被动等待连接建立的应用进程叫做服务器。

2、TCP的连接建立——三次握手

SYN：同步位，ACK：确认位

客户端 服务器端 CLOSED CLOSED LISTEN SYN=1,seq=x SYN-SENT SYN=1,ACK=1,seq=y,ack=x+1 SYN-RCVD ACK=1,seq=x+1,ack=y+1 ESTABLISHED ESTABLISHED 客户端 服务器端

（1）服务器进程先创建传输控制块TCB，准备接受客户进程的连接请求，然后处于LISTEN（收听）状态，等待客户的连接请求。
（2）客户进程也是首先创建传输控制模块TCB，然后将带有SYN=1标志的请求报文发送给服务器端，等待服务器端的确认。这时，TCP客户进程进入SYN-SENT（同步已发送）状态。（第一次握手）
（3）服务器收到连接请求报文段后，如同意连接，则将带有SYN=1，ACK=1标志的报文发送给客户端。这时，服务器进程进入SYN-RCVD（同步收到）状态。（第二次握手）
（4）客户端收到服务端的确认后，还要向服务端给出确认。将带有ACK=1标志的报文发送给服务端。这时，客户端进入ESTABLISHED（已建立连接）状态。（第三次握手）
（5）在服务端收到客户端的确认后，也进入ESTABLISHED状态。
完成了三次握手以后，客户端和服务器端就正式建立了连接，并可以开始传输数据了。

3、为什么是三次握手？

为什么客户端还要进行第三次握手呢？主要是为了防止已失效的连接请求报文段突然又传送到了服务器端，因而产生错误，导致客户端并没有发起新的请求连接，而服务器端一直保持着连接状态，则会白白浪费掉服务器端的资源。

发送HTTP请求

发送HTTP请求的过程就是构建HTTP请求报文并通过TCP协议发送到服务器指定端口。
HTTP请求报文由请求行，请求报头，请求正文组成。

1、请求行

请求行有三个内容：请求方法，请求资源的URL，以及HTTP的版本
请求方法包括：OPTION, GET, HEAD, POST, PUT, DELETE, TRACE, CONNECT等
常见请求方法GET和POST的区别：

• GET在浏览器回退时是无害的，而POST会再次提交请求。
• GET产生的URL地址可以被Bookmark，而POST不可以。
• GET请求会被浏览器主动cache，而POST不会，除非手动设置。
• GET请求只能进行url编码，而POST支持多种编码方式。
• GET请求参数会被完整保留在浏览器历史记录里，而POST中的参数不会被保留。
• GET请求在URL中传送的参数是有长度限制的，而POST没有。
• 对参数的数据类型，GET只接受ASCII字符，而POST没有限制。
• GET比POST更不安全，因为参数直接暴露在URL上，所以不能用来传递敏感信息。
• GET参数通过URL传递，POST放在Request body中。（其实你也可以在GET里面藏body，POST里面带参数）
• GET会产生一个TCP数据包，而POST会产生两个TCP数据包。

2、HTTP缓存优化

HTTP缓存包括强制缓存和协商缓存。

强制缓存：当缓存数据库中有客户端需要的数据，客户端直接将数据从其中拿出来使用（如果数据未失效），当缓存服务器没有需要的数据时，客户端才会向服务端请求。

协商缓存：客户端会先从缓存数据库拿到一个缓存的标识，然后向服务端验证标识是否失效，如果没有失效服务端会返回304，这样客户端可以直接去缓存数据库拿出数据，如果失效，服务端会返回新的数据

缓存的优点：
（1）减少了冗余的数据传递，节省宽带流量
（2）减少了服务器的负担，大大提高了网站性能
（3）加快了客户端加载网页的速度 这也正是HTTP缓存属于客户端缓存的原因。

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

每一个请求报文发出后，都能收到一个相应报文。响应报文的第一行就是状态行。

状态行包括三个部分：HTTP的版本，状态码，以及解释状态码的简单短语。

1、状态码

状态码都是三位数字的，分为5大类共33种：
1** 表示通知信息的。
2** 表示成功。
3** 表示重定向。例如 301:永久重定向，302：临时重定向，304：未修改
4** 表示客户的差错。例如 400：错误请求，401：未授权，403：服务器拒绝请求，404：未找到
5** 表示服务器端的错误。

浏览器解析并渲染页面

• 解析HTML形成DOM树
• 解析CSS形成CSSOM 树
• 合并DOM树和CSSOM树形成渲染树
• 浏览器开始渲染并绘制页面

1、重绘与回流

这个过程涉及两个比较重要的概念回流和重绘。
回流：DOM结点都是以盒模型形式存在，需要浏览器去计算位置和宽度等，这个过程就是回流。
重绘：等到页面的宽高，大小，颜色等属性确定下来后，浏览器开始绘制内容，这个过程叫做重绘。
浏览器刚打开页面一定要经过这两个过程的，但是这个过程非常非常非常消耗性能，所以我们应该尽量减少页面的回流和重绘

释放TCP连接

1、TCP的连接释放——四次挥手

FIN：终止控制位，ACK：确认位

客户端 服务器端 ESTABLISHED ESTABLISHED FIN=1,seq=u FIN-WAIT-1 ACK=1,seq=v,ack=u+1 FIN-WAIT-2 CLOSE-WAIT FIN=1,ACK=1,seq=w,ack=u+1 LAST-ACK ACK=1,seq=u+1,ack=w+1 TIME-WAIT CLOSED CLOSED 客户端 服务器端

（1）客户端向其TCP发出带有FIN=1的连接释放报文段，并停止再发送数据，主动关闭TCP连接。这时客户端进入FIN-WAIT-1（终止等待1）状态，等待服务器的确认。
（2）服务器端收到连接释放报文后即发出带有ACK=1的确认报文。然后服务端就进入CLOSE-WAIT（关闭等待）状态。
这时TCP服务器进程应通知高层应用进程，因为客户端到服务器端的连接就释放了。这时TCP连接处于半关闭状态，即客户端已经没有数据要发送了，但服务器端若发送数据，客户端仍要接收。
（3）若服务器端已经没有要向客户端发送的数据，就发出带有FIN=1，ACK=1的报文。这时服务端就处于LAST-ACK（最后确认状态），等待客户端的确认。
（4）在客户端收到服务器的连接释放报文后，必须对此发出确认，即带有ACK=1的报文。然后进入到TIME-WAIT（时间等待）状态。
此时TCP连接还没有释放掉，而是要等待2MSL后，客户端才进入到CLOSED状态。

2、为什么最后客户端要等待2MSL后才进入CLOSED状态？

（1）为了保证客户端发送的最后一个ACK报文能够到达服务器端，使双方都能正常关闭连接。若服务器端没有收到最后一个且人报文，则会超时重传一次带有FIN+ACK的报文，接着客户端就重新确认，并重新计时2MSL。
（2）防止有已失效的连接请求报文段出现在本连接中。

参考资料

史上最详细的经典面试题 从输入URL到看到页面发生了什么？- 虚竹子
[计算机网络（第6版）- 谢希仁 编著]