简单总结浏览器缓存

浏览器缓存

浏览器缓存是浏览器在本地磁盘对用户最近请求过的文档进行储存，当访问者再次访问同一页面的时候，浏览器可以直接从本地磁盘加载文档。

为什么要使用浏览器缓存

• 减少冗余的数据传输
• 减少服务器负担，提升网站性能，
• 加快客户端加载网页的速度
• 提升用户体验

浏览器缓存作为Web性能优化的重要方式之一，那么浏览器缓存的过程是怎么样的呢？

浏览器缓存过程

在浏览器第一次发起请求时，本地无缓存，向服务器发送请求，浏览器端缓存服务器端响应的数据。 那当我们浏览器端有缓存后，在次发起请求时怎么读取缓存内容呢？ 看图

浏览器在第一次请求发生后，再次请求时：

• 浏览器会先获取该资源缓存的header信息，根据其中的expires和cahe-control判断是否命中强缓存，若命中则直接从缓存中获取资源，包括缓存的header信息，本次请求不会与服务器进行通信；

• 如果没有命中强缓存，浏览器会发送请求到服务器，该请求会携带第一次请求返回的有关缓存的header字段信息（Last-Modified/IF-Modified-Since、Etag/IF-None-Match）,由服务器根据请求中的相关header信息来对比结果是否命中协商缓存，若命中，则服务器返回新的响应header信息更新缓存中的对应header信息，但是并不返回资源内容，它会告知浏览器可以直接从缓存获取；否则返回最新的资源内容。

浏览器缓存分类

1. 强缓存：不会向服务器发送请求，直接从缓存中读取资源，在chrome控制台的network选项中可以看到该请求返回200的状态码;
2. 协商缓存：向服务器发送请求，服务器会根据这个请求的request header的一些参数来判断是否命中协商缓存，如果命中，则返回304状态码并带上新的response header通知浏览器从缓存中读取资源；

两者的共同点是，都是从客户端缓存中读取资源；区别是强缓存不会发请求，协商缓存会发请求。

强缓存

http1.0【Expires】

在http1.0中，强制缓存通过Expires响应头来实现。Head中设置Expires过期时间，浏览器再次加载资源时，如果请求时间在这个Expires时间内，则命中强缓存。浏览器会直接读取本地缓存数据库中的信息（from memory or from disk）。

http1.1 【Cache-Control】

在http1.1中，强缓存使用Cache-Control来实现。Cache-Control：当值设为max-age=300时，则代表在这个请求正确返回时间（浏览器也会记录下来）的5分钟内再次加载资源，就会命中强缓存。 Cache-Control还有另外几个值可以设置：

1. private：客户端可以缓存
2. public：客户端和代理服务器均可缓存；
3. max-age=xxx：缓存的资源将在 xxx 秒后过期；
4. no-cache：需要使用协商缓存来验证是否过期；
5. no-store：不可缓存

协商缓存

http1.0 【Last-Modified】

在http1.0中， 请求资源时服务器通过 Last-Modified 来设置响应头的缓存标识

1. Last-Modify/If-Modify-Since：浏览器第一次请求一个资源的时候，服务器返回的header中会加上Last-Modify，Last-modify是一个时间标识该资源的最后修改时间；当浏览器再次请求该资源时，request的请求头中会包含If-Modify-Since，该值为缓存之前返回的Last-Modify。服务器收到If-Modify-Since后，根据资源的最后修改时间判断是否命中缓存

http1.1 【Etag】

在http1.1中，服务器使用Etag来设置响应头缓存标识。

1. 在第一次请求时，服务器会将资源和 Etag 一并返回给浏览器，浏览器将两者缓存到本地缓存数据库。
2. 在第二次请求时，浏览器会将 Etag 信息放到 If-None-Match 请求头去访问服务器，服务器收到请求后，会将服务器中的文件标识与浏览器发来的标识进行对比，如果不相同，服务器返回更新的资源和新的 Etag ，如果相同，服务器返回 304 状态码，浏览器读取缓存。

ETag和Last-Modified的作用和用法，

他们的区别：

1. Etag要优于Last-Modified。Last-Modified的时间单位是秒，如果某个文件在1秒内改变了多次，那么他们的Last-Modified其实并没有体现出来修改，但是Etag每次都会改变确保了精度；
2. 在性能上，Etag要逊于Last-Modified，毕竟Last-Modified只需要记录时间，而Etag需要服务器通过算法来计算出一个hash值；3.在优先级上，服务器校验优先考虑Etag。

页面刷新

地址栏回车【协商缓存和强缓存都生效】

浏览器发起请求，按照正常流程，本地检查是否过期，然后服务器检查新鲜度，最后返回内容。

刷新按钮/F5【只生效协商缓存】

浏览器直接对本地的缓存文件过期，但是会带上If-Modifed-Since，If-None-Match,这就意味着服务器会对文件检查新鲜度，返回结果可能是304，也有可能是200。

Ctrl + F5 （强制刷新）【协商缓存和强缓存都不生效】

浏览器不仅会对本地文件过期，而且不会带上 If-Modifed-Since，If-None-Match，相当于之前从来没有请求过，返回结果是200； 用户行为对缓存的影响，用一个简单的表格总结：

用户操作	Expires/Cache-Control	Last-Modied/Etag
地址栏回车	有效	有效
页面链接跳转	有效	有效
新开窗口	有效	有效
前进回退	有效	有效
F5刷新	无效	有效
Ctrl+F5	无效	无效

总结

缓存类型	获取资源形式	状态码	发送请求到服务器
强缓存	从缓存存取	200（from cache）	否，直接从缓存取
协商缓存	从缓存存取	304(Not Modified)	否，通过服务器来告知缓存是否可用

转载于:https://juejin.im/post/5c3c75dee51d452b197936b9