前端工程 - 静态资源的更新
示例 <html> <head> <link href='a.css' type='text/css'/> <script src="b.js"></script> ... </head> ... </html> 这个页面引用了2个静态资源： a.css、b.js 随着产品的不断发展，简单的静态资源更新也就不再简单 阶段一 产品初期，访问量不大，网络带宽充足，每次用户访问都重新加载静态资源也很快 这种情况下，静态资源的升级就非常简单，用新的文件直接覆盖线上文件即可 阶段二 随着访问量的增加，带宽渐渐紧张起来，就需要进行优化，一个常用的优化方式就是为静态资源设置过期时间，添加Expires头，让其在客户端缓存，例如缓存了 a.css、b.js，这样就大大提高了用户的访问速度，也极大的降低了网络传输 假如对 b.js 进行了修改，需要更新，但 b.js 已经缓存到了用户端，没过期之前不会再次请求了 对于这个问题，通常的解法是为静态文件添加版本号，或者时间戳，例如 <script src="b.js?v=1.0.0"></script> 或 <script src="b.js?t=201512171450"></script> 当更新新版本时，修改src为 "b.js?v=1.0.1"，由于客户端缓存的是 b.js?v=1.0.0，没有 b.js?v=1.0.1，客户端便请求 b.js?v=1.0.1，然后再次进行缓存 这样便解决了上面的问题 阶段三 产品继续发展，静态资源文件越来越多，每次更新升级都需要统一修改所有的静态引用，修改版本号或者时间戳 这时产生了新的问题，每次升级都会使所有用户的所有静态资源缓存失效，都会重新发起请求，意味着每次升级都会产生大量的网络传输 产品大了，更新升级的频率也就高了，这个新问题也就凸显出来 阶段四 时间继续前进，你的产品已经发展为大型web系统，用户访问非常频繁，就又有新问题了 例如修改了html，需要新的 b.js 配合，html变为 ... <script src="b.js?v=1.0.2"></script> ... 由于系统变大，升级过程就会变长，html 与 b.js 的升级总会有个时间间隙，用户在这个间隙中进行访问时就有问题了 （1）假设html先被升级了，这时用户来访问，就产生了 新html + 旧b.js，页面肯定会有错误 （2）假设b.js先被升级了，这时用户来访问，就产生了 旧html + 新b.js，还是有错误 这就是版本号与时间戳方案带来的两个问题 （1）缓存失效，即使大部分静态文件没有修改，也会重新请求 （2）升级过程中可能产生页面错误 解决方案 目前来看最优的方案就是对静态文件进行计算编码（如 md5）把编码放入文件名中 例如对 b.js 进行 md5 计算，b.js 的名字则变为 b_832wef2x.js <script src="b_832wef2x.js"></script> 下次升级时，再次计算 b.js 的 md5值 如果 b.js 被修改了，md5 值就会改变，b.js 的名字也就变了，如 b_933ef2x.js 客户端就会请求新的文件 如果 b.js 没有改变，名字也就不变，客户端就还可以继续使用缓存 这就解决了第一个问题，每次升级不必全部静态文件更新，用户只需重新请求改过的文件 再看第二个问题 例如 b.js 变了，就会产生一个新的文件名，如 b_933ef2x.js，页面引用变为 <script src="b_933ef2x.js"></script> 升级时先把 b_933ef2x.js 升上去，然后升级html 由于b.js新文件名和旧的不同，就不会覆盖，旧的b_832wef2x.js 和 新的b_933ef2x.js 同时存在 那么在升级间隙时间内的访问就不会出错