每個(gè)參與過(guò)開(kāi)發(fā)企業(yè)級(jí) web 應(yīng)用的前端工程師或許都曾思考過(guò)前端性能優(yōu)化方面的問(wèn)題。我們有雅虎 14 條性能優(yōu)化原則，還有兩本很經(jīng)典的性能優(yōu)化指導(dǎo)書：《高性能網(wǎng)站建設(shè)指南》、《高性能網(wǎng)站建設(shè)進(jìn)階指南》。經(jīng)驗(yàn)豐富的工程師對(duì)于前端性能優(yōu)化方法耳濡目染，基本都能一一列舉出來(lái)。這些性能優(yōu)化原則大概是在 7 年前提出的，對(duì)于 web 性能優(yōu)化至今都有非常重要的指導(dǎo)意義。

　　然而，對(duì)于構(gòu)建大型 web 應(yīng)用的團(tuán)隊(duì)來(lái)說(shuō)，要堅(jiān)持貫徹這些優(yōu)化原則并不是一件十分容易的事。因?yàn)閮?yōu)化原則中很多要求與工程管理相違背，比如“把 css 放在頭部”和“把 js 放在尾部”這兩條原則，我們不能讓整個(gè)團(tuán)隊(duì)的工程師在寫樣式和腳本引用的時(shí)候都去修改同一份的頁(yè)面文件。這會(huì)嚴(yán)重影響團(tuán)隊(duì)成員間并行開(kāi)發(fā)的效率，尤其是在團(tuán)隊(duì)有版本管理的情況下，每天要花大量的時(shí)間進(jìn)行代碼修改合并，這項(xiàng)成本是難以接受的。因此在前端工程界，總會(huì)看到周期性的性能優(yōu)化工作，辛勤的前端工程師們每到月圓之夜就會(huì)傾巢出動(dòng)根據(jù)優(yōu)化原則做一次最佳實(shí)踐。

　　本文從一個(gè)全新的視角來(lái)思考 web 性能優(yōu)化與前端工程之間的關(guān)系，通過(guò)解讀百度前端集成解決方案小組（F.I.S）在打造高性能前端架構(gòu)并統(tǒng)一百度 40 多條前端產(chǎn)品線的過(guò)程中所經(jīng)歷的技術(shù)嘗試，揭示前端性能優(yōu)化在前端架構(gòu)及開(kāi)發(fā)工具設(shè)計(jì)層面的實(shí)現(xiàn)思路。

　　性能優(yōu)化原則及分類

　　筆者先假設(shè)本文的讀者是有前端開(kāi)發(fā)經(jīng)驗(yàn)的工程師，并對(duì)企業(yè)級(jí) web 應(yīng)用開(kāi)發(fā)及性能優(yōu)化有一定的思考。因此我不會(huì)重復(fù)介紹雅虎 14 條性能優(yōu)化原則，如果您沒(méi)有這些前續(xù)知識(shí)的，請(qǐng)移步這里來(lái)學(xué)習(xí)。

　　首先，我們把雅虎 14 條優(yōu)化原則，《高性能網(wǎng)站建設(shè)指南》以及《高性能網(wǎng)站建設(shè)進(jìn)階指南》中提到的優(yōu)化點(diǎn)做一次梳理，如果按照優(yōu)化方向分類可以得到這樣一張表格：　　

　　目前大多數(shù)前端團(tuán)隊(duì)可以利用 yui compressor 或者 google closure compiler 等壓縮工具很容易做到“精簡(jiǎn) Javascript ”這條原則，同樣的，也可以使用圖片壓縮工具對(duì)圖像進(jìn)行壓縮，實(shí)現(xiàn)“圖像優(yōu)化”原則，這兩條原則是對(duì)單個(gè)資源的處理，因此不會(huì)引起任何工程方面的問(wèn)題；很多團(tuán)隊(duì)也通過(guò)引入代碼校驗(yàn)流程來(lái)確保實(shí)現(xiàn)“避免 css 表達(dá)式”和“避免重定向”原則；目前絕大多數(shù)互聯(lián)網(wǎng)公司也已經(jīng)開(kāi)啟了服務(wù)端的 Gzip 壓縮，并使用 CDN 實(shí)現(xiàn)靜態(tài)資源的緩存和快速訪問(wèn)；一些技術(shù)實(shí)力雄厚的前端團(tuán)隊(duì)甚至研發(fā)出了自動(dòng) CSS Sprites 工具，解決了 CSS Sprites 在工程維護(hù)方面的難題。使用“查找 - 替換”思路，我們似乎也可以很好的實(shí)現(xiàn)“劃分主域”原則。

　　我們把以上這些已經(jīng)成熟應(yīng)用到實(shí)際生產(chǎn)中的優(yōu)化手段去除掉，留下那些還沒(méi)有很好實(shí)現(xiàn)的優(yōu)化原則，再來(lái)回顧一下之前的性能優(yōu)化分類:　　

　　誠(chéng)然，不可否認(rèn)現(xiàn)在有很多頂尖的前端團(tuán)隊(duì)可以將上述還剩下的優(yōu)化原則也都一一解決，但業(yè)界大多數(shù)團(tuán)隊(duì)都還沒(méi)能很好的解決這些問(wèn)題，因此接下來(lái)本文將就這些原則的解決方案做進(jìn)一步的分析與講解，從而為那些還沒(méi)有進(jìn)入前端工業(yè)化開(kāi)發(fā)的團(tuán)隊(duì)提供一些基礎(chǔ)技術(shù)建設(shè)意見(jiàn)，也借此機(jī)會(huì)與業(yè)界頂尖的前端團(tuán)隊(duì)在工業(yè)化工程化方向上交流一下彼此的心得。

　　靜態(tài)資源版本更新與緩存

　　如表格 2 所示，在“緩存利用”分類中保留了“添加 Expires 頭”和“配置 ETag ”兩項(xiàng)，或許有些人會(huì)質(zhì)疑，明明這兩項(xiàng)只要配置了服務(wù)器的相關(guān)選項(xiàng)就可以實(shí)現(xiàn)，為什么說(shuō)它們難以解決呢？確實(shí)，開(kāi)啟這兩項(xiàng)很容易，但開(kāi)啟了緩存后，我們的項(xiàng)目就開(kāi)始面臨另一個(gè)挑戰(zhàn)：如何更新這些緩存。

　　相信大多數(shù)團(tuán)隊(duì)也找到了類似的答案，它和《高性能網(wǎng)站建設(shè)指南》關(guān)于“添加 Expires 頭”所說(shuō)的原則一樣——修訂文件名。即：

　　思路沒(méi)錯(cuò)，但要怎么改變鏈接呢？變成什么樣的鏈接才能有效更新緩存，又能最大限度避免那些沒(méi)有修改過(guò)的文件緩存不失效呢？

　　先來(lái)看看現(xiàn)在一般前端團(tuán)隊(duì)的做法：

<script type="text/Javascript" src="a.js?t=20130825"></script>

it知識(shí)庫(kù)：前端工程與性能優(yōu)化，轉(zhuǎn)載需保留來(lái)源！

鄭重聲明：本文版權(quán)歸原作者所有，轉(zhuǎn)載文章僅為傳播更多信息之目的，如作者信息標(biāo)記有誤，請(qǐng)第一時(shí)間聯(lián)系我們修改或刪除，多謝。