浏览器的缓存原理 (强缓存以及协商缓存)以及相关知识点

浏览器的缓存原理

⽂档讲解: 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，并且不会返回资源内容，并且不会返回Last-Modify。 由于对⽐的是服务端的修改时间，所以就算客户端与服务端时间差距,