一、發現黑科技的起因

創新互聯公司于2013年創立，公司自成立以來始終致力于為企業提供官網建設、移動互聯網業務開發（微信小程序定制開發、手機網站建設、手機APP定制開發等），并且包含互聯網基礎服務（域名、主機服務、企業郵箱、網絡營銷等）應用服務；以先進完善的建站體系及不斷開拓創新的精神理念，幫助企業客戶實現互聯網業務，嚴格把控項目進度與質量監控加上過硬的技術實力獲得客戶的一致贊譽。

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

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

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

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

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

二、談談文件加載方面的優化思路

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

一般的做法就是盡量延長資源的有效期，也就是設置 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 版本標識

以__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對象。

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

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

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

4.4 XSS攻擊

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

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

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

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

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，需要按常規方式輸出，因為SEO需要，不然爬蟲爬取頁面的時候，頁面效果會很不好。而非首屏的css，則可以用LS緩存，減少資源下載時間。

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

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

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

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

網站欄目：localStorage的黑科技-js和css緩存機制
網址分享：http://m.2m8n56k.cn/article0/pjedio.html

成都網站建設公司_創新互聯，為您提供定制網站、面包屑導航、網站設計、域名注冊、網站制作、動態網站

廣告

聲明：本網站發布的內容（圖片、視頻和文字）以用戶投稿、用戶轉載內容為主，如果涉及侵權請盡快告知，我們將會在第一時間刪除。文章觀點不代表本網站立場，如需處理請聯系客服。電話：028-86922220；郵箱：[email protected]。內容未經允許不得轉載，或轉載時需注明來源： 創新互聯