localStorage的黑科技-js和css缓存机制


Posted in Javascript onFebruary 06, 2017

一、发现黑科技的起因

今天在微信公众号看到一篇技术博文,想用印象笔记收藏,所以发送了文章链接到pc上。然后习惯性地打开控制台,看看源码,想了解下最近微信用了什么新技术。

呵呵,以下勾起了我侦探的欲望。页面加载后的异常点就是只加载了一个js,如下图所示:

localStorage的黑科技-js和css缓存机制

我很诧异,为什么已经开启了Disable cache,js只加载了一个,而且体积这么小。接着,我按住Ctrl+O进行资源文件查找,发现我被“忽悠”了。其实根本就不止一个js文件。

localStorage的黑科技-js和css缓存机制

脑袋里灵光一闪,不会是用localStorage做了缓存吧?!赶紧看了下localStronge,还真是。。。。

localStorage的黑科技-js和css缓存机制

心里一阵澎湃,这不是我之前就想实现的加载性能优化的想法吗!乖乖,我孤陋寡闻了,已经有前端团队实现了代码。

二、谈谈文件加载方面的优化思路

通常,前端的资源文件加载优化,就是在文件不修改迭代的情况下,尽可能多地利用缓存,避免多次下载同样的文件。

一般的做法就是尽量延长资源的有效期,也就是设置 Cache-Control里的max-age,使页面资源请求的返回码为304,让浏览器直接使用本地缓存。

虽然pc端的协商缓存(304)很快,但手机端因为网络原因,协商缓存的效果就没pc端那么好了。而且,手机会经常清除本地缓存,所以文件缓存的时间也不会很长。

这个时候,localStorage就派上用场了。

localStorage相比cookie,可以缓存大体积的数据,而且是永久有效。所以,如果把js资源和css资源存储在localStorage中,则可以省去发送http请求所消耗的时间,大大提高用户的浏览体验。

三、用localStorage做资源缓存需要解决的问题

3.1 版本更新机制

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

普通的资源请求,可以根据

文件名+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做,则需要一套新的缓存更新机制。

3.2 搭建更新代码的脚手架

使用localStorage缓存,则需要一个新的脚手架来管理资源文件的读取和写入。

3.3 后台输出一份资源配置信息

因为需要前端做资源更新,所以后台要输出一份依据给前端做判断用,也就是需要一份资源配置信息。前端根据配置信息,进行匹配和比较,最终决定 使用localStorage缓存,还是重新发起请求,下载最新的资源文件。

3.4 存在XSS安全隐患

localStorage中的信息,客户端是可以任意修改的。如果哪个黑客想练手一下,可以任意注入js代码。那么,在页面刷新的时候,注入的代码也将会被执行。

四、微信的做法解析

4.1 版本标识

localStorage的黑科技-js和css缓存机制

以__MOON__a/a_report.js为例,版本信息用key __MOON__a/a_report.js_ver存储,存储的value为//res.wx.qq.com/mmbizwap/zh_CN/htmledition/js/a/a_report32e586.js。

如果按普通加载方式,直接将该value取出来,设置到script节点的src属性,即可完成加载。

微信判断该版本是否最新,就是用该value值与后台输出的配置信息进行比较,最后得出是否更新的结果。

如果value值与配置信息一致,则使用缓存。否则,重新发起请求加载。

4.2 脚手架

可以看出,微信使用的是自己开发的脚手架moon.js,在这个网页中的实际文件名是moon32ebc4.js。

因为是混淆过变量名的文件,所以要看出具体代码的走向,有点费劲,这里就不做分析了。

4.3 资源配置信息

因为脚手架moon.js需要资源配置信息才能正常工作,所以配置信息一定会在moon.js之前输出。

依次查看moon.js之前的script标签,发现了window.moon_map这个json对象。

localStorage的黑科技-js和css缓存机制

利用控制台输出该变量查看信息如下:

localStorage的黑科技-js和css缓存机制

看到这里,可以明确一个点:这就是更新机制所必备的资源配置信息表了。

而且,可以看出,该配置信息json对象的key,就对应localStorage中的key。同理,value值也是一一对应。

4.4 XSS攻击

此处是为了验证微信的缓存机制是否存在XSS攻击,看到这里的童鞋可千万不要去做坏事。

我在一个js缓存代码中,插入alert("hehe");,看页面刷新的时候,是否会出现该弹窗,来验证是否存在攻击漏洞。

localStorage的黑科技-js和css缓存机制

刷新页面后,结果如下图:

localStorage的黑科技-js和css缓存机制

可以看出,微信也没有解决这类问题。所以,这种缓存机制,还是有先天不足的。

4.5 测试微信的更新机制

修改localStorage中 key __MOON__a/a_report.js_ver对应的value值,让微信的脚手架moon.js更新__MOON__a/a_report.js,刷掉我刚才主动插入的代码。

这里,我修改文件名为***587.js(原来的文件名为***586.js)。接着F5刷新页面。

结果为:report.js代码更新了,版本号也恢复回 ***586.js

localStorage的黑科技-js和css缓存机制

五、结论

localStorage缓存有其用武之地,但不是万能的。需要注意以上提及的坑。

可以应用的场景我归纳为以下几点:

1. 非首屏渲染需要的css文件,可以做LS缓存。

首屏渲染需要的css,需要按常规方式输出,因为SEO需要,不然爬虫爬取页面的时候,页面效果会很不好。而非首屏的css,则可以用LS缓存,减少资源下载时间。

2. 展示类、动画类等非业务主要逻辑的代码,可以做LS缓存。

这样,可以一定程度上避免业务层的安全漏洞。当然,前端再怎么做防护都是一层薄纸。重要的,还是后台接口要做好安全保护。

3. 移动端可以做LS缓存。PC端做LS缓存,起到的优化作用不大。

以上就是本文的全部内容,希望本文的内容对大家的学习或者工作能带来一定的帮助,同时也希望多多支持三水点靠木!

Javascript 相关文章推荐
静态的动态续篇之来点XML
Dec 23 Javascript
IE与Firefox下javascript getyear年份的兼容性写法
Dec 20 Javascript
jQuery 行级解析读取XML文件(附源码)
Oct 12 Javascript
让FireFox支持innerText的实现代码
Dec 01 Javascript
让你的博文自动带上缩址的实现代码,方便发到微博客上
Dec 28 Javascript
JavaScript中的稀疏数组与密集数组[译]
Sep 17 Javascript
利用BootStrap弹出二级对话框的简单实现方法
Sep 21 Javascript
分分钟玩转Vue.js组件
Oct 25 Javascript
Node.js实现发送邮件功能
Nov 06 Javascript
vue图片上传本地预览组件使用详解
Feb 20 Javascript
vue通过数据过滤实现表格合并
Nov 30 Javascript
使用Vue 自定义文件选择器组件的实例代码
Mar 04 Javascript
jQuery快速实现商品数量加减的方法
Feb 06 #Javascript
jQuery EasyUI 页面加载等待及页面等待层
Feb 06 #Javascript
jQuery内容筛选选择器实例代码
Feb 06 #Javascript
jQuery基本筛选选择器实例代码
Feb 06 #Javascript
jQuery层级选择器实例代码
Feb 06 #Javascript
jQuery元素选择器实例代码
Feb 06 #Javascript
对称加密与非对称加密优缺点详解
Feb 06 #Javascript
You might like
关于时间计算的结总
2006/12/06 PHP
thinkphp,onethink和thinkox中验证码不显示的解决方法分析
2016/06/06 PHP
PHP实现动态删除XML数据的方法示例
2018/03/30 PHP
PHP 多进程与信号中断实现多任务常驻内存管理实例方法
2019/10/04 PHP
php设计模式之中介者模式分析【星际争霸游戏案例】
2020/03/23 PHP
键盘控制事件应用教程大全
2006/11/24 Javascript
jQuery提交表单ajax查询实例代码
2012/10/07 Javascript
用json方式实现在 js 中建立一个map
2014/05/02 Javascript
JavaScript实现身份证验证代码
2016/02/17 Javascript
JS DOM实现鼠标滑动图片效果
2020/09/17 Javascript
Angular.js与Bootstrap相结合实现手风琴菜单代码
2016/04/13 Javascript
Bootstrap实现导航栏的2种方式
2016/11/28 Javascript
jQuery+HTML5实现弹出创意搜索框层
2016/12/29 Javascript
vue使用watch 观察路由变化,重新获取内容
2017/03/08 Javascript
Angular HMR(热模块替换)功能实现方法
2018/04/04 Javascript
vue之将echart封装为组件
2018/06/02 Javascript
React 组件间的通信示例
2018/06/14 Javascript
JavaScript enum枚举类型定义及使用方法
2020/05/15 Javascript
Python保存MongoDB上的文件到本地的方法
2016/03/16 Python
python3+PyQt5实现自定义窗口部件Counters
2018/04/20 Python
python爬虫之验证码篇3-滑动验证码识别技术
2019/04/11 Python
python读取并定位excel数据坐标系详解
2019/06/26 Python
Python数据可视化:泊松分布详解
2019/12/07 Python
python数据类型可变不可变知识点总结
2020/03/06 Python
Python线程协作threading.Condition实现过程解析
2020/03/12 Python
html5 css3实例教程 一款html5和css3实现的小机器人走路动画
2014/10/20 HTML / CSS
super()与this()的区别
2016/01/17 面试题
湖南省党的群众路线教育实践活动总结会议新闻稿
2014/10/21 职场文书
和谐家庭事迹材料
2014/12/20 职场文书
工作经验交流材料
2014/12/30 职场文书
高校自主招生自荐信2015
2015/03/04 职场文书
放假通知范文
2015/04/14 职场文书
解决mysql模糊查询索引失效问题的几种方法
2021/06/18 MySQL
详解Java分布式事务的 6 种解决方案
2021/06/26 Java/Android
关于python类SortedList详解
2021/09/04 Python
Redis全局ID生成器的实现
2022/06/05 Redis