黑科技:LocalStorage 缓存机制
翟健 2018-03-28 来源 : 阅读 446 评论 0

事情的起因是我的同事大河问我:
– “你知道微信公众号文章的渲染方式吗?”

对此,我的反应是:
– “啊?”

大河继续问:
– “控制台的 Network 里没有发生任何请求,文章里的内容是怎么来的?”

说到这儿我好像大概理解她的意思,于是打开控制台的 Network 确认一下果真如此,文章中的内容并不是通过 http 请求获取的。

黑科技:LocalStorage 缓存机制 

首先我想到的是:
– “会不会是服务器端渲染的?”

于是我找到请求得到的 html 文件却发现:

– “只有文章的标题是服务器端渲染的,那么文章的内容就只能在 js 文件中。”

我继续寻找请求得到的 js 文件却发现空空如也:
– “难道 js 文件都被缓存到 localStorage 里?!”

黑科技:LocalStorage 缓存机制 

看到 Local Storage 里密密麻麻的 js 文件我心里一阵澎湃:这确实是一种可以尝试的前端加载性能优化的方式。

 黑科技:LocalStorage 缓存机制

使用 localStorage 进行资源缓存的解决方案梳理

缓存更新机制

项目在迭代开发的过程中,难以避免需要更新资源文件,常用的方法有文件名${md5}.js或者在资源 url 后面加上特定后缀的方式 etc.,而在微信做法中以 __MOON__pages/report.js 为例,其版本信息使用 key 为 __MOON__pages/report.js_ver 的存储项保存:

 

1

   

__MOON__pages/report.js_ver: //res.wx.qq.com/mmbizwap/zh_CN/htmledition/js/pages/report3b8dd6.js

   

我们不直接使用这个 value 动态插入 script 节点来加载该文件,而是根据后端提供的配置信息,判断是选择使用缓存的 __MOON__pages/report.js 文件,还是重新发起加载请求。

搭建更新代码的脚手架

(加载 combo 化)使用基于 localStorage 的缓存机制,就需要一个脚手架来管理资源文件的读取和写入,不难看出微信使用的是自己开发的脚手架 moon.js,阅读其源码代价较大,暂不分析。

资源配置信息

前端在进行资源更新时需要后端提供一份依据供前端用于判断哪些资源需要更新,并且脚手架 moon.js 需要该资源配置信息才能正常工作,所以配置信息一定要在 moon.js 的 script 标签前输出:

源码过长,不在此显示;详见公开课讲解

存在 XSS 安全隐患

在 __MOON__pages/report.js 文件的入口处加入代码 alert(‘Helo World’); 如图所示:

黑科技:LocalStorage 缓存机制 

刷新页面后弹出提示 “Hello World”,说明使用基于 localStorage 的缓存机制存在一些安全隐患,并且微信尚未对这些攻击漏洞进行处理。

 黑科技:LocalStorage 缓存机制

关于使用 localStorage 进行资源缓存其他思考

1. 如果先输出 html 然后用 js 从本地缓存读取样式再插入会出现严重的阻塞和闪烁问题

2. 这种解决方案更加适合单页面应用否则容易产生冗余

3. 存在浏览器兼容性问题(隐身模式 etc.)(微信具有自己的X5内核完美解决该问题)

4. 网络速度快,协商缓存的响应延迟可能比 LS读取+eval 更小

5. 浏览器对于单次 set 和对 LS(本质是 SQL lite)的总容量存在限制

6. 可以节省流量,并且可以用于 A/B test

7. 移动端的浏览器缓存经常会被清理且网络状态通常较差,更加适合这种解决方案

 


本文由 @职坐标 发布于职坐标。未经许可,禁止转载。
喜欢 | 0 不喜欢 | 0
看完这篇文章有何感觉?已经有0人表态,0%的人喜欢 快给朋友分享吧~
评论(0)
后参与评论
本文作者 联系TA

熟悉系大型项目开发业务流程,精通C、Java语言

  • 10
    文章
  • 1457
    人气
  • 80%
    受欢迎度

已有5人表明态度,80%喜欢该老师!

进入TA的空间
名师指导直通车
  • 资料索取
    资料索取
  • 答疑解惑
    答疑解惑
  • 技术交流
    技术交流
  • 职业测评
    职业测评
  • 面试技巧
    面试技巧
  • 高薪秘笈
    高薪秘笈
TA的其他文章 更多>>
var 全局,函数级,let 作用域限制在块级域
经验技巧 0% 的用户喜欢
vue基本理论知识
经验技巧 0% 的用户喜欢
关于Vue生命周期和钩子函数的小理解
经验技巧 0% 的用户喜欢
快速记忆HTML5标签
经验技巧 0% 的用户喜欢
前端完整学习路线
经验技巧 0% 的用户喜欢
其他海同名师 更多>>
刘新华
刘新华 联系TA
实力型。激情饱满,对专业充满热情
吴翠红
吴翠红 联系TA
独创“教、学、练、测”循环教学模式
吕益平
吕益平 联系TA
熟悉企业软件开发的产品设计及开发
黄泽民
黄泽民 联系TA
擅长javase核心技术
程钢
程钢 联系TA
擅长大型企业商业网站开发和管理
经验技巧30天热搜词 更多>>

您输入的评论内容中包含违禁敏感词

我知道了

免费获取海同IT培训资料
验证码手机号,获得海同独家IT培训资料
获取验证码
提交

版权所有 职坐标-一站式IT培训就业服务领导者 沪ICP备13042190号-4
上海海同信息科技有限公司 Copyright ©2015 www.zhizuobiao.com,All Rights Reserved.
 沪公网安备 31011502005948号    ICP许可  沪B2-20190160

站长统计