互聯網 - 大數據

一、發現黑科技的起因

 今天在微信公眾號看到一篇技術博文，想用印象筆記收藏，所以發送了文章鏈接到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