[前端开发]几种你不得不了解的浏览器缓存设置方式

Posted 2021-04-08 焱融科技

编者注：超融合产品化的道路，除了计算、存储、网络等后端能力的革命性变革，在用户体验上，也是一次重要变革。焱融超融合产品从后端到前端都践行“执简驭繁”的设计思想和理念。你以为这里只有云计算、存储、网络的最黑科技吗？NONONO，这里还有前端的黑科技高手

为什么要用缓存

在前端开发中，性能一直都是被大家所重视的重点，判断一个网站的性能最直观的就是看网页打开的速度，其中提高网站响应速度的一种方式就是使用浏览器缓存。一般来说，可以对网站的静态资源使用缓存，将静态资源缓存在本地浏览器，优秀的缓存策略可以加快网站响应速度并且节省再次加载资源文件的带宽。因为不需要再从服务器加载静态资源了，所以缓存策略也可以降低服务器的负载压力。

缓存类型

浏览器缓存分为协商缓存和强缓存。

协商缓存在加载资源时，浏览器先判断缓存是否命中。如果命中，浏览器会发送一次 http 请求向服务器询问当前的缓存是否是有效的；如果有效，则可以直接从缓存中加载静态资源。

强缓存在加载资源时，浏览器先判断缓存是否命中，如果命中，直接从缓存中读取静态资源，不会向浏览器确认缓存是否有效。这种方式的好处是可以减少一次 http 请求。

如何设置缓存

通过设置 http 头信息，可用的参数如下：
* Expires
* Cache-control
* Last-Modified/If-Modified-Since
* Etag/If-None-Match

其中 Expires 和 Cache-control 属于强缓存；Last-Modified/If-Modified-Since 和 Etag/If-None-Match 属于协商缓存。

Expires

Expires 是 http1.0 提出的一个表示资源过期时间的 header，它描述的是一个绝对时间，由服务器返回，用 GMT 格式的字符串表示。缺点是由服务器端返回的一个绝对时间，如果客户端和服务器时间相差较大，或者处于不同时区，那么误差就会很大。

Cache-Control

Cache-Control 描述的是一个相对时间，在进行缓存命中的时候，都是利用客户端时间进行判断，所以相比较Expires，Cache-Control 的缓存管理更有效、安全一些，并且 Cache-Control 优先级高于 Expires。

Last-Modified/If-Modified-Since

Last-Modified/If-Modified-Since 要配合Cache-Control 使用。

Last-Modified：标示这个响应资源的最后修改时间。

If-Modified-Since：当缓存过期且发现资源具有 Last-Modified 声明，则向服务器发送请求，并带上 If-Modified-Since，表示请求时间。服务器收到请求后，将被请求资源的最后修改时间做对比，若最后修改时间较新，则返回 304，若最后修改时间较旧，则返回 200。

Etag/If-None-Match

Etag/If-None-Match 也要配合 Cache-Control 使用。

Etag：服务器响应请求时，告诉浏览器当前资源在服务器的唯一标识（生成规则由服务器决定）。

If-None-Match：当缓存过期时并且发现资源具有 Etag 声明，则向服务器发送请求，并带上 If-None-Match： Etag 的值 。服务器收到请求后与资源的 Etag 进行比对，决定返回200或304。

用户行为与缓存

关于焱融云

焱融云聚集了IBM、华为、VMware等世界顶级IT公司以及阿里云、百度云、腾讯云、金山云等国内一流云计算互联网企业的技术精英，组成了强大的技术团队，是一家以超融合技术为核心竞争力的高新技术企业，在分布式存储等关键技术上拥有自主知识产权。焱融超融合系列产品已服务于金融、政府、制造业、互联网等行业的众多客户。了解更多焱融科技信息，请访问官网www.yanrongyun.com。

关注焱融，进入超融合新时代！