localStorage的黑科技-js和css緩存機制

一、發(fā)現(xiàn)黑科技的起因

今天在微信公眾號看到一篇技術博文，想用印象筆記收藏，所以發(fā)送了文章鏈接到pc上。然后習慣性地打開控制臺，看看源碼，想了解下最近微信用了什么新技術。

呵呵，以下勾起了我偵探的欲望。頁面加載后的異常點就是只加載了一個js，如下圖所示：

我很詫異，為什么已經開啟了Disable cache，js只加載了一個，而且體積這么小。接著，我按住Ctrl+O進行資源文件查找，發(fā)現(xiàn)我被“忽悠”了。其實根本就不止一個js文件。

腦袋里靈光一閃，不會是用localStorage做了緩存吧？！趕緊看了下localStronge,還真是。。。。

心里一陣澎湃，這不是我之前就想實現(xiàn)的加載性能優(yōu)化的想法嗎！乖乖，我孤陋寡聞了，已經有前端團隊實現(xiàn)了代碼。

二、談談文件加載方面的優(yōu)化思路

通常，前端的資源文件加載優(yōu)化，就是在文件不修改迭代的情況下，盡可能多地利用緩存，避免多次下載同樣的文件。

一般的做法就是盡量延長資源的有效期，也就是設置 Cache-Control里的max-age，使頁面資源請求的返回碼為304，讓瀏覽器直接使用本地緩存。

雖然pc端的協(xié)商緩存（304）很快，但手機端因為網絡原因，協(xié)商緩存的效果就沒pc端那么好了。而且，手機會經常清除本地緩存，所以文件緩存的時間也不會很長。

這個時候，localStorage就派上用場了。

localStorage相比cookie，可以緩存大體積的數(shù)據，而且是永久有效。所以，如果把js資源和css資源存儲在localStorage中，則可以省去發(fā)送http請求所消耗的時間，大大提高用戶的瀏覽體驗。

三、用localStorage做資源緩存需要解決的問題

3.1 版本更新機制

只要一個項目還在迭代開發(fā)，就難以避免需要更新資源文件。

普通的資源請求，可以根據

文件名+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緩存，還是重新發(fā)起請求，下載最新的資源文件。

3.4 存在XSS安全隱患

localStorage中的信息，客戶端是可以任意修改的。如果哪個黑客想練手一下，可以任意注入js代碼。那么，在頁面刷新的時候，注入的代碼也將會被執(zhí)行。

四、微信的做法解析

4.1 版本標識

以__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節(jié)點的src屬性，即可完成加載。

微信判斷該版本是否最新，就是用該value值與后臺輸出的配置信息進行比較，最后得出是否更新的結果。

如果value值與配置信息一致，則使用緩存。否則，重新發(fā)起請求加載。

4.2 腳手架

可以看出，微信使用的是自己開發(fā)的腳手架moon.js，在這個網頁中的實際文件名是moon32ebc4.js。

因為是混淆過變量名的文件，所以要看出具體代碼的走向，有點費勁，這里就不做分析了。

4.3 資源配置信息

因為腳手架moon.js需要資源配置信息才能正常工作，所以配置信息一定會在moon.js之前輸出。

依次查看moon.js之前的script標簽，發(fā)現(xiàn)了window.moon_map這個json對象。

利用控制臺輸出該變量查看信息如下：

看到這里，可以明確一個點：這就是更新機制所必備的資源配置信息表了。

而且，可以看出，該配置信息json對象的key，就對應localStorage中的key。同理，value值也是一一對應。

4.4 XSS攻擊

此處是為了驗證微信的緩存機制是否存在XSS攻擊，看到這里的童鞋可千萬不要去做壞事。

我在一個js緩存代碼中，插入alert("hehe");，看頁面刷新的時候，是否會出現(xiàn)該彈窗，來驗證是否存在攻擊漏洞。

刷新頁面后，結果如下圖：

可以看出，微信也沒有解決這類問題。所以，這種緩存機制，還是有先天不足的。

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緩存有其用武之地，但不是萬能的。需要注意以上提及的坑。

可以應用的場景我歸納為以下幾點：

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

首屏渲染需要的css，需要按常規(guī)方式輸出，因為SEO需要，不然爬蟲爬取頁面的時候，頁面效果會很不好。而非首屏的css，則可以用LS緩存，減少資源下載時間。

2. 展示類、動畫類等非業(yè)務主要邏輯的代碼，可以做LS緩存。

這樣，可以一定程度上避免業(yè)務層的安全漏洞。當然，前端再怎么做防護都是一層薄紙。重要的，還是后臺接口要做好安全保護。

3. 移動端可以做LS緩存。PC端做LS緩存，起到的優(yōu)化作用不大。

以上就是本文的全部內容，希望本文的內容對大家的學習或者工作能帶來一定的幫助，同時也希望多多支持億速云！