根据Steve Souders的性能优化14条准则(什么!你还不知道赶紧恶补吧),攻城师们每次在代码发布上线前都会做一下几件事:
- js打包合并到一起、css打包到一起
- 合并后的资源利用压缩工具自动压缩
- 打包后的静态资源添加时间戳,高端一点的可能添加内容的MD5戳,开启服务器端永久缓存
资源合并减少了请求书、资源添加时间戳、MD5戳可以开启资源缓存,一切看起来都如此的美好。理想永远都是丰满的,现实确实骨感的。直到后来时间大家发现当我们需要频繁上线时一系列的问题就来了:
- 如果上线有新增加、删除文件我们每次都需要修改资源合并配置(假设你使用的是grunt、gulp等编译工具)
- 资源合并到一起是很好,但是在持续集成、快速迭代中细微修改都会使整个文件缓存失效,尤其是移动端浪费流量、页面加载速度慢用户体验就更差了
为了解决这些问题我们提出了两个新的解决方案:
静态资源自动合并方案、静态资源增量更新方案。下面主要给大家介绍静态资源增量更新方案, 插播广告静态资源自动合并方案是一个很NB的自动化方案,它解决了很多你现在遇到的,将来可能遇到的问题,这里附上传送门.
静态资源增量更新是一种新的静态资源缓存方案,它的核心**通过Ajax请求取代传统的Script和Link加载静态资源,并将静态资源存贮与localStorage中。 每次请求页面时先对比服务器最新资源和localStorage的文件(合并前的小文件)差异,通过Ajax更新修改的小文件,并更新localStorage内容,插入到页面。
增量更新方案的优点:
- 减少不必要的请求,只在有更新时再发送请求
- 增量更新资源,节省大量带宽,移动端优化效果更加明显
增量更新方案可以应用于所有的前端项目中,但对于一下场景优化效果将会更加明显
- 对于快速迭代、上线比较多的产品线
- 对于慢网速环境,对于外国网络、移动端尤其适用
后续补充详细方案