浏览器缓存机制

浏览器缓存实际上就是对一些静态资源或是变化不多的资源进行本地缓存以加快访问速度的一种方式，善于利用缓存机制可以给网站性能带来非常大的提升，所以了解缓存机制原理是前端攻城师必须要掌握的。页面请求一个资源主要有3种情况：

1. 本地无缓存或强制刷新：客户端向服务器请求资源

2. 本地有缓存且未过期：客户端使用本地资源

3. 本地有缓存已过期：客户端重新请求服务器

首先介绍几个术语

HTTP 1.0:

Pragma:Pragma头域用来包含实现特定的指令，最常用的是Pragma:no-cache。在HTTP/1.1协议中，它的含义和Cache-Control:no-cache相同

Expires: 用来标识缓存失效时间，通常是一个时间值，如果是-1表示禁止缓存，如果存在Cache-Control的max-age，则此项被max-age覆盖

HTTP 1.1:

Cache-Control:主要值有public、private、no-cache、no-store、no-transform、must-revalidate、proxy-revalidate、max-age

(1)打开新窗口(_blank)

private、no-cache、must-revalidate 再次访问服务器

max-age 则在过期之前不会重复访问

（2）在地址栏回车

值为private或must-revalidate则只有第一次访问时会访问服务器，以后就不再访问。

值为no-cache，那么每次都会访问。

值为max-age，则在过期之前不会重复访问。

（3）按后退按扭

值为private、must-revalidate、max-age，则不会重访问，

值为no-cache，则每次都重复访问

（4）按刷新按扭

无论为何值，都会重复访问

public所有内容都将被缓存

private内容只缓存到私有缓存中

no-cache所有内容都不会被缓存

no-store所有内容都不会被缓存到缓存或 Internet 临时文件中

must-revalidation/proxy-revalidation如果缓存的内容失效，请求必须发送到服务器/代理以进行重新验证

max-age=xxx (xxx is numeric)缓存的内容将在 xxx 秒后失效, 这个选项只在HTTP 1.1可用, 并如果和Last-Modified一起使用时, 优先级较高

ETag/If-None-Match:'XXX'：服务器资源的标识字符串，可以是md5也可以是时间戳，内容发生变化时，Etag也应该发生变化,以及浏览器请求时需要比较Etag的头信息

Last-Modified/If-Modified-Since: 服务器返回的文件最后修改时间，以及浏览器需要对比时提交的标识字符串

主要过程是:浏览器A请求服务器资源B

1. A发现本地没有缓存请求服务器下载资源B

2. 服务器返回资源B，并在头部提供了Cache-Control:max-age=60， Last-Modified:xxxx-xxx-xx,ETag:'abcdef';

3. 1分钟内A再次访问B，发现本地缓存未过期，直接使用本地资源，无需请求服务器

4. 1分钟后A再次访问B，发现缓存过期，向服务器发出请求，并带上If-Modified-Since：xxxx-xxx-xx和If-None-Match:'abcdef';

5. 服务器发现请求有If-Modified-Since和If-None-Match，对文件修改时间和Etag进行了对比

6. 如果文件有变化则返回200，并返回文件内容，并更新max-age, Last-Modified和ETag

7. 如果文件未更新，则返回304，告诉浏览器继续使用缓存文件，并更新max-age

问题1 Pragma,Expires和Cache-Control的区别是啥

Pragma和Expires是http 1.0的标准，支持http1.0和http1.1都可以使用，但是Expires存在服务器和客户端时间不同步的问题，所以一般采用:Cache-Control:max-age来代替Expires，但是只能在支持http1.1的浏览器使用

问题2 Last-Modified和Etag区别是啥

Last-Modified看似可以解决文件修改问题，但是存在文件内容没有被修改，修改时间却发生变化的可能，为了解决这个问你，Etag的出现能根据文件内容来准确保证缓存的正确性。