浏览器缓存常识

缓存系统之浏览器缓存

缓存的分类：

客户端：
浏览器缓存，目的就是加速各种静态资源的访问。对于静态资源来说，浏览器不会缓存html页面的，所以你每次改完html的页面的时候，html都是改完立即生效的，不存在什么有缓存导致页面不对的问题。浏览器缓存的东西有图片，css和js。这些资源将在缓存失效前调用的时候调用浏览器的缓存内容
服务端：
又分为 代理服务器缓存 和 反向代理服务器缓存（也叫网关缓存，比如 Nginx反向代理、Squid等），其实广泛使用的 CDN 也是一种服务 端缓存，目的都是让用户的请求走”捷径“，并且都是缓存图片、文件等静态资源

浏览器缓存：

测试知道了解后有什么好处：前端展示不是最新的页面，可以自己分析判断，而不需要每次傻傻的去清理缓存。

浏览器缓存的目的：
第一：避免了频繁请求，节省带宽流量。
第二：加快了用户访问网页的速度。
第三：减小了服务端的压力。
浏览器缓存流程：

1.查看缓存

判断是否有缓存：
首先先要理解怎么存放存放在哪里：
chrome的浏览器（旧版）：
chrome://chrome-urls/ 谷歌浏览器输入，点击cache链接就可

火狐浏览器 about:cache?storage=disk

本地chrome的浏览器缓存存放地方一般实在这里：
C:\Users\用户名\AppData\Local\Google\Chrome\User Data\Default\Cache
如下图：

这样的话不容易看懂，安装下专业的工具Chrome cache View工具：

2.缓存判断

根据上面的流程图看，首先是判断这个缓存是否过期，那怎么去判断
一般情况下，浏览器发出的所有 HTTP 请求会首先被路由到浏览器的缓存。

A.缓存未过期，直接读取数据

以百度的为例：
打开百度，筛选bd_logo,如下图，第一次请求的时候是大部分是200返回码，因为是没有缓存

再次刷新，返回200，显示读取的是缓存：

问题：为什么是200。
浏览器中判断是否过期一般由expires以及cache-control字段来判断，如果两者同时存在，则是cache-control max-age覆盖expire。
从以上可以看出，max-age=315360000，cache-control的时间为十年，所以，如果有缓存，这条信息会一直从缓存中读取。

B缓存过期：

打开新浪网为例，
输入goldenstock.js
可以看出有效期是2分钟，前两分钟都是返回200

超过两分钟后，重新刷新，如下图，304了。

问题：为什么是304.
根据上面的流程，
先看缓存是否过期，缓存数据是存两分钟，两分钟过后，缓存失效，查看eatg标记，没有的话，找last-modify(表明请求的资源上次的修改时间)，请求的时候加上if-modif-since(客户端保留的资源上次的修改时间) .通过对比时间，如果是一致的话，就返回304，读取本地缓存，如果不一致，返回200，重新读取
last-modify：

if-modif-since

2.1.
打开新浪网为例，
输入11.js。
同理以上，结合流程，含有etag资源的内容标识。（不唯一，通常为文件的md5或者一段hash值，只要保证写入和验证时的方法一致即可），可以看出有效期是2分钟，前两分钟都是返回200

etag：

If-None-Match： 客户端保留的资源内容标识

再次请求的时候，通过比对两者的区别，如果没有区别则返回304，有则返回200.

通常情况下，如果同时发送 If-None-Match 、If-Modified-Since字段，服务器只要比较etag 的内容即可，当然具体处理方式，看服务器的约定规则。

拓展：
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: 绝对禁止缓存。
7）must-revalidate: 如果页面过期，则去服务器进行获取。
以上注意的就是nocache与nostore的区别

根据以上结论，浏览器缓存还可分为强缓存跟协商缓存：

强缓存就是时间期的判断，不过期就是强制缓存
协商缓存就是if-modified-since/last-modified 和 if-none-match/etag 之类的请求判断。

用户不同行为的操作方式会有不同的效果：

1.地址栏访问/新打开窗口/前进后退/，正常的浏览器缓存机制；
2.F5刷新，浏览器会设置max-age=0，跳过强缓存判断，进行协商缓存判断；
3.ctrl+F5刷新，跳过强缓存和协商缓存，直接从服务器拉取资源。

一般大型公司怎么解决强缓存问题呢：

URL中增加数字版本号，如下图，每一次变更一下，当这个参数变化的时候，强缓存都会失效并重新加载。