溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
極客頭條
原文 http://www.envicloud.cn/pages/news/200.html#4
主題 HTML
像往常瀏覽各大學習網站一樣，今天突然看到別人在知乎上提的一個問題：大公司里怎樣開發和部署前端代碼?
以前就關注過這個問題，今天重新看到就多查了點資料。下面，貼出我在網上看到的 張云龍(@前端農民工) 寫的文章。并且，我會在最后附上我本地實踐的例子。
這是一個非常有趣的 非主流前端領域，這個領域要探索的是如何用工程手段解決前端開發和部署優化的綜合問題，入行到現在一直在學習和實踐中。
在我的印象中，facebook是這個領域的鼻祖，有興趣、有×××的同學可以去看看facebook的頁面源代碼，體會一下什么叫工程化。
接下來，我想從原理展開講述，多圖，較長，希望能有耐心看完。
讓我們返璞歸真，從原始的前端開發講起。上圖是一個“可愛”的index.html頁面和它的樣式文件a.css，用文本編輯器寫代碼，無需編譯，本地預覽，確認OK，丟到服務器，等待用戶訪問。前端就是這么簡單，好好玩啊，門檻好低啊，分分鐘學會有木有！
然后我們訪問頁面，看到效果，再查看一下網絡請求，200！不錯，太完美了！那么，研發完成。。。。了么？
等等，這還沒完呢！對于大公司來說，那些變態的訪問量和性能指標，將會讓前端一點也不“好玩”。
看看那個a.css的請求吧，如果每次用戶訪問頁面都要加載，是不是很影響性能，很浪費帶寬啊，我們希望最好這樣：
利用304，讓瀏覽器使用本地緩存。但，這樣也就夠了嗎？不成！304叫協商緩存，這玩意還是要和服務器通信一次，我們的優化級別是變態級，所以必須徹底滅掉這個請求，變成這樣：
強制瀏覽器使用本地緩存（cache-control/expires），不要和服務器通信。好了，請求方面的優化已經達到變態級別，那問題來了：你都不讓瀏覽器發資源請求了，這緩存咋更新？
很好，相信有人想到了辦法： 通過更新頁面中引用的資源路徑，讓瀏覽器主動放棄緩存，加載新資源 。好像這樣：
下次上線，把鏈接地址改成新的版本，就更新資源了不是。OK，問題解決了么？！當然沒有！大公司的變態又來了，思考這種情況：
頁面引用了3個css，而某次上線只改了其中的a.css，如果所有鏈接都更新版本，就會導致b.css，c.css的緩存也失效，那豈不是又有浪費了？！
重新開啟變態模式，我們不難發現，要解決這種問題，必須讓url的修改與文件內容關聯，也就是說，只有文件內容變化，才會導致相應url的變更，從而實現文件級別的精確緩存控制。
什么東西與文件內容相關呢？我們會很自然的聯想到利用 數據摘要要算法 對文件求摘要信息，摘要信息與文件內容一一對應，就有了一種可以精確到單個文件粒度的緩存控制依據了。好了，我們把url改成帶摘要信息的：
這回再有文件修改，就只更新那個文件對應的url了，想到這里貌似很完美了。你覺得這就夠了么？大公司告訴你：圖樣圖森破！
唉~~~~，讓我喘口氣
現代互聯網企業，為了進一步提升網站性能，會把靜態資源和動態網頁分集群部署，靜態資源會被部署到CDN節點上，網頁中引用的資源也會變成對應的部署路徑：
好了，當我要更新靜態資源的時候，同時也會更新html中的引用吧，就好像這樣：
這次發布，同時改了頁面結構和樣式，也更新了靜態資源對應的url地址，現在要發布代碼上線，親愛的前端研發同學，你來告訴我，咱們是先上線頁面，還是先上線靜態資源？
在二者部署的時間間隔內，如果有用戶訪問頁面，就會在新的頁面結構中加載舊的資源，并且把這個舊版本的資源當做新版本緩存起來，其結果就是：用戶訪問到了一個樣式錯亂的頁面，除非手動刷新，否則在資源緩存過期之前，頁面會一直執行錯誤。
在部署時間間隔之內，有舊版本資源本地緩存的用戶訪問網站，由于請求的頁面是舊版本的，資源引用沒有改變，瀏覽器將直接使用本地緩存，這種情況下頁面展現正常；但沒有本地緩存或者緩存過期的用戶訪問網站，就會出現舊版本頁面加載新版本資源的情況，導致頁面執行錯誤，但當頁面完成部署，這部分用戶再次訪問頁面又會恢復正常了。 好的，上面一坨分析想說的就是：先部署誰都不成！都會導致部署過程中發生頁面錯亂的問題。所以，訪問量不大的項目，可以讓研發同學苦逼一把，等到半夜偷偷上線，先上靜態資源，再部署頁面，看起來問題少一些。
但是，大公司超變態，沒有這樣的“絕對低峰期”，只有“相對低峰期”。So，為了穩定的服務，還得繼續追求極致啊！
這個奇葩問題，起源于資源的 覆蓋式發布，用 待發布資源 覆蓋 已發布資源，就有這種問題。解決它也好辦，就是實現 非覆蓋式發布。
看上圖，用文件的摘要信息來對資源文件進行重命名，把摘要信息放到資源文件發布路徑中，這樣，內容有修改的資源就變成了一個新的文件發布到線上，不會覆蓋已有的資源文件。上線過程中，先全量部署靜態資源，再灰度部署頁面，整個問題就比較完美的解決了。
所以，大公司的靜態資源優化方案，基本上要實現這么幾個東西：
配置超長時間的本地緩存 —— 節省帶寬，提高性能
采用內容摘要作為緩存更新依據 —— 精確的緩存控制
靜態資源CDN部署 —— 優化網絡請求
更資源發布路徑實現非覆蓋式發布 —— 平滑升級
全套做下來，就是相對比較完整的靜態資源緩存控制方案了，而且，還要注意的是，靜態資源的緩存控制要求在 前端所有靜態資源加載的位置都要做這樣的處理 。是的，所有！什么js、css自不必說，還要包括js、css文件中引用的資源路徑，由于涉及到摘要信息，引用資源的摘要信息也會引起引用文件本身的內容改變，從而形成級聯的摘要變化，大概示意圖就是：
好了，目前我們快速的學習了一下前端工程中關于靜態資源緩存要面臨的優化和部署問題，新的問題又來了：這讓工程師怎么寫碼啊！！！
要解釋優化與工程的結合處理思路，又會扯出一堆有關模塊化開發、資源加載、請求合并、前端框架等等的工程問題，以上只是開了個頭，解決方案才是精髓，但要說的太多太多，有空再慢慢展開吧。
總之，前端性能優化絕逼是一個工程問題！
以上不是我YY的，可以觀察 百度 或者 facebook 的頁面以及靜態資源源代碼，查看它們的資源引用路徑處理，以及網絡請中靜態資源的緩存控制部分。再次贊嘆facebook的前端工程建設水平，跪舔了。
建議前端工程師多多關注前端工程領域，也許有人會覺得自己的產品很小，不用這么變態，但很有可能說不定某天你就需要做出這樣的改變了。而且，如果我們能把事情做得更極致，為什么不去做呢？
另外，也不要覺得這些是運維或者后端工程師要解決的問題。如果由其他角色來解決， 大家總是把自己不關心的問題丟給別人 ，那么前端工程師的開發過程將受到極大的限制，這種情況甚至在某些大公司都不少見！
媽媽，我再也不玩前端了。。。。5555
業界實踐
Assets Pipeline
Rails中的Assets Pipeline完成了以上所說的優化細節，對整個靜態資源的管理上的設計思考也是如此，了解rails的人也可以把此答案當做是對rails中assets pipeline設計原理的分析。
rails通過把靜態資源變成erb模板文件，然后加入<%= asset_path ‘p_w_picpath.png’ %>，上線前預編譯完成處理，fis的實現思路跟這個幾乎完全一樣，但我們當初確實不知道有rails的這套方案存在。
相關資料：
英文版：http://guides.rubyonrails.org/asset_pipeline.html
中文版：http://guides.ruby-china.org/asset_pipeline.html
FIS的解決方案
用 F.I.S 包裝了一個小工具，完整實現整個回答所說的最佳部署方案，并提供了源碼對照，可以感受一下項目源碼和部署代碼的對照。
源碼項目：https://github.com/fouber/static-resource-digest-project
部署項目：https://github.com/fouber/static-resource-digest-project-release
部署項目可以理解為線上發布后的結果，可以在部署項目里查看所有資源引用的md5化處理。
這個示例也可以用于和assets pipeline做比較。fis沒有assets的目錄規范約束，而且可以以獨立工具的方式組合各種前端開發語言（coffee、less、sass/scss、stylus、markdown、jade、ejs、handlebars等等你能想到的），并與其他后端開發語言結合。
assets pipeline的設計思想值得獨立成工具用于前端工程，fis就當做這樣的一個選擇吧。
按照上文提到的FIS的解決方案，我本地嘗試了一下，確實使用起來非常快捷。
隨便準備一個項目（附我自己新建的測試項目）
項目結構：
屏幕快照 2016-07-08 13.17.04.png
index.html:
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <link rel="stylesheet" href="./css/index.css"> </head> <body> <h2>Test</h2> <img src="./p_w_picpaths/test.jpg" alt="pic test" class="img"> <ul class="js-ul"> <li class="dn js-li"></li> </ul> <script src="./js/jquery-1.12.0.min.js"></script> <script src="./js/index.js"></script> </body> </html>
index.js:
$(function(){ //數據源 var data = ["hello A","hello B","hello C"]; //構造列表 var $nodeArray = []; $.each(data,function(index,item){ var $node = $(".js-li").clone().removeClass("dn"); $node.html(item); $nodeArray.push($node[0].outerHTML);
}); //綁定頁面 $(".js-ul").html($nodeArray.join(""));
});配置環境：
1.安裝nodejs 2.npm install -g rsd
打包部署項目
1.命令行通過cd命令進入項目所在根目錄 2.在項目根目錄下創建一個空的 fis-conf.js文件 3.命令行中執行 rsd release --md5 --dest ../output （PS:../output是最終打包生成的文件所在的目錄，可以自己隨意指定）
打包效果
按照上面的步驟，就可以得到最終生成的文件，現在再來看看項目結構以及index.html代碼
屏幕快照 2016-07-08 13.25.32.png
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <link rel="stylesheet" href="/css/index_fd3dde4.css"> </head> <body> <h2>Test</h2> <img src="/p_w_picpaths/test_24c18dd.jpg" alt="pic test" class="img"> <ul class="js-ul"> <li class="dn js-li"></li> </ul> <script src="/js/jquery-1.12.0.min_cbb11b5.js"></script> <script src="/js/index_62d2fd0.js"></script> </body> </html>
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
