图解浏览器缓存，教你提高用户体验

littlelightss 发布于2019-08-06 13:38 / 2841人阅读

摘要：用于防止重要的信息被无意的发布。只有特定用户才能使用缓存，适用于公共缓存服务器的情况。强缓存的过程强缓存浏览器直接从本地缓存中获取数据，不与服务器进行交互。当浏览器发现缓存过期后，缓存并不一定不能使用了。

欢迎大家前往腾讯云+社区，获取更多腾讯海量技术实践干货哦~

本文由前端林子发表于云+社区专栏

浏览器缓存，是浏览器端保存数据，用于快速读取或避免重复资源请求的优化机制，有效的缓存使用可以避免重复的网络请求和加快页面速度,从而提高用户体验。

一强缓存 1.1 区分Expires和Cache-Control

以一个接口返回的响应头为例：

这里我画了张思维导图，对Expires和Cache-Control做比较：

具体介绍Expires和Cache-Control：

Expires:

(1)Expires是HTTP1.0的东西，现在默认浏览器均默认使用HTTP 1.1，所以它的作用基本忽略；

(2)Expires规定了缓存失效时间（Date为当前时间），是绝对时间。由于Expires返回的是一个绝对时间，在服务器时间与客户端时间相差较大的时候，缓存命中不准确；

Cache-Control：

(1)Cache-Control是HTTP1.1的

(2)Cache-Control的max-age规定了缓存有效时间（2552s)，是相对时间；

(3)若响应头Expires和Cache-Control同时存在，Cache-Control优先级高于Expires

Cache-Control的常用指令：

no-cache：不使用本地缓存，需要使用协商缓存，也就是先与服务器确认缓存是否可用。

no-store：禁用缓存。用于防止重要的信息被无意的发布。在请求消息中发送将使得请求和响应消息都不使用缓存。

public：其他用户也可使用缓存，适用于公共缓存服务器的情况。

private：只有特定用户才能使用缓存，适用于公共缓存服务器的情况。

max-age：客户机可以接收生存期不大于指定时间（以秒为单位）的响应。

min-fresh客户机可以接收响应时间小于当前时间加上指定时间的响应。

max-stale指示客户机可以接收超出超时期间的响应消息。如果指定max-stale消息的值，那么客户机可以接收超出超时期指定值之内的响应消息。

注意：no-cache指令并不是不缓存，no-cache的意思是可以缓存，但每次用应该去向服务器验证缓存是否可用。no-store才是不缓存内容。

1.2 强缓存的过程

强缓存：浏览器直接从本地缓存中获取数据，不与服务器进行交互。

· 浏览器第一次跟服务器请求一个资源，服务器在返回这个资源的同时，在response的header会加上Expires/Cache-Control的header；

· 浏览器再请求这个资源时，先从缓存中寻找，找到这个资源后，比较Expires或Cache-Control的max-age字段值做比较, 如果在有效期内，则读取缓存内容；若缓存已过期，则重新向服务器发送请求；

· header在重新加载的时候会被更新

这里我画了两张图，浏览器第一次请求：

浏览器第一次请求

浏览器再次请求：

强缓存

对于强缓存，chrome浏览器的状态码：

200 OK(from disk cache)或是200 OK (from memory cache)

例如：请求某个图片后，当浏览器再次访问这个图片时，发现有这个图片的缓存，且缓存没过期，所以就使用缓存。

当浏览器发现缓存过期后，缓存并不一定不能使用了。比如文件虽然过了有效期，但内容并没有发生改变，还是可以用缓存数据。所以，这个时候需要与服务器协商，让服务器判断本地缓存是否还能使用。那么又怎么判断服务端文件有没有更新呢？主要有两种方式：

Last-Modified，If-Modified-since。

二协商缓存 2.1 区分Last-Modified和If-Modified-Since

以一个返回的接口为例：

Last-Modified的格式：

Last-Modified: Mon, 17 Sep 2018 12:06:18 GMT

If-Modified-Since的格式：

If-Modified-Since: Mon, 17 Sep 2018 12:06:18 GMT

2.2 Etag是什么

web服务器响应请求时，告诉浏览器当前资源在服务器的唯一标识（生成规则由服务器决定）。Apache中，ETag的值默认是对文件的索引节（INode），大小（Size）和最后修改时间（MTime）进行Hash后得到的。

2.3 协商缓存的过程

浏览器第一次请求：

浏览器第一次缓存

浏览器再一次请求：

协商缓存

Last-Modified、If-Modified-Since：

· 浏览器第一次向服务器请求一个资源，服务器在返回这个资源的同时，在respone的header加上Last-Modified字段，表示该资源在服务器上的最后修改时间；

· 浏览器再次向服务器请求这个资源时，在request的header上加上If-Modified-Since字段，这个值就是上一次请求时返回的Last-Modified的值;

·服务器收到资源请求时，比较If-Modified-Since字段值和被请求资源的最后修改时间，若资源最后修改时间较旧，则说明文件没有修改，返回304 Not Modified, 浏览器从缓存中加载资源；若不相同，说明文件被更新，浏览器直接从服务器加载资源, 返回200；

