cache-control

缓存是一种将数据保存在本地，在下一次需要使用它时，无需从数据的源头而是直接本地读取的一种技术。在http中，缓存是非常重要的组成部分。 意义 http 是一种 请求->响应 的半双工通讯协议，网页的 html 文档以及内部的每一张图片、javascript 脚本文本、css 样式文件等资源都需要向服务器发出请求，然后得到所需资源的响应。 如果没有浏览器缓存 从向服务器发起 TCP 连接请求，到服务器磁盘 IO，计算到响应传输整个过程，对网络带宽，服务器性能都是不小的考验。而一个页面往往会有少则十几，多则几十上百的请求，如果每一个资源都从服务端获取，在并发的情况下会给服务器带来很大的压力。 加入缓存后，如果客户端没有资源，会从服务端获取，取得资源后同时存在本地。下一次请求时如果有有效缓存则取缓存，由于不会向服务器发起请求，可以减少服务器的压力，同时从本地读取，不会占用网络带宽，速度也是极快的。 那么 HTTP 协议是怎么控制缓存的呢？ 缓存前提 资源标志 浏览器会把请求的类型 Method （通常来说我们只缓存 get 的请求）和 URI 完整地址作为一个资源的标志。 例如下面这些浏览器都会认为是不同资源，后者并不会匹配前者的缓存。 https://xxxx/a.js 和 http://xxxx/a.js http://xxxx/a.js 和 http://yyyy/a.js

对于提交的订单，为了防止浏览器回退重新提交，我们可以使用Cache-Control之no-store绝对禁止缓存，即便浏览器回退依然请求的是服务器，进而判断订单的状态给出相应的提示信息！ 附网上解释： Cache-Control Http1.1 中的标准，可以看成是 expires 的补充。使用的是相对时间的概念。 简单介绍下Cache-Control的属性设置。 1）max-age: 设置缓存的最大的有效时间，单位为秒（s）。max-age会覆盖掉Expires 2) s-maxage: 只用于共享缓存，比如CDN缓存（s -> share）。与max-age 的区别是：max-age用于普通缓存， 而s-maxage用于代理缓存。如果存在s-maxage,则会覆盖max-age 和 Expires. 3) public：响应会被缓存，并且在多用户间共享。默认是public。 4) private: 响应只作为私有的缓存，不能在用户间共享。如果要求HTTP认证，响应会自动设置为private。 5）no-cache: 指定不缓存响应，表明资源不进行缓存。但是设置了no-cache之后并不代表浏览器不缓存，而是在缓存前要向服务器确认资源是否被更改。因此有的时候只设置no-cache防止缓存还是不够保险，还可以加上private指令，将过期时间设为过去的时间。 6）no-store:

网页的缓存是由 HTTP消息头中的“Cache-control”来控制的，常见的取值有private、no-cache、max-age、must- revalidate等，默认为private。其作用根据不同的重新浏览方式分为以下几种情况： （1） 打开新窗口 值为private、no-cache、must-revalidate，那么打开新窗口访问时都会重新访问服务器。 而如果指定了max-age值，那么在此值内的时间里就不会重新访问服务器，例如： Cache-control: max-age=5(表示当访问此网页后的5秒内再次访问不会去服务器) （2） 在地址栏回车 值为private或must-revalidate则只有第一次访问时会访问服务器，以后就不再访问。 值为no-cache，那么每次都会访问。 值为max-age，则在过期之前不会重复访问。 （3） 按后退按扭 值为private、must-revalidate、max-age，则不会重访问， 值为no-cache，则每次都重复访问 （4） 按刷新按扭 　 无论为何值，都会重复访问 Cache-control值为“no-cache”时，访问此页面不会在Internet临时文章夹留下页面备份。 另外，通过指定“Expires”值也会影响到缓存。例如，指定Expires值为一个早已过去的时间

浏览器缓存，也就是客户端缓存，既是网页性能优化里面静态资源相关优化的一大利器，也是无数web开发人员在工作过程不可避免的一大问题，所以在产品开发的时候我们总是想办法避免缓存产生，而在产品发布之时又在想策略管理缓存提升网页的访问速度。了解浏览器的缓存命中原理，是开发web应用的基础，本文着眼于此，学习浏览器缓存的相关知识，总结缓存避免和缓存管理的方法，结合具体的场景说明缓存的相关问题。希望能对有需要的人有所帮助。 1 浏览器缓存基本认识 它分为强缓存和协商缓存： 1.1 浏览器在加载资源时，先根据这个资源的一些http header判断它是否命中强缓存，强缓存如果命中，浏览器直接从自己的缓存中读取资源，不会发请求到服务器。比如某个css文件，如果浏览器在加载它所在的网页时，这个css文件的缓存配置命中了强缓存，浏览器就直接从缓存中加载这个css，连请求都不会发送到网页所在服务器； 1.2 当强缓存没有命中的时候，浏览器一定会发送一个请求到服务器，通过服务器端依据资源的另外一些http header验证这个资源是否命中协商缓存，如果协商缓存命中，服务器会将这个请求返回，但是不会返回这个资源的数据，而是告诉客户端可以直接从缓存中加载这个资源，于是浏览器就又会从自己的缓存中去加载这个资源； 1.3 强缓存与协商缓存的共同点是：如果命中，都是从客户端缓存中加载资源，而不是从服务器加载资源数据

一、前言 前端缓存主要是分为HTTP缓存和浏览器缓存。其中HTTP缓存是在HTTP请求传输时用到的缓存，主要在服务器代码上设置；而浏览器缓存则主要由前端开发在前端js上进行设置。 缓存可以说是性能优化中简单高效的一种优化方式了。一个优秀的缓存策略可以缩短网页请求资源的距离，减少延迟，并且由于缓存文件可以重复利用，还可以减少带宽，降低网络负荷。 对于一个数据请求来说，可以分为发起网络请求、后端处理、浏览器响应三个步骤。浏览器缓存可以帮助我们在第一和第三步骤中优化性能。比如说直接使用缓存而不发起请求，或者发起了请求但后端存储的数据和前端一致，那么就没有必要再将数据回传回来，这样就减少了响应数据。 缓存类型图解 二、缓存过程分析 浏览器与服务器通信的方式为应答模式，即是：浏览器发起HTTP请求 – 服务器响应该请求。那么浏览器第一次向服务器发起该请求后拿到请求结果，会根据响应报文中HTTP头的缓存标识，决定是否缓存结果，是则将请求结果和缓存标识存入浏览器缓存中，简单的过程如下图： 由上图我们可以知道： 浏览器每次发起请求，都会先在浏览器缓存中查找该请求的结果以及缓存标识 浏览器每次拿到返回的请求结果都会将该结果和缓存标识存入浏览器缓存中 三 强制缓存 强制缓存就是向浏览器缓存查找该请求结果，并根据该结果的缓存规则来决定是否使用该缓存结果的过程，强制缓存的情况主要有三种，如下：