Cosen95 / fe_interview

字节、阿里、美团、滴滴、腾讯等大厂高级前端面试题整理
238 stars 25 forks source link

为什么很多站点第二次打开速度会很快? #91

Open Cosen95 opened 4 years ago

Cosen95 commented 4 years ago

参考极客时间浏览器工作原理与实践课程

我们先来看下完整的 HTTP 请求过程。

浏览器端发起 HTTP 请求流程

如果你在浏览器地址栏里键入网址:https://juejin.im/user/5a767928f265da4e78327344/posts, 那么接下来,浏览器会完成哪些动作呢?下面我们就一步一步详细“追踪”下。

构建请求

首先,浏览器构建请求行信息,构建好后,浏览器准备发起网络请求。

查找缓存

在真正发起网络请求之前,浏览器会先在浏览器缓存中查询是否有要请求的文件。其中,浏览器缓存是一种在本地保存资源副本,以供下次请求时直接使用的技术。

当浏览器发现请求的资源已经在浏览器缓存中存有副本,它会拦截请求,返回该资源的副本,并直接结束请求,而不会再去源服务器重新下载。这样做的好处有:

当然,如果缓存查找失败,就会进入网络请求过程了。

准备 IP地址和端口

通过下图,我们来看下TCPHTTP 的关系

第一步浏览器会请求 DNS(域名系统) 返回域名对应的 IP。当然浏览器还提供了DNS 数据缓存服务,如果某个域名已经解析过了,那么浏览器会缓存解析的结果,以供下次查询时直接使用,这样也会减少一次网络请求。

拿到 IP 之后,接下来就需要获取端口号了。通常情况下,如果 URL 没有特别指明端口号,那么 HTTP 协议默认是 80 端口。

等待 TCP 队列

现在已经把端口和 IP 地址都准备好了,那么下一步是不是可以建立 TCP 连接了呢?

答案依然是“不行”。Chrome 有个机制,同一个域名同时最多只能建立 6 个 TCP 连接,如果在同一个域名下同时有 10 个请求发生,那么其中 4 个请求会进入排队等待状态,直至进行中的请求完成。

当然,如果当前请求数量少于 6,会直接进入下一步,建立 TCP 连接。

建立 TCP 连接

排队等待结束之后,终于可以快乐地和服务器握手了,在 HTTP 工作开始之前,浏览器通过 TCP 与服务器建立连接。

发送 HTTP 请求

一旦建立了 TCP 连接,浏览器就可以和服务器进行通信了。而HTTP 中的数据正是在这个通信过程中传输的。

你可以结合下图来理解,浏览器是如何发送请求信息给服务器的。

服务器端处理 HTTP 请求流程

返回请求

一旦服务器处理结束,便可以返回数据给浏览器了。

服务器响应的数据格式如下图所示:

断开连接

通常情况下,一旦服务器向客户端返回了请求数据,它就要关闭 TCP 连接。

重定向

说到这,想必你已经了解了 HTTP 的请求流程。现在看下问题:为什么很多站点第二次打开速度会很快?

如果第二次页面打开很快,主要原因是第一次加载页面过程中,缓存了一些耗时的数据。

那么,哪些数据会被缓存呢?从上面介绍的核心请求路径可以发现,DNS 缓存页面资源缓存这两块数据是会被浏览器缓存的。其中,DNS 缓存比较简单,它主要就是在浏览器本地把对应的 IP域名关联起来,这里就不做过多分析了。

我们重点看下浏览器资源缓存,下面是缓存处理的过程:

关于浏览器资源缓存的详细介绍,你可以参考我写的这篇文章深入理解浏览器的缓存机制

简要来说,很多网站第二次访问能够秒开,是因为这些网站把很多资源都缓存在了本地,浏览器缓存直接使用本地副本来回应请求,而不会产生真实的网络请求,从而节省了时间。同时,DNS 数据也被浏览器缓存了,这又省去了 DNS 查询环节。