浏览器缓存

浏览器缓存机制

什么是缓存？

缓存能够减少浏览器请求资源的次数，当第一个请求资源完成后，根据相应的缓存机制，将一些静态资源存储在本地磁盘当中，这样下次请求资源的时候，浏览器直接从本地缓存中读取文件，不需要再次发送请求。这样可以减少了网络延迟，加快了页面响应速度，增强了用户体验；减少了网络带宽消耗；减轻了服务器的压力。

浏览器缓存有哪些标识?

我们如何知道，每一次资源请求是从本地获取还是服务器？以Chrome为例，打开开发者工具，点击network tab，选择all，这里会显示我们请求的所有静态资源的加载情况。

这种size大小不为0的请求，就是没有使用缓存。size是memory cache 和 disk cache就表示，浏览器并没有向服务器发送请求，而是直接读取了本地的缓存资源文件。

什么是memory cache？什么是disk cache？两者有什么区别？

1.Memory Cache

内存缓存是一种比较特殊的缓存，他不受max-age、no-cache等配置的影响，即使我们不设置缓存，如果当前的内存空间比较充裕的话，一些资源还是会被缓存下来。但这种缓存是暂时的，一旦关闭了浏览器，这一部分用于缓存的内存空间就会被释放掉。如果真的不想使用缓存，可以设置no-store，这样，即便是内存缓存，也不会生效。

内存缓存虽然比较高效，但还是受限于计算机内存的大小，所以能让我们使用的内存并不多，这个时候就需要硬盘来存储大量的缓存。

2.Disk Cache

Disk Cache 也就是存储在硬盘中的缓存。相比较内存缓存的优势就是长时效。

它会根据HTTP Header中设置的字段类型，来判断资源是否需要重新请求，是否不需要请求。

如果当前内存使用率高的话，请求资源大概率会被缓存到disk cache。

四、缓存过程分析

浏览器在第一次请求资源后，会获取到请求的结果以及缓存标识，接下来，浏览器会根据第一次请求返回的响应头来确定缓存处理的方式，分别是强缓存和协商缓存。

强缓存

不会向服务器发送请求，直接从缓存中读取资源，强缓存可以通过设置两种 HTTP Header 实现：Expires 和 Cache-Control。

这里我们只强调Cache-Control。Expires已经是比较古老的处理方式，有一定的局限性。大家在业务中设置缓存策略的时候，直接使用Cache-Control就好。

Cache-Control

当Cache-Control:max-age=300时，则代表在这个请求正确返回时间（浏览器也会记录下来）的5分钟内再次加载资源，就会命中强缓存。

Cache-Control 可以在请求头或者响应头中设置，并且可以组合使用。

no-cache：

客户端缓存内容，是否使用缓存则需要经过协商缓存来验证决定。表示不使用 Cache-Control的缓存控制方式做前置验证，而是使用 Etag 或者Last-Modified字段来控制缓存。这个名字有一点歧义，并不是说浏览器不能缓存，只是浏览器在使用缓存数据时，需要先确认一下数据是否还跟服务器保持一致。

no-store：所有内容都不会被缓存，即不使用强制缓存，也不使用协商缓存，(memory cache也会失效)

max-age：max-age=xxx 表示缓存内容将在xxx秒后失效

一般，我们会设置Cache-Control的值为“public, max-age=xxx”，表示在xxx秒内再次访问该资源，均使用本地的缓存，不再向服务器发起请求。

强缓存依据某个时间或者某个时间段，所以并不会响应服务端资源文件的变化，一旦资源文件发生了变化，那么强缓存的文件并不会在时间范围之内更改，这样就造成了服务器和浏览器文件不一致的问题，那么怎么解决这个问题呢？此时我们就需要使用协商缓存。

协商缓存

协商缓存就是强制缓存失效后，浏览器携带缓存标识向服务器发起请求，由服务器根据缓存标识决定是否使用缓存的过程。

协商缓存可以通过设置两种 HTTP Header，Last-Modified或者ETag实现。

Last-Modified是该资源文件最后一次更改时间，服务器会在Response Headers中返回，浏览器在下一次发送请求时，放到Request Header里的If-Modified-Since里，服务器在接收到后也会做比对，如果相同则命中协商缓存。

Etag是服务器响应请求时，返回当前资源文件的一个唯一标识，只要资源有变化，Etag就会重新生成。浏览器在下一次加载资源向服务器发送请求时，会将上一次返回的Etag值放到Request Header里的If-None-Match里，服务器只需要比较客户端传来的If-None-Match跟自己服务器上该资源的ETag是否一致，就能很好地判断资源相对客户端而言是否被修改过了。

从上面的图片可以看到，Last-Modified返回的最小时间单位是秒，所以，服务器的资源和本地的资源有可能存在不一致，如果请求的时机正好在资源变动的1s之内，ETag使用的是唯一标识，所以能够很好的解决这个问题。

浏览器缓存最佳实践

频繁变动的资源

Cache-Control: no-cache

对于频繁变动的资源，首先需要使用Cache-Control: no-cache 使浏览器每次都请求服务器，然后配合 ETag 或者 Last-Modified 来验证资源是否有效。这样的做法虽然不能节省请求数量，但是能显著减少响应数据大小。

不常变化的资源

Cache-Control: max-age=31536000

通常在处理这类资源时，给它们的 Cache-Control 配置一个很大的 max-age=31536000 (一年)，这样浏览器之后请求相同的 URL 会命中强缓存。而为了解决更新的问题，就需要在文件名中添加 hash，之后更改hash，从而达到更改请求路径的目的。

自动检测

output:{

path:path.join(__dirname,’./dist’),

publicPath: ‘/dist/’,

filname: ‘bundle.[chunkhash].js’

}

（webpack hash命名）

HTML文件千万别设置强缓存，目前开发页面，大多数情况下都是单页面应用，一旦html不能成功更新，那将是灾难级的技术故障，所以html应该设置Cache-Control为no-cache，每次请求都去和服务器的文件比对。

CSS、JS、图片等资源，可以设置一个长时间的强缓存。更改文件的时候，配合hash值，这样一旦文件发生了改变，那么浏览器直接去请求新的资源，在文件不变动的情况下，直接使用本地缓存，不去向浏览器请求。

trol为no-cache，每次请求都去和服务器的文件比对。

CSS、JS、图片等资源，可以设置一个长时间的强缓存。更改文件的时候，配合hash值，这样一旦文件发生了改变，那么浏览器直接去请求新的资源，在文件不变动的情况下，直接使用本地缓存，不去向浏览器请求。

我们可以直接在Nginx配置文件中，设置缓存相关的头部。或者服务端也可以去做相关的处理。