Open Cosen95 opened 4 years ago
参考极客时间的浏览器工作原理与实践课程
极客时间
浏览器工作原理与实践
我们先来看下完整的 HTTP 请求过程。
HTTP
如果你在浏览器地址栏里键入网址:https://juejin.im/user/5a767928f265da4e78327344/posts, 那么接下来,浏览器会完成哪些动作呢?下面我们就一步一步详细“追踪”下。
https://juejin.im/user/5a767928f265da4e78327344/posts
首先,浏览器构建请求行信息,构建好后,浏览器准备发起网络请求。
在真正发起网络请求之前,浏览器会先在浏览器缓存中查询是否有要请求的文件。其中,浏览器缓存是一种在本地保存资源副本,以供下次请求时直接使用的技术。
当浏览器发现请求的资源已经在浏览器缓存中存有副本,它会拦截请求,返回该资源的副本,并直接结束请求,而不会再去源服务器重新下载。这样做的好处有:
当然,如果缓存查找失败,就会进入网络请求过程了。
IP
通过下图,我们来看下TCP和 HTTP 的关系
TCP
第一步浏览器会请求 DNS(域名系统) 返回域名对应的 IP。当然浏览器还提供了DNS 数据缓存服务,如果某个域名已经解析过了,那么浏览器会缓存解析的结果,以供下次查询时直接使用,这样也会减少一次网络请求。
DNS
DNS 数据缓存服务
拿到 IP 之后,接下来就需要获取端口号了。通常情况下,如果 URL 没有特别指明端口号,那么 HTTP 协议默认是 80 端口。
URL
现在已经把端口和 IP 地址都准备好了,那么下一步是不是可以建立 TCP 连接了呢?
答案依然是“不行”。Chrome 有个机制,同一个域名同时最多只能建立 6 个 TCP 连接,如果在同一个域名下同时有 10 个请求发生,那么其中 4 个请求会进入排队等待状态,直至进行中的请求完成。
Chrome
当然,如果当前请求数量少于 6,会直接进入下一步,建立 TCP 连接。
排队等待结束之后,终于可以快乐地和服务器握手了,在 HTTP 工作开始之前,浏览器通过 TCP 与服务器建立连接。
一旦建立了 TCP 连接,浏览器就可以和服务器进行通信了。而HTTP 中的数据正是在这个通信过程中传输的。
你可以结合下图来理解,浏览器是如何发送请求信息给服务器的。
一旦服务器处理结束,便可以返回数据给浏览器了。
服务器响应的数据格式如下图所示:
通常情况下,一旦服务器向客户端返回了请求数据,它就要关闭 TCP 连接。
说到这,想必你已经了解了 HTTP 的请求流程。现在看下问题:为什么很多站点第二次打开速度会很快?
为什么很多站点第二次打开速度会很快?
如果第二次页面打开很快,主要原因是第一次加载页面过程中,缓存了一些耗时的数据。
那么,哪些数据会被缓存呢?从上面介绍的核心请求路径可以发现,DNS 缓存和页面资源缓存这两块数据是会被浏览器缓存的。其中,DNS 缓存比较简单,它主要就是在浏览器本地把对应的 IP 和域名关联起来,这里就不做过多分析了。
DNS 缓存
页面资源缓存
域名
我们重点看下浏览器资源缓存,下面是缓存处理的过程:
关于浏览器资源缓存的详细介绍,你可以参考我写的这篇文章深入理解浏览器的缓存机制
浏览器资源缓存
简要来说,很多网站第二次访问能够秒开,是因为这些网站把很多资源都缓存在了本地,浏览器缓存直接使用本地副本来回应请求,而不会产生真实的网络请求,从而节省了时间。同时,DNS 数据也被浏览器缓存了,这又省去了 DNS 查询环节。
我们先来看下完整的
HTTP
请求过程。浏览器端发起
HTTP
请求流程如果你在浏览器地址栏里键入网址:
https://juejin.im/user/5a767928f265da4e78327344/posts
, 那么接下来,浏览器会完成哪些动作呢?下面我们就一步一步详细“追踪”下。构建请求
首先,浏览器构建请求行信息,构建好后,浏览器准备发起网络请求。
查找缓存
在真正发起网络请求之前,浏览器会先在浏览器缓存中查询是否有要请求的文件。其中,浏览器缓存是一种在本地保存资源副本,以供下次请求时直接使用的技术。
当浏览器发现请求的资源已经在浏览器缓存中存有副本,它会拦截请求,返回该资源的副本,并直接结束请求,而不会再去源服务器重新下载。这样做的好处有:
当然,如果缓存查找失败,就会进入网络请求过程了。
准备
IP
地址和端口通过下图,我们来看下
TCP
和HTTP
的关系第一步浏览器会请求
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
查询环节。