今天来聊聊浏览器的缓存

这是我参与更文挑战的第28天，活动详情查看： 更文挑战

前言

今天来聊聊浏览器的缓存。

为什么要缓存

在当今人人都会上网冲浪的时代，如果你的网站不够快，很容易就会被别的网站取代。

那怎么样才能快呢？

那就是浏览器的缓存技术。你第一次访问后，浏览器把你访问的图片，js文件，css文件都缓存到本地，你下次访问直接从浏览器本地读取，比重新向服务器请求快的多。

缓存的分类

缓存主要分2种，强缓存和 协商缓存。

浏览器读取缓存流程：

• 第一次访问服务器，请求资源，缓存资源到本地
• 后面再次请求服务器，先确认本地缓存的资源的header是否命中强缓存
• 如果命中，直接从缓存中读取；如果没有，向服务器发起请求，看看服务器返回的header和本地缓存的header相关字段对比, 看是否命中协商缓存
• 如果命中，直接从缓存中读取；如果没有，则向服务器请求最新的资源
• 循环上面的步骤

强缓存

强缓存主要是看缓存资源的请求头header里有2个字段，cache-control和expires。

cache-control

控制缓存，主要有以下值：

• public: 用户浏览器和代理服务器等都可以缓存
• private: 只能被用户浏览器缓存
• no-store: 不缓存，每次均请求服务器最新资源
• no-cache: 通过协商缓存来判断
• max-age: 缓存的最大有效时间，相对时间，秒为单位

cache-control:  no-store // 不缓存，每次均请求服务器最新资源
cache-control:  max-age=3600 // 缓存资源有效1小时
复制代码

expires

资源的过期时间, 是GMT格式，绝对时间，如果当前时间小于expires对应的时间，则直接读取缓存。

Expires: Tue, 29 Jun 2021 14:56:17 GMT
复制代码

优先级： cache-control > expires

协商缓存

主要有2对

Etag 和 If-None-Match

• Etag：服务器返回资源的唯一编码，如果资源改变，则编码会变化
• If-None-Match： 本地缓存资源时服务器返回的唯一编码，向服务器再次请求资源时，request的header会带上

向服务器再次请求资源时，request的header会带上If-None-Match， 然后根据服务器上该资源的的Etag，对比判断是否相等，相等则代表命中协商缓存。

Etag: W/"60cb1043-f43e"  // 服务器返回
If-None-Match: W/"60cb1043-f43e" // 再次请求时`request`的`header`会带上
复制代码

Last-Modified 和 If-Modified-Since

• Last-Modified：服务器返回资源上次修改的时间， GMT格式，如果资源变化，则时间会变。
• If-Modified-Since： 本地缓存资源时服务器返回的修改时间， GMT格式，向服务器再次请求资源时，request的header会带上

Last-Modified: Tue, 29 Jun 2021 14:56:17 GMT  // 服务器返回
If-Modified-Since: Tue, 29 Jun 2021 14:56:17 GMT // 再次请求时`request`的`header`会带上
复制代码

向服务器再次请求资源时，request的header会带上If-Modified-Since， 然后根据服务器上该资源的的Last-Modified，对比判断是否相等，相等则代表命中协商缓存。

优先级： Etag > Last-Modified， 如果Etag命中了，直接返回304，没有命中再校验Last-Modified

最后

最后温习下浏览器的缓存的流程：

• 第一次访问服务器，请求资源，缓存资源到本地
• 后面再次请求服务器，先确认本地缓存的资源的header是否命中强缓存
• 如果命中，直接从缓存中读取；如果没有，向服务器发起请求，看看服务器返回的header和本地缓存的header相关字段对比, 看是否命中协商缓存
• 如果命中，直接从缓存中读取；如果没有，则向服务器请求最新的资源
• 循环上面的步骤

希望对你们有帮助～