eroszy / fisp-lsdiff-demo

Fis静态资源增量更新项目

静态资源增量更新

背景

根据Steve Souders的性能优化14条准则(什么！你还不知道赶紧恶补吧)，攻城师们每次在代码发布上线前都会做一下几件事：

1. js打包合并到一起、css打包到一起
2. 合并后的资源利用压缩工具自动压缩
3. 打包后的静态资源添加时间戳，高端一点的可能添加内容的MD5戳，开启服务器端永久缓存

资源合并减少了请求书、资源添加时间戳、MD5戳可以开启资源缓存，一切看起来都如此的美好。理想永远都是丰满的，现实确实骨感的。直到后来时间大家发现当我们需要频繁上线时一系列的问题就来了：

1. 如果上线有新增加、删除文件我们每次都需要修改资源合并配置(假设你使用的是grunt、gulp等编译工具)
2. 资源合并到一起是很好，但是在持续集成、快速迭代中细微修改都会使整个文件缓存失效，尤其是移动端浪费流量、页面加载速度慢用户体验就更差了

为了解决这些问题我们提出了两个新的解决方案：

静态资源自动合并方案、静态资源增量更新方案。下面主要给大家介绍静态资源增量更新方案， 插播广告静态资源自动合并方案是一个很NB的自动化方案，它解决了很多你现在遇到的，将来可能遇到的问题，这里附上传送门.

介绍

静态资源增量更新是一种新的静态资源缓存方案，它的核心**通过Ajax请求取代传统的Script和Link加载静态资源，并将静态资源存贮与localStorage中。 每次请求页面时先对比服务器最新资源和localStorage的文件(合并前的小文件)差异,通过Ajax更新修改的小文件，并更新localStorage内容，插入到页面。

增量更新方案的优点：

• 减少不必要的请求，只在有更新时再发送请求
• 增量更新资源，节省大量带宽，移动端优化效果更加明显

适用场景

增量更新方案可以应用于所有的前端项目中，但对于一下场景优化效果将会更加明显

• 对于快速迭代、上线比较多的产品线
• 对于慢网速环境，对于外国网络、移动端尤其适用

使用文档

• 如果你没有使用过Fis参考这里
• 如果你有Fisp的项目参考这里

设计

总体设计文档

详细设计文档

其他

和Manifest的结合

后续补充详细方案