浏览器的缓存原理
⽂档讲解: blog.csdn.net/GreekMrzzJ/…www.cnblogs.com/wonyun/p/55… 视频讲解: www.bilibili.com/video/BV14G… 9cad864e8965fc9cf1d4 www.bilibili.com/video/BV1iD… 9cad864e8965fc9cf1d4 www.bilibili.com/video/BV1sx… 9cad864e8965fc9cf1d4 www.bilibili.com/video/BV1EY… 9cad864e8965fc9cf1d4 www.bilibili.com/video/BV1gR…
基本认知 Web 服务缓存 ⼤致可以分为:数据库缓存、服务器端缓存(代理服务器缓存、CDN 服务器缓存)、浏览器缓存。 浏览器缓存 也包含很多内容: HTTP 缓存、indexDB、cookie、localstorage 等等。 这⾥我们只讨论 HTTP 缓存相 关内容 。 HTTP缓存: (优化⻚⾯加载的效率, 如果没有缓存策略, 每次重新加载⻚⾯, 会⾮常慢!)
.浏览器缓存, HTTP缓存分类 浏览器缓存分为 强缓存 和 协商缓存 ,浏览器加载⼀个⻚⾯的简单流程如下: 1. 浏览器先根据这个资源的 http头信息 来 判断是否命中强缓存。 如果命中则直接加载在缓存中的资源,并不会将请求发送到服务器。(强缓存) 2. 如果未命中强缓存,则浏览器会将资源加载请求发送到服务器。 服务器来判断浏览器本地缓存是否失效。 若可以使⽤,则服务器并不会返回资源信息,浏览器继续从缓存加载资源。(协商缓存) 3. 如果未命中协商缓存,则服务器会将完整的资源返回给浏览器,浏览器加载新资源,并更新缓存。(新的请 求)
.强缓存是利⽤http的返回的响应头中的Expires或者Cache-Control (优先级更⾼) 两个字段来控制的,⽤来表示资源 的缓存时间。 Expires: 指定⼀个具体时间(2020年12⽉12⽇ 17:00), 到了这个时间了, 缓存过期了, 在时间内, 都是有效的, 可以直 接读 Cache-Control : 指定⼀个过期时间 (3600s), 这个资源你加载到后, 可以⽤ 3600s
. 协商缓存 (强缓存未命中-发送请求进⾏协商)
若未命中强缓存(强缓存过期了),则浏览器会将请求发送⾄服务器。 服务器根据http头信息中的 Last-Modify/If-Modify-Since 或 Etag/If-None-Match 来判断是否命中协商缓 存。 如果命中,则http返回码为304 (你本地之前加载的资源是有效的),浏览器从缓存中加载资源。
Last-Modify/If-Modify-Since 浏览器第⼀次请求⼀个资源的时候, 服务器返回的header中会加上Last-Modify, Last-modify是⼀个时间标识该资源的最后修改时间,例如 Last-Modify: Thu,31 Dec 2037 23:59:59 GMT 。 当浏览器再次请求该资源时(进⾏协商请求时),发送的请求头中会包含If-Modify-Since,该值为缓存之前返回的 Last-Modify。 服务器收到If-Modify-Since后,根据实际服务器的资源的最后修改时间, 进⾏判断是否命中缓存。 如果命中缓存,则返回 http304,并且不会返回资源内容