利用Localstorage对静态资源进行缓存的尝试

 

shellzhang

2015-07-24

 

1. 动机

2. 方案设计的考虑

3. 实现方案

4. 局限性

5. 以后的改进

动机

• 最大可能地减少HTTP请求

预选方案

1. 通过FIS插件

优势

    a. mod.js (v1.0.5)本身内建支持

    b. 这个功能本身也属于fis应该做的

    c. 不受后端语言变迁的影响

不足

    a. 需要在前端处理各种兼容

http://caniuse.com/#search=localstorage

http://caniuse.com/#search=cors

Has.js

    b. mod.js仅对amd方式定义的模块进行cache，lib库下的不会处理（jquery.js, zepto.js等）

预选方案 (2)

2. 通过处理模板字符串

优势

    a. 在服务器端通过UA即可判断基本的兼容性，进而按需替换字符串来处理，避免前端处理的延迟

    b. 所有js资源都可以纳入缓存，包括lib库文件

不足

    a. 依赖后端语言，语言更换对应逻辑要重写

    b. hack行为，总觉得怪怪的，毕竟这个职责不属于后端

 

结论——此次还是采用了方案2，通过后端语言解决，比较方便快速出原型

方案实现

1. 字符串转换模块

    ss_site/djangosite/neihan/search/views.py

    def replace_script_tag_and_render

    a. 浏览器版本检测

    b. 开发环境与产品环境监测

    c. async_load_script脚本解析并注入

2. 资源加载模块

    site_fe/neihan_wap/page/in-app/async_load_script.html

    a. 注意考虑脚本执行顺序

方案实现 (2)

3. 不足：

    a. 目前前端模块没有考虑兼容性

    b. localstorage存储时候，会出现资源项越来越多的问题，应该采用mod.js方式，将资源名作为key，版本号作为存储值的一部分

    c. 模板中字符串替换操作应该交由前端发布流程来处理