浏览器缓存最佳实践

·  阅读 1372
浏览器缓存最佳实践

一、什么是缓存?

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

                                               (本文内容围绕此思维导图展开)


二、浏览器缓存有哪些标识?

以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,从而达到更改请求路径的目的。



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


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


分类:
前端
标签:
分类:
前端
标签:
收藏成功!
已添加到「」, 点击更改