摘要：主要可分为强制缓存字段字段对比缓存字段标识浏览器行为引起的缓存变化移动端的缓存策略其实，在讲述移动端的缓存策略时，并没有分析的特别详细，只是大致的讲解了一下目前大家都在使用的缓存策略。
前言
在前端开发中，缓存有利于加快网页的加载速度，同时缓存能够被反复利用，所以可以减少流量和带宽的开销。
缓存的分类有很多种，CDN缓存、数据库缓存、代理服务器缓存和浏览器缓存。本篇将来讲解一下Web开发中的浏览器缓存。这个在实际开发环境中往往也会被问到，或者使用到。如何去准确认清楚缓存的概念，是前端必须要去学习的。如果你喜欢我的文章，欢迎评论，欢迎Star~。欢迎关注我的github博客
正文浏览器的缓存问题，主要指的是http的缓存——即协议层。而h5新增的storage和数据库缓存，那是应用层缓存，并不被计入本篇的分析内容里面。下面我们正式开始来进行缓存的分析。
协议层的缓存，其实，可以被分成强制缓存和对比缓存。
强制缓存首先，我们先来看一张强制缓存时的时序图，来了解一下强制缓存在不同情况下的请求模式：
从图中，我们不难看出，只有当缓存失效时，才会去服务器获取最新资源的方式，就是强制缓存。而在协议层的字段中，可以造成强制缓存的字段有两个Expires和Cache-Control。
1.0的时候见到我——Expires最早使用的是Expires字段，该字段表示缓存到期时间，即有效时间+当时服务器的时间，然后将这个时间设置在header中返回给服务器。因此，该时间是一个绝对时间，举例说明：
Expires: Thu, 10 Nov 2017 08:45:11 GMT
图片示例：
，服务器存储着文件的Etag字段，可以在与每次客户端传送If-no-match的字段进行比较，如果相等，则表示未修改，响应304；反之，则表示已修改，响应200状态码，返回数据。
最后，通过一张原理图，我们来加深一下记忆：
至此为止，两种缓存类型的缓存方式已经阐述完成了，不知你是否已经心中已经有个大致的印象，当别人问起时，你可以对答如流。希望我们一同进步吧，fighting。
浏览器行为引起的不同最后，我们来聊聊浏览器行为会引起缓存的变化吧。
下面说一下浏览器的行为会产生怎样的请求：
刷新网页 => 如果缓存没有失效，浏览器会直接使用缓存；反之，则向服务器请求数据
手动刷新（F5） => 浏览器会认为缓存失效，在请求服务器时加上Cache-Control: max-age=0字段，然后询问服务器数据是否更新。
强制刷新（Ctrl + F5） => 浏览器会直接忽略缓存，在请求服务器时加上Cache-Control: no-cache字段，然后重新向服务器拉取文件。
移动端的缓存处理在PC端或许这样子的缓存机制就已经足够了，因为PC端不需要为网络的问题担心。
但是，移动端却不行，任何一个网络请求的增加，对于移动端的加载消耗时间都是比较大的（谁叫移动端的网太差呢，3G、2G）。那么，上述的缓存有什么问题呢？其实，强制缓存是没有太大问题的，因为只要缓存不到期，是不会想服务器发送请求的；但是如果是对比缓存的情况下，304的问题就比较巨大，因为它会造成无用的请求。每次在使用缓存前，都会向服务器发送请求确认，导致网络的延时。
一次完美的缓存必须保证两点：
数据缓存之后，尽量减少服务器的请求
如果资源更新的话，必须使得客户端的资源一起更新。
所以，一般我们会运用的方式是：
在资源文件后面加上表示，如config.f1ec3.js、config.v1.js之类的，然后给资源设置较长的缓存时间，如一年
Cache-Control: max-age=31536000
这样子，就不会造成304的回包现象。
然后一旦资源发生更新时，我们可以改变资源后面的标识符，实现静态资源非覆盖式更新。
本篇大致分析了浏览器缓存部分的分类情况，以及细化分析。主要可分为：
强制缓存
Expires字段
Cache-Control字段
对比缓存
Last-Modefied字段
Etag标识
浏览器行为引起的缓存变化
移动端的缓存策略
其实，在讲述移动端的缓存策略时，并没有分析的特别详细，只是大致的讲解了一下目前大家都在使用的缓存策略。可能之后，还会写一篇移动端缓存的细分文章。
最后，如果你对我写的有疑问，可以与我讨论。如果我写的有错误，欢迎指正。你喜欢我的博客，请给我关注Star~呦。大家一起总结一起进步。欢迎关注我的github博客
文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。
转载请注明本文地址：https://www.ucloud.cn/yun/91888.html
摘要：浏览器缓存只存在于每个单独的客户端，因此它是私有缓存。表示该资源既能被浏览器缓存，也能被任何中间人比如代理服务器等缓存。普通刷新会启用协商缓存，忽略强缓存。只有在地址栏或收藏夹输入网址通过链接引用资源等情况下，浏览器才会启用强缓存。 前言 在访问一个网页时，客户端会从服务器下载所需的资源。但是有些资源很少发生变动，例如 HTML、JS、CSS、图片、字体文件等。如果每次加载页面都从源服...
摘要：接下来的内容中我们将通过缓存位置缓存策略以及实际场景应用缓存策略来探讨浏览器缓存机制。是运行在浏览器背后的独立线程，一般可以用来实现缓存功能。在所有浏览器缓存中，覆盖面基本是最大的。 一、前言 缓存可以说是性能优化中简单高效的一种优化方式了。一个优秀的缓存策略可以缩短网页请求资源的距离，减少延迟，并且由于缓存文件可以重复利用，还可以减少带宽，降低网络负荷。对于一个数据请求来说，可以分为...
摘要：接下来的内容中我们将通过缓存位置缓存策略以及实际场景应用缓存策略来探讨浏览器缓存机制。是运行在浏览器背后的独立线程，一般可以用来实现缓存功能。在所有浏览器缓存中，覆盖面基本是最大的。 一、前言 缓存可以说是性能优化中简单高效的一种优化方式了。一个优秀的缓存策略可以缩短网页请求资源的距离，减少延迟，并且由于缓存文件可以重复利用，还可以减少带宽，降低网络负荷。 对于一个数据请求来说，可以分...
摘要：接下来的内容中我们将通过缓存位置缓存策略以及实际场景应用缓存策略来探讨浏览器缓存机制。是运行在浏览器背后的独立线程，一般可以用来实现缓存功能。在所有浏览器缓存中，覆盖面基本是最大的。 一、前言 缓存可以说是性能优化中简单高效的一种优化方式了。一个优秀的缓存策略可以缩短网页请求资源的距离，减少延迟，并且由于缓存文件可以重复利用，还可以减少带宽，降低网络负荷。 对于一个数据请求来说，可以分...
摘要：接下来的内容中我们将通过缓存位置缓存策略以及实际场景应用缓存策略来探讨浏览器缓存机制。是运行在浏览器背后的独立线程，一般可以用来实现缓存功能。在所有浏览器缓存中，覆盖面基本是最大的。 一、前言 缓存可以说是性能优化中简单高效的一种优化方式了。一个优秀的缓存策略可以缩短网页请求资源的距离，减少延迟，并且由于缓存文件可以重复利用，还可以减少带宽，降低网络负荷。 对于一个数据请求来说，可以分...
阅读 1090·2021-09-22 15:32
阅读 1695·2019-08-30 15:53
阅读 3185·2019-08-30 15:53
阅读 1330·2019-08-30 15:43
阅读 393·2019-08-28 18:28
阅读 2537·2019-08-26 18:18
阅读 620·2019-08-26 13:58
阅读 2484·2019-08-26 12:10
