一、發現黑科技的起因 今天在微信公眾號看到一篇技術博文，想用印象筆記收藏，所以發送了文章鏈接到pc上。然後習慣性地打開控制台，看看源碼，想瞭解下最近微信用了什麼新技術。 呵呵，以下勾起了我偵探的欲望。頁面載入後的異常點就是只載入了一個js，如下圖所示： 我很詫異，為什麼已經開啟了Disable ca ...
一、發現黑科技的起因
今天在微信公眾號看到一篇技術博文，想用印象筆記收藏，所以發送了文章鏈接到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緩存，起到的優化作用不大。
六、番外
有興趣的童鞋，還可以看看知乎上大神們的討論，靜態資源（JS/CSS）存儲在localStorage有什麼缺點？為什麼沒有被廣泛應用？ - 互聯網 - 知乎
另外，騰訊網的前端，在gitHub上有分享其MT 模塊管理框架，可以看看具體的實現邏輯。
最後，上一個慄子 —— 線上實例demo：webapp模塊化開發體系
簡書入口：www.jianshu.com/p/0fa0bf842bbb
