极致体验追求

在开发完我们的基础版本之后,反馈较多的问题就在于页面加载,H5想要达到App的效果,最大的问题就是静态资源缓存,虽然各浏览器已经对静态资源做了缓存处理。

使用Basket遇到的坑

  1. 结合requireJs时,使用官方提供的basket.full.min.js,会出现第一次加载JS执行正常,而第二次使用缓存中的Js时,则发现js似乎没有执行,需要自己调试basket.js源码才可以发现问题所在。问题就在于获取缓存中的js速度非常之快,添加到页面的时候需要延迟一下解析才能正常执行。
    解决办法:
  2. 调试问题,使用缓存中的js,根本无法调试,而且更坑的是,异常需要自己捕捉,否则看不到异常信息。所以你在开发的时候要特别注意JS语法
  3. 在使用basket过程中,出现双缓存问题;第一层是basket自己的缓存,第二层是浏览器本身的缓存,这会出现什么情况呢?
    当你修改一个Js文件后,你需要修改basket的unique值,然后还要修改引入js的时间戳。

基于上面几个问题,我决定放弃使用basket框架,因为很没必要,现在的浏览器已经做好缓存静态资源的工作了,而且还使得我们的开发不方便调试。

从使用到放弃这个过程很快,我们迁移的代码也不多,所以放弃不需要付出太大的代价。

还原到requireJs之后,立马就写了一个缓存框架,后期优化后会放到Github,因为localStorage不支持设置失效时间,所以自己写了一个。