从输入url到页面加载完成发生了什么？

从输入url到页面加载完成发生了什么？

这是一道经典的面试题，这道面试题不光前端面试会问到，后端面试也会被问到。这道题没有一个标准的答案，它涉及很多的知识点，面试官会通过这道题了解你对哪一方面的知识比较擅长，然后继续追问看看你的掌握程度。

从前端的角度出发，我觉得首先回答必须包括以下几个基本的点：

1、浏览器的地址栏输入URL并按下回车。
2、浏览器查找当前URL是否存在缓存，并比较缓存是否过期。
3、DNS解析URL对应的IP。
4、根据IP建立TCP连接（三次握手）。
5、HTTP发起请求。
6、服务器处理请求，浏览器接收HTTP响应。
7、渲染页面，构建DOM树。
8、关闭TCP连接（四次挥手）。

一、URL

我们常见的URL是这样的:http://www.baidu.com，这个域名由三部分组成：协议名、域名、端口号，这里端口是默认所以隐藏。除此之外URL还会包含一些路径、查询或其他片段，例如：http://www.tuicool.com/search?kw=%E4%。我们最常见的的协议是HTTP协议，除此之外还有加密的HTTPS协议、FTP协议等等。URL的中间部分为域名或者是IP，之后是端口号。通常端口号不常见是因为大部分都是使用默认端口，如HTTP默认端口80，HTTPS默认端口443。

二、缓存

HTTP缓存有多种规则，根据是否需要向服务器重新发起请求来分类，将其分为强制缓存，对比缓存。

强制缓存：判断HTTP首部字段：Expires 和 cache-control。

Expires是一个绝对时间，即服务器时间。浏览器检查当前时间，如果还没到失效时间就直接使用缓存文件。但是该方法存在一个问题：服务器时间与客户端时间可能不一致

cache-control中的max-age保存了一个相对时间。例如Cache-Control: max-age = 484200，表示浏览器收到文件后，缓存在484200s内有效。 如果同时存在cache-control和Expires，浏览器总是优先使用cache-control。

对比缓存：通过HTTP的 last-modified（最新-改进），Etag字段进行判断。

last-modified 表示请求的URL（资源）最后一次更新的时间。下一次浏览器请求资源时就发送if-modified-since字段。服务器用本地Last-modified时间与if-modified-since时间比较，如果不一致则认为缓存已过期并返回新资源给浏览器；如果时间一致则发送304状态码，让浏览器继续使用缓存。

Etag：资源的实体标识（哈希字符串），当资源内容更新时，Etag会改变。服务器会判断Etag是否发生变化，如果变化则返回新资源，否则返回304。

三、DNS域名解析

DNS域名解析（域名解析），DNS实际上是一个域名和IP对应的数据库。

IP地址往都难以记住，但机器间互相只认IP地址，于是人们发明了域名，让域名与IP地址之间一一对应，它们之间的转换工作称为域名解析，域名解析需要由专门的域名解析服务器来完成，整个过程是自动进行的。

首先浏览器先检查本地hosts文件是否有这个网址映射关系，如果有就调用这个IP地址映射，完成域名解析。
如果没找到则会查找本地DNS解析器缓存，如果找到则返回。
如果还是没有找到则会查找本地DNS服务器，如果找到则返回。

最后迭代查询，按根域服务器库（.com,.cn,.vip,.top…）->顶级域（.com），然后根据顶级域（.com）->第二层域子域（baidu.com），最后根据baidu.com的域名找到相应的IP，返回给浏览器。

四、TCP连接

在通过上一步的DNS域名解析后，获取到了服务器的IP地址后，便会开始建立一次连接，这是由TCP协议完成的，主要通过三次握手进行连接。

第一次握手： 建立连接时，客户端发送syn包（syn=j）到服务器，并进入等待服务器确认的状态；

第二次握手： 服务器收到syn包，必须确认客户端的syn（ack=j+1），同时自己根据syn生成一个ACK包，此时服务器进入等待状态；

第三次握手： 客户端收到服务器的ACK包，向服务器发送确认，此包发送完毕，客户端和服务器进入ESTABLISHED（TCP连接成功）状态，完成三次握手。

五、浏览器向服务器发送HTTP请求

完整的HTTP请求包含请求起始行、请求主体和请求头部三部分。

六、浏览器接收响应

服务器在收到浏览器发送的HTTP请求之后，会将收到的HTTP报文封装成HTTP的Request对象，并通过不同的Web服务器进行处理，处理完的结果以HTTP的Response对象返回，主要包括状态码，响应头，响应报文三个部分。

状态码：

1：信息性状态码

100 （继续） 请求者应当继续提出请求。
101 （切换协议） 请求者已要求服务器切换协议，服务器已确认并准备切换。

2：成功状态码

200：OK 请求正常处理
204：No Content 请求处理成功，但没有资源可返回
206：Partial Content 对资源的某一部分的请求

3：重定向状态码

301：Moved Permanently 永久重定向
302：Found 临时重定向

4：客户端错误状态码

400：Bad Request 请求报文中存在语法错误
403：Forbidden 访问被拒绝
404：Not Found 无法找到请求资源

5：服务器错误状态码

500：Internal Server Error 服务器端在执行时发生错误
503：Service Unavailable 服务器处于超负载或者正在进行停机维护

响应报文：

七、页面渲染

浏览器按顺序解析html文件，构建DOM树，在解析到外部的css和js文件时，向服务器发起请求下载资源，若是下载css文件，则解析器会在下载的同时继续解析后面的html来构建DOM树；若在下载js文件，解析器会停止对html的解析，这就出现了js阻塞问题。

预加载器

当浏览器被脚本文件阻塞时，预加载器（一个轻量级的解析器）会继续解析后面的html，寻找需要下载的资源。如果发现有需要下载的资源，预加载器在开始接收这些资源。预加载器只能检索HTML标签中的URL，无法检测到使用脚本添加的URL，这些资源要等脚本代码执行时才会获取。

八、关闭TCP连接或继续保持连接

通过四次挥手关闭连接

第一次握手是浏览器发完数据，然后发送FIN请求断开连接。
第二次握手是服务器向客户端发送ACK，表示同意。
第三次握手是服务器可能还有数据向浏览器发送，所以向浏览器发送ACK同时也发送FIN请求，是第三次握手。
第四次握手是浏览器接受返回的ACK，表示数据传输完成。