·重新加载资源时更新Last-Modified Header

Etag、If-None-Match

· 浏览器第一次向服务器请求一个资源，服务器在返回这个资源的同时，在respone的header加上ETag字段；

·浏览器再次跟服务器请求这个资源时，在request的header上加上If-None-Match，这个值就是上一次请求时返回的ETag的值；

·服务器再次收到资源请求时，再根据资源生成一个新的ETag，与浏览器传过来If-None-Match比较，如果这两个值相同，则说明资源没有变化，返回304 Not Modified, 浏览器从缓存中加载资源，否则返回200 资源内容。与Last-Modified不一样的是，当服务器返回304 Not Modified的响应时，由于ETag重新生成过，response header中还会把这个ETag返回，即使这个ETag跟之前的没有变化

2.4 为什么有了Last-Modified，还要用Etag呢？

HTTP1.1中ETag的出现主要是为了解决几个Last-Modified比较难解决的问题：

·一些文件也许会周期性的更改，但是他的内容并不改变(仅仅改变的修改时间)，这个时候我们并不希望客户端认为这个文件被修改了，而重新GET；

·某些文件修改非常频繁，比如在秒以下的时间内进行修改，(比方说1s内修改了N次)，If-Modified-Since能检查到的粒度是s级的，这种修改无法判断(或者说UNIX记录MTIME只能精确到秒)；

·某些服务器不能精确的得到文件的最后修改时间。

对于上述情景，利用ETag能够更加准确的控制缓存，因为ETag是服务器自动生成的资源在服务器端的唯一标识符，资源每次变动，都会生成新的ETag值。Last-Modified与ETag是可以一起使用的，但服务器会优先验证ETag。

2.5 比较强缓存和协商缓存

基于上文对强缓存和协商缓存过程的解释，这里我把强缓存和协商缓存绘制在一张图里，方便比较，具体过程可以参照上文：

http缓存

三小结

本文主要通过图解介绍了http的缓存，具体包括强缓存和协商缓存。如有问题，欢迎指正。

相关阅读
【每日课程推荐】机器学习实战！快速入门在线广告业务及CTR相应知识

此文已由作者授权腾讯云+社区发布，更多原文请点击

搜索关注公众号「云加社区」，第一时间获取技术干货，关注后回复1024 送你一份技术课程大礼包！

海量技术实践经验，尽在云加社区！

GPU云服务器云服务器用户体验一键体验云缓存用户体验部用户体验的

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/62047.html

图解浏览器缓存，教你提高用户体验

摘要：用于防止重要的信息被无意的发布。只有特定用户才能使用缓存，适用于公共缓存服务器的情况。强缓存的过程强缓存的过程强缓存浏览器直接从本地缓存中获取数据，不与服务器进行交互。当浏览器发现缓存过期后，缓存并不一定不能使用了。欢迎大家前往腾讯云+社区，获取更多腾讯海量技术实践干货哦~ 本文由前端林子发表于云+社区专栏浏览器缓存，是浏览器端保存数据，用于快速读取或避免重复资源请求的优化机制，有效...

TigerChain 2019-04-23 13:14 评论0 收藏0
「码个蛋」2017年200篇精选干货集合

摘要：让你收获满满码个蛋从年月日推送第篇文章一年过去了已累积推文近篇文章，本文为年度精选，共计篇，按照类别整理便于读者主题阅读。本篇文章是今年的最后一篇技术文章，为了让大家在家也能好好学习，特此花了几个小时整理了这些文章。 showImg(https://segmentfault.com/img/remote/1460000013241596); 让你收获满满！码个蛋从2017年02月20...

wangtdgoodluck 2019-07-30 15:40 评论0 收藏0
设计架构

摘要：先来看一张系统前后端架构模型图。一种接口的约定本文用于定义一种统一的接口设计方案，希望具有参考价值。，和都是常见的软件架构设计模式，它通过分离关注点来改进代码的组织方式。如何无痛降低 if else 面条代码复杂度相信不少同学在维护老项目时，都遇到过在深深的 if else 之间纠缠的业务逻辑。面对这样的一团乱麻，简单粗暴地继续增量修改常常只会让复杂度越来越高，可读性越来越差，有没...

graf 2019-06-24 17:56 评论0 收藏0
前端优化 - 收藏集 - 掘金

摘要：虽然有着各种各样的不同，但是相同的是，他们前端优化不完全指南前端掘金篇幅可能有点长，我想先聊一聊阅读的方式，我希望你阅读的时候，能够把我当作你的竞争对手，你的梦想是超越我。如何提升页面渲染效率 - 前端 - 掘金Web页面的性能我们每天都会浏览很多的Web页面，使用很多基于Web的应用。这些站点看起来既不一样，用途也都各有不同，有在线视频，Social Media，新闻，邮件客户端...

VincentFF 2019-08-20 17:15 评论0 收藏0