web前端性能優(yōu)化進(jìn)階路

　　Web前端性能優(yōu)化WPO，相信大多數前端同學(xué)都不會(huì )陌生，在各自所負責的站點(diǎn)頁(yè)面中，也都會(huì )或多或少的有過(guò)一定的技術(shù)實(shí)踐?？梢哉f(shuō)，這個(gè)領(lǐng)域并不缺乏成熟技術(shù)理論和技術(shù)牛人：例如Yahoo的web站點(diǎn)性能優(yōu)化黃金法則，以及大名鼎鼎的優(yōu)化大師Steve Souders。本文并非一篇討論性能優(yōu)化技術(shù)方法的文章，而更多的是對中文站搜索List頁(yè)面持續兩年多的前端性能優(yōu)化實(shí)踐的思路總結。希望對正在從事這個(gè)領(lǐng)域研究的前端同學(xué)能有所幫助。

　　簡(jiǎn)單的說(shuō)，我們的性能優(yōu)化實(shí)踐分為三個(gè)階段：初探期、立規期、創(chuàng )新期， 每個(gè)階段大概持續半年左右，有足夠的時(shí)間形成一些優(yōu)化思路的沉淀。

　　一：初探期

　　2010年底我們開(kāi)始接手搜索List頁(yè)面，這是中文站歷史最為悠久的頁(yè)面之一，當時(shí)它的生命體征正如它的年齡一樣，非常虛弱：當時(shí)的基調網(wǎng)絡(luò )監控顯示，頁(yè)面的完全加載的時(shí)間是16秒!作為以“快”為核心業(yè)務(wù)指標的搜索頁(yè)面，這個(gè)狀態(tài)顯然已是無(wú)法承擔重任了。

　　性能是一定要優(yōu)化的，但我們也面臨著(zhù)大多數前端同學(xué)所面臨的共性問(wèn)題 — 業(yè)務(wù)需求緊張，況且我們是剛剛接手這個(gè)業(yè)務(wù)，非常不熟悉，別說(shuō)是優(yōu)化了，就是做個(gè)小需求也都經(jīng)常出現線(xiàn)上故障。就是在這樣的情況下，我們開(kāi)始了搜索頁(yè)面的性能優(yōu)化之路，并且給自己定下了當時(shí)看起來(lái)非常難以實(shí)現的目標：在2011年年中前把全頁(yè)面加載時(shí)間降低到7秒以下。

　　我們很快成立了一個(gè)性能優(yōu)化小組，3-4個(gè)前端同學(xué)參與其中，一個(gè)人的力量畢竟有限，尤其是應對這樣一個(gè)歷史業(yè)務(wù)繁多的頁(yè)面。參與的同學(xué)多些，技術(shù)氛圍也相對濃烈，大家很全面的分解了目前頁(yè)面上出現的性能瓶頸，并分別領(lǐng)取了自己的優(yōu)化任務(wù)。

　　在這個(gè)階段里，我們基本是照葫蘆畫(huà)瓢，把雅虎性能優(yōu)化的那些法則與我們的頁(yè)面一一對照，完成了許多優(yōu)化點(diǎn)，例如：

　　小圖片的合并，形成CSS Sprite，并優(yōu)化圖片

　　模塊的異步加載

　　圖片的懶加載

　　CSS文件引用放在頁(yè)面頂部，JS文件引用放在頁(yè)面底部，并對代碼壓縮

　　縮小cookie體積

　　…

　　前人的技術(shù)理論果然是靠譜，經(jīng)過(guò)我們半年時(shí)間加班加點(diǎn)的性能優(yōu)化后，我們奇跡般的達成了優(yōu)化目標!(附性能曲線(xiàn)圖)

　　眾多優(yōu)化點(diǎn)中，對優(yōu)化效果貢獻最大的就是對圖片的處理，包括了CSS sprite的合并及圖片的懶加載，說(shuō)白了就是雅虎性能優(yōu)化法則的第一條：要盡量地減少HTTP請求。說(shuō)實(shí)話(huà)，CSS sprite合并這塊的體力活較多，但前端同學(xué)一定要引起重視，對頁(yè)面性能影響確實(shí)很大。

　　初探期優(yōu)化經(jīng)驗所得：

　　1、優(yōu)化前，廣泛地獲取該領(lǐng)域的各種優(yōu)化思路。有條件的同學(xué)可以參加下WPO領(lǐng)域的一些會(huì )議，比較推薦Velocity性能優(yōu)化大會(huì )。

　　2、 成立性能優(yōu)化組織，明確性能優(yōu)化目標。這一點(diǎn)非常重要：可量化的目標以及可持續跟蹤的優(yōu)化數據是性能優(yōu)化工作得以持續進(jìn)行的保障，同時(shí)也是源動(dòng)力!大家能持續這么長(cháng)時(shí)間迭代的進(jìn)行優(yōu)化工作，正是因為每個(gè)階段我們都有相應的性能優(yōu)化目標作為指引，并有志同道合的同學(xué)一起努力。

　　3、持續追蹤性能數據，要選擇合適的頁(yè)面性能測量工具，一旦選定后，不再更換，以保證歷史數據的可參照性。我們一直在使用基調網(wǎng)絡(luò )，不得不說(shuō)還是非常專(zhuān)業(yè)的，不過(guò)是收費工具。 給自家的測試工具也打個(gè)廣告吧，免費的測量工具-阿里測。國外的測量工具也挺多的，不過(guò)受網(wǎng)絡(luò )因素影響太大，數據抖動(dòng)大，不是很推薦使用。

　　4、性能優(yōu)化不僅僅是可以直接的提升用戶(hù)體驗，對參與其中的前端同學(xué)而言，也是快速熟悉業(yè)務(wù)的一種捷徑。更進(jìn)一步說(shuō)，可以作為技術(shù)驅動(dòng)業(yè)務(wù)的入口，因為優(yōu)化重構的過(guò)程中你更容易發(fā)現歷史業(yè)務(wù)的不合理之處，從而推動(dòng)業(yè)務(wù)方的改造，可以提升個(gè)人的技術(shù)影響力。

　　二、立規期

　　性能優(yōu)化工作并非一朝一夕的事，今天達成了目標，并不意味著(zhù)明天躺著(zhù)睡覺(jué)也能維持成果。相反，前端性能通常呈現出較高的反復性，這和新的業(yè)務(wù)需求有著(zhù)非常直接的關(guān)系，但更底層的原因通常是我們并未把性能優(yōu)化的規范給確定下來(lái)。2011年的下半年，我們并未在具體性能優(yōu)化技術(shù)點(diǎn)上投入更多的工作，而是做了性能優(yōu)化的“守道士”，不過(guò)這個(gè)“守”不是保守的“守”，而是以攻為守。

原文轉自：http://www.uml.org.cn/Test/201303192.asp