前端工程 - 静态资源的更新

示例 <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 同时存在 那么在升级间隙时间内的访问就不会出错

原文发布于微信公众号 - 性能与架构(yogoup)

原文发表时间:2015-12-20

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏smy

一张图解释负载均衡

首先当大量用户访问时候,先请求到nignx服务器,因为nignx对于高并发支持较好,所以由nignx服务器将访问需求分配给不同的apache服务器,apache...

1473
来自专栏公有云的互联网缓存与存储

cdn定位问题的三板斧之一:看解析

导语:说到“三板斧”,一个充满某厂气息的词语,土味又爵士,但是对于日常的运维工作来说,是一种总结之余,更是一种可传导的高效的定位方法

2753
来自专栏EAWorld

容器云之K8s自动化安装方式的选择

目前kubernetes 已经发展到1.5的时代,但在这之前学习和使用kubernetes还是走了不少弯路,第一个问题就是安装,也许你会说安装很简单。照着官网或...

3369
来自专栏zhangdd.com

make: 警告:检测到时钟错误。您的创建可能是不完整的 问题解决方法

今天编译nginx源码,make的时候也出现了这个问题,报错”make: 警告:检测到时钟错误。您的创建可能是不完整的。”

1174
来自专栏应用案例

超全的PLC选型总结

在plc系统设计时,首先应确定系统方案,下一步工作就是PLC的设计选型。选择PLC,主要是确定PLC的生产厂家和PLC的具体型号。对于系统方案要求有分布式系统、...

2387
来自专栏Java后端技术栈

关于缓存命中率的几个关键问题!

不命中:无法直接通过缓存获取到想要的数据,需要再次查询数据库或者执行其它的操作。原因可能是由于缓存中根本不存在,或者缓存已经过期。

1891
来自专栏JAVA高级架构

如何实现大型网站架构设计的负载均衡

负载均衡 (Load Balancing) 负载均衡建立在现有网络结构之上,它提供了一种廉价有效透明的方法扩展网络设备和服务器的带宽、增加吞吐量、加强网络数据处...

48610
来自专栏原创

如何通过个推SDK实现IM功能

产品上线4年多以来,个推已经服务了逾19万app开发者和35万app,助推了无数拥有亿级用户量的合作伙伴应用精细化运营。 但是,大多数开发者都不了解,用个推的推...

4158
来自专栏hadoop学习笔记

从服务端视角看高并发难题

所谓服务器大流量高并发指的是:在同时或极短时间内,有大量的请求到达服务端,每个请求都需要服务端耗费资源进行处理,并做出相应的反馈。

1423
来自专栏java闲聊

natapp 内网穿透神器

2606

扫码关注云+社区

领取腾讯云代金券