一辅搬、發(fā)現(xiàn)黑科技的起因
今天在微信公眾號看到一篇技術博文唯沮，想用印象筆記收藏，所以發(fā)送了文章鏈接到pc上堪遂。然后習慣性地打開控制臺介蛉，看看源碼，想了解下最近微信用了什么新技術溶褪。
?呵呵币旧，以下勾起了我偵探的欲望。頁面加載后的異常點就是只加載了一個js猿妈，如下圖所示：
我很詫異吹菱，為什么已經(jīng)開啟了Disable cache，js只加載了一個彭则，而且體積這么小鳍刷。接著，我按住Ctrl+O進行資源文件查找俯抖，發(fā)現(xiàn)我被“忽悠”了输瓜。其實根本就不止一個js文件。
腦袋里靈光一閃，不會是用localStorage做了緩存吧尤揣？搔啊！趕緊看了下localStronge,還真是。北戏。负芋。。
心里一陣澎湃嗜愈，這不是我之前就想實現(xiàn)的加載性能優(yōu)化的想法嗎旧蛾！乖乖，我孤陋寡聞了芝硬，已經(jīng)有前端團隊實現(xiàn)了代碼蚜点。
二、談談文件加載方面的優(yōu)化思路
通常拌阴，前端的資源文件加載優(yōu)化绍绘，就是在文件不修改迭代的情況下，盡可能多地利用緩存迟赃，避免多次下載同樣的文件陪拘。
?一般的做法就是盡量延長資源的有效期，也就是設置 Cache-Control里的max-age纤壁，使頁面資源請求的返回碼為304左刽，讓瀏覽器直接使用本地緩存。
?雖然pc端的協(xié)商緩存（304）很快酌媒，但手機端因為網(wǎng)絡原因欠痴，協(xié)商緩存的效果就沒pc端那么好了。而且秒咨，手機會經(jīng)常清除本地緩存喇辽，所以文件緩存的時間也不會很長。
?這個時候雨席，localStorage就派上用場了菩咨。
?localStorage相比cookie，可以緩存大體積的數(shù)據(jù)陡厘，而且是永久有效抽米。所以，如果把js資源和css資源存儲在localStorage中糙置，則可以省去發(fā)送http請求所消耗的時間云茸，大大提高用戶的瀏覽體驗。
三谤饭、用localStorage做資源緩存需要解決的問題
3.1 版本更新機制
只要一個項目還在迭代開發(fā)查辩，就難以避免需要更新資源文件胖笛。
?普通的資源請求，可以根據(jù)
?文件名+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 后臺輸出一份資源配置信息
因為需要前端做資源更新辟汰，所以后臺要輸出一份依據(jù)給前端做判斷用列敲，也就是需要一份資源配置信息。前端根據(jù)配置信息帖汞，進行匹配和比較戴而，最終決定 使用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刃唐，在這個網(wǎng)頁中的實際文件名是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)化作用不大绘趋。
六、番外
有興趣的童鞋颗管，還可以看看知乎上大神們的討論陷遮，靜態(tài)資源（JS/CSS）存儲在localStorage有什么缺點？為什么沒有被廣泛應用垦江？ - 互聯(lián)網(wǎng) - 知乎
?另外帽馋，騰訊網(wǎng)的前端，在gitHub上有分享其MT 模塊管理框架比吭，可以看看具體的實現(xiàn)邏輯绽族。
?最后，上一個栗子 —— 線上實例demo：webapp模塊化開發(fā)體系
喜歡我文章的朋友梗逮，掃描以下二維碼项秉，關注我的個人技術博客，我的技術文章會第一時間在博客上更新
點擊鏈接wall的個人博客
