前端性能优化-缓存优化

最新推荐文章于 2024-05-13 13:41:28 发布

lznism666

最新推荐文章于 2024-05-13 13:41:28 发布

阅读量633

点赞数

分类专栏：前端

本文链接：https://blog.csdn.net/lznism666/article/details/108236693

版权

前端专栏收录该内容

32 篇文章 0 订阅

订阅专栏

1. 强缓存

控制浏览器强缓存主要靠两个响应头部字段来实现：Expires和Cache-Control，浏览器在访问静态资源时，会首先判断该资源是否做了强缓存。如果发现是强缓存并且缓存还在有效期内，那就不会去发送http请求，而直接使用本地的缓存（这个缓存可能来自于内存，也可能来自本地磁盘空间）。其中Expires表示资源的过期时间（GMT格式），是一个时间点。Cache-Control使用max-age来表示资源可以被缓存多久，是一个时间区间。如果强缓存过期了，那就会去协商缓存。
以上二者的优先级Cache-Control会高于Expires。如果设置了Cache-Control那就不会再去检查Expires了。
强缓存有一个明显的缺点就是，无法知道当前服务器上的资源有没有发生改变。

2. 协商缓存

协商缓存主要靠两对请求头部字段和响应头部字段组成。分别为Last-Modified，If-Modified-Since和Etag，If-None-Matched。
Last-Modified会返回资源最近一个更新的时间，精确到秒。每次这个时间在请求时会通过请求头If-Modified-Since带到服务器端。服务器端对这个字段进行验证，如果发现这个资源并没有改动，则会返回304的响应码。如果发生改动了会返回200响应码并且返回最新的资源。
Etag这个字段是由服务器端返回，并且可以将这个字段作为资源的唯一的标识，当内容发生变化之后，这个Etag也会随之改变。下一次请求时会由If-None-Matched带上这个Etag，服务器端对这个字段进行验证，如果发现这个资源并没有改动，则会返回304的响应码。如果发生改动了会返回200响应码并且返回最新的资源。
以上二者的优先级Etag的方式会高于Last-Modified的方式，如果请求头带上了If-Modified-Since，那就不会再去验证If-None-Matched

3. `from memory cache` 和 `from disk cache`的区别

这两者都是强缓存的结果，其中前者表示缓存来自内存，这种缓存会随着浏览器关闭而消失。后者表示缓存来自硬盘，不会随着浏览器的关闭而消失。控制到底是from memory cache还是from disk cache是通过响应头的Etag来实现的。如果有Etag字段，那么浏览器会将本次缓存写入硬盘。