缓存

背景1：　　

　　一般，前端的资源文件加载优化，就是在文件不修改迭代的状况下，尽量多地利用缓存，避免屡次下载一样的文件。

　　通常的作法就是尽可能延长资源的有效期，也就是设置 Cache-Control 里的 max-age，使页面资源请求为 304，直接使用本地缓存。

　　可是手机端因为我的习惯，网络缘由等，协商缓存（304）的效果就没 pc 端那么好了。

　　因此，localStorage 出场。

　　localStorage 相比 cookie，能够缓存大致积的数据，并且永久有效。

 

技术难点：

　　只要一个项目还在迭代开发，就难以免须要更新资源文件。

　　　　普通的资源请求，能够根据文件名+md5，或者在资源连接后面加上特定的后缀作为标识来判断是否须要更新资源。

　　　　http://res.wx.qq.com/mmbizwap/zh_CN/htmledition/js/biz_wap/moon32ebc4.js

　　　　http://1.ss.faisys.com/js/comm/fai.min.js?v=201612051739

　　　　对于 localStorage 缓存，则须要一套新的缓存更新机制。

　    同时须要搭建更新代码的脚手架？来管理资源文件的读取和写入。

　　后台输出一份资源配置信息。（后台输出一份依据给前端作判断用，是否使用缓存或从新发起请求，下载最新的资源文件。）

　　存在 XSS 安全隐患，咱们知道，localStorage 能够任意修改。

　　举个栗子：微信判断该版本是否最新，就是用控制台中的 value 值与后台输出的配置信息进行比较，最后得出是否更新的结果，一致则使用缓存。

　　微信 localStorage ：

　　

　　微信资源配置信息会在脚手架 moon.js 以前输出：

       

　　控制台输出 window.moon_map：

　　

 

简单应用：

 

背景2：token

 

结论：

　　非首屏渲染须要的 css 文件，能够作LS缓存（首屏须要SEO，爬虫爬取，故常规输出）

　　移动端推荐LS缓存。

扩展：

　　MT-增量更新