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

1、發現黑科技的原由

 今天在微信公衆號看到一篇技術博文，想用印象筆記收藏，因此發送了文章連接到pc上。而後習慣性地打開控制檯，看看源碼，想了解下最近微信用了什麼新技術。
 呵呵，如下勾起了我偵探的慾望。頁面加載後的異常點就是隻加載了一個js，以下圖所示：

 我很詫異，爲何已經開啓了Disable cache，js只加載了一個，並且體積這麼小。接着，我按住Ctrl+O進行資源文件查找，發現我被「忽悠」了。其實根本就不止一個js文件。

 腦殼裏靈光一閃，不會是用localStorage作了緩存吧？！趕忙看了下localStronge,還真是。。。。

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

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

 一般，前端的資源文件加載優化，就是在文件不修改迭代的狀況下，儘量多地利用緩存，避免屢次下載一樣的文件。
 通常的作法就是儘可能延長資源的有效期，也就是設置 Cache-Control裏的max-age，使頁面資源請求的返回碼爲304，讓瀏覽器直接使用本地緩存。
 雖然pc端的協商緩存（304）很快，但手機端由於網絡緣由，協商緩存的效果就沒pc端那麼好了。並且，手機會常常清除本地緩存，因此文件緩存的時間也不會很長。
 這個時候，localStorage就派上用場了。
 localStorage相比cookie，能夠緩存大致積的數據，並且是永久有效。因此，若是把js資源和css資源存儲在localStorage中，則能夠省去發送http請求所消耗的時間，大大提升用戶的瀏覽體驗。

3、用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、微信的作法解析

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。

5、結論

 localStorage緩存有其用武之地，但不是萬能的。須要注意以上說起的坑。
 能夠應用的場景我概括爲如下幾點：

  1. 非首屏渲染須要的css文件，能夠作LS緩存。

  首屏渲染須要的css，須要按常規方式輸出，由於SEO須要，否則爬蟲爬取頁面的時候，頁面效果會很很差。而非首屏的css，則能夠用LS緩存，減小資源下載時間。

  2. 展現類、動畫類等非業務主要邏輯的代碼，能夠作LS緩存。

  這樣，能夠必定程度上避免業務層的安全漏洞。固然，前端再怎麼作防禦都是一層薄紙。重要的，仍是後臺接口要作好安全保護。

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

6、番外

 有興趣的童鞋，還能夠看看知乎上大神們的討論，靜態資源（JS/CSS）存儲在localStorage有什麼缺點？爲何沒有被普遍應用？ - 互聯網 - 知乎
 另外，騰訊網的前端，在gitHub上有分享其MT 模塊管理框架，能夠看看具體的實現邏輯。
 最後，上一個栗子 —— 線上實例demo：webapp模塊化開發體系

 
簡書入口：www.jianshu.com/p/0fa0bf842bbb