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 相关文章推荐
JavaScript 使用技巧精萃(.net html
Apr 25 Javascript
JQuery 实现的页面滚动时浮动窗口控件
Jul 10 Javascript
关于jQuery的inArray 方法介绍
Oct 08 Javascript
正负小数点后两位浮点数实现原理及代码
Sep 06 Javascript
jquery.autocomplete修改实现键盘上下键自动填充示例
Nov 19 Javascript
javascript类型系统 Array对象学习笔记
Jan 09 Javascript
论JavaScript模块化编程
Mar 07 Javascript
JS中Promise函数then的奥秘探究
Jul 30 Javascript
Vue数据双向绑定的深入探究
Nov 27 Javascript
Javascript通过控制类名更改样式
May 24 Javascript
在layui下对元素进行事件绑定的实例
Sep 06 Javascript
Vue监视数据的原理详解
Feb 24 Vue.js
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
谨慎使用PHP的引用原因分析
2012/09/06 PHP
PHP内核探索:变量存储与类型使用说明
2014/01/30 PHP
PHP之autoload运行机制实例分析
2014/08/28 PHP
php 类自动载入的方法
2015/06/03 PHP
PHP处理数组和XML之间的互相转换
2016/06/02 PHP
PHP线程的内存回收问题
2016/07/08 PHP
JQuery 构建客户/服务分离的链接模型中Table中的排序分析
2010/01/22 Javascript
ajax提交表单实现网页无刷新注册示例
2014/05/08 Javascript
jQuery遍历之next()、nextAll()方法使用实例
2014/11/08 Javascript
jQuery设置单选按钮radio选中/不可用的实例代码
2016/06/24 Javascript
jQuery复制节点用法示例(clone方法)
2016/09/08 Javascript
Bootstrap导航条可点击和鼠标悬停显示下拉菜单
2016/11/25 Javascript
JS扩展类,克隆对象与混合类实例分析
2016/11/26 Javascript
手写简单的jQuery雪花飘落效果实例
2018/04/22 jQuery
使用Easyui实现查询条件的后端传递并自动刷新表格的两种方法
2019/09/09 Javascript
js实现内置计时器
2019/12/16 Javascript
[03:26]回顾2015国际邀请赛中国区预选赛
2015/06/09 DOTA
在Python中关于中文编码问题的处理建议
2015/04/08 Python
Django实现自定义404,500页面教程
2017/03/26 Python
Python读取文件内容的三种常用方式及效率比较
2017/10/07 Python
python使用threading获取线程函数返回值的实现方法
2017/11/15 Python
python 3利用Dlib 19.7实现摄像头人脸检测特征点标定
2018/02/26 Python
python多线程之事件Event的使用详解
2018/04/27 Python
Django 视图层(view)的使用
2018/11/09 Python
python2.7实现复制大量文件及文件夹资料
2019/08/31 Python
django框架使用views.py的函数对表进行增删改查内容操作详解【models.py中表的创建、views.py中函数的使用,基于对象的跨表查询】
2019/12/12 Python
MNIST数据集转化为二维图片的实现示例
2020/01/10 Python
浅析PyCharm 的初始设置(知道)
2020/10/12 Python
Python使用Pygame绘制时钟
2020/11/29 Python
python3.9.1环境安装的方法(图文)
2021/02/02 Python
纯CSS实现的大小渐变、渐远效果
2014/04/15 HTML / CSS
浅谈利用缓存来优化HTML5 Canvas程序的性能
2015/05/12 HTML / CSS
仓库班组长岗位职责
2013/12/12 职场文书
银行竞聘演讲稿范文
2014/04/23 职场文书
孝敬父母的演讲稿
2014/05/14 职场文书
大专应届毕业生求职信
2014/07/15 职场文书