覆盖更新与增量更新

1,553 阅读2分钟

前言

覆盖更新与增量更新都是建立在浏览器启用强制缓存策略的前提下的(见下方HTTP缓存策略)。否则,每次用户都会发送请求到服务器,自然能获取到最新的文件。

假如我们启用强制缓存策略,设置max-age为30天,如果在缓存有效期内项目需要进行迭代,必须让浏览器发送实体请求下载最新的资源。

覆盖更新

覆盖更新的策略是在引用资源的URL后添加请求参数,比如添加时间戳。这样带来的问题是,未改动的资源也会被重新下载。如果可以根据文件内容生成一个hash,将hash作为请求参数,就可以保证在文件变动时去下载最新的,未改动的hash不会变因此会使用缓存。

然而将hash指纹作为url参数实现的覆盖更新有两个缺点:

  • 必须保证html文件与改动的静态文件同步更新,否则资源不同步。当有很多场景是将html和静态资源部署到不同服务器的,无法保证更新时间完全同步。
  • 不利于版本回滚,因为覆盖更新获取的最新资源会覆盖旧版本问津。

增量更新

增量更新策略解决了上述缺点,方案是将原本作为参数的hash值作为资源文件名的一部分,如 main.home.456734454.css。在静态资源使用增量更新策略时,可以将静态资源先于动态html部署。

webpack 增量更新

webpack 增量更新:打包生成的文件可以指定文件名的格式。可配置[hash]、[fullhash]、[chunkhash]和[contenthash]等,详见webpack.docschina.org/configurati…

HTTP缓存策略

Expires:Expires:Wed,23 Aug 2021 14:00:00 GMT

上述信息指定了资源的过期时间,然而这种方式有一个缺点:指定的时间是一服务器为准的时间,但是客户端进行过期判断是将本地时间与此时间对比。

cache-control:no-cache、no-store、max-age=3600

max-age指定的是缓存的时间跨度,因此并不会收到客户端与服务器时间误差影响。所以,max-age更精确,比Expires优先级更高。

Etag

Etag是服务器未资源分配的唯一性标识,作为相应首部返回给浏览器。浏览器在cache-control指定no-cachemax-ageExpires均过期之后,将Etag值通过If-none-match作为请求首部信息发给服务器,服务器对比是否改变,如果未改变,返回304并分配新的cache-control,如果改变了,会返回最新的资源及新的Etag值。

请求流程图如下:

http缓存.png

原型链.png

参考书籍

《前端工程化体系设计与实践》 周俊鹏/著