网站内容更新机制(localStorage的黑科技-js和css缓存机制的相关知识)

　　网站内容更新机制(localStorage的黑科技-js和css缓存机制的相关知识)

　　本文主要介绍localStorage的黑科技-js和css缓存机制的相关知识，具有一定的参考价值。让我们一起来看看吧。

　　一、发现黑科技成因

　　今天在微信公众号看到一篇技术博文，想用印象笔记保存，于是发了一个文章链接到我的电脑。然后习惯性的打开控制台，看源码，想知道微信最近有什么新技术。

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

　　我很惊讶，为什么禁用缓存已经开启，而且只加载了一个js，而且体积这么小。然后，我按住Ctrl+O搜索资源文件，发现自己被“忽悠”了。其实根本就不止一个js文件。

　　脑中灵光一闪，不会是用localStorage缓存吧？！赶紧看localStronge，果然是。. . .

　　我的心在澎湃，这不就是我之前想要实现的加载性能优化的想法吗！亲，我一无所知，前端团队已经实现了代码。

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

　　通常，前端资源文件加载优化是在不修改和迭代文件的情况下尽可能使用缓存，避免多次下载同一个文件。

　　一般的做法是尽可能延长资源的有效期，即在Cache-Control中设置max-age，使得页面资源请求的返回码为304，这样浏览器就可以直接使用本地缓存。

　　虽然pc端的协商缓存(304）非常快，但是由于网络原因，手机端协商缓存的效果不如pc端。而且手机端会经常清除本地缓存，所以文件缓存时间不长。会很长。

　　这就是 localStorage 派上用场的地方。

　　与cookies相比，localStorage可以缓存大量数据，并且是永久性的。因此，如果将js资源和css资源存储在localStorage中，可以节省发送http请求所消耗的时间，大大提升用户的浏览体验。

　　三、使用localStorage进行资源缓存需要解决的问题

　　3.1 版本更新机制

　　只要一个项目是迭*敏*感*词*发的，更新资源文件是不可避免的。

　　普通资源请求可以根据

　　文件名+md5

　　或者

　　为资源链接添加特定后缀

　　做一个标志来确定资源是否需要更新。

　　如果你用 localStorage 来做，你需要一个新的缓存更新机制。

　　3.2 搭建更新代码的脚手架

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

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

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

　　3.4 存在XSS安全隐患

　　客户端可以任意修改localStorage中的信息。如果有黑客想练习，可以随意注入js代码。然后，当页面刷新时，注入的代码也会被执行。

　　四、微信实践分析

　　4.1 版本 ID

　　以__MOON__a/a_report.js为例，版本信息以__MOON__a/a_report.js_ver为key存储，存储值为///mmbizwap/zh_CN/htmledition/js/a/a_report32e586.js。

　　如果使用正常加载方式，可以直接将值取出并设置到脚本节点的src属性中，完成加载。

　　微信通过与后台输出的配置信息进行比较来判断版本是否为最新，最终得到是否更新的结果。

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

　　4.2 脚手架

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

　　因为是混淆了变量名的文件，看具体代码的走向有点费劲，这里就不分析了。

　　4.3 资源配置信息

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

　　依次查看moon.js之前的script标签，找到了json对象window.moon_map。

　　使用控制台输出该变量，查看信息如下：

　　看到这里，可以明确一点：这是更新机制所必需的资源配置信息表。

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

　　4.4 XSS 攻击

　　这是为了验证微信的缓存机制中是否存在XSS攻击。看到这里的童鞋就别做坏事了。

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

　　刷新页面后，结果如下：

　　可见，微信并没有解决这样的问题。因此，这种缓存机制仍然存在先天不足。

　　4.5 测试微信的更新机制

　　修改localStorage中key __MOON__a/a_report.js_ver对应的值，让微信脚手架moon.js更新__MOON__a/a_report.js，删除我刚才插入的代码。

　　这里我把文件名修改为***587.js（原来的文件名是***586.js）。然后 F5 刷新页面。

　　结果是：report.js代码更新，版本号恢复为***586.js。

　　五、结论

　　localStorage 缓存有它的位置，但它不是灵丹妙药。需要注意上面提到的坑。

　　可以应用的场景可以总结为以下几点：

　　1.off-the-fold 渲染所需的 css 文件可以用作 LS 缓存。

　　首屏渲染需要的CSS需要按照通常的方式输出，因为SEO需要，否则爬虫爬取页面的时候，页面效果会很差。代替首屏的css，可以使用LS缓存来减少资源下载时间。

　　2. 显示类、*敏*感*词*类等非业务主逻辑代码可以作为LS缓存。

　　这样可以在一定程度上避免业务层的安全漏洞。当然，无论前端如何保护，都是一层薄薄的纸。重要的是后台接口应该得到很好的保护。

　　3. 移动端可以做LS缓存。PC端的LS缓存对优化影响不大。

　　以上就是本文的全部内容。希望对大家的学习有所帮助。更多相关内容请关注PHP中文网！