Web前端性能優(yōu)化進階路
Web前端性能優(yōu)化WPO，相信大多數(shù)前端同學(xué)都不會陌生，在各自所負責(zé)的站點頁面中，也都會或多或少的有過一定的技術(shù)實踐?？梢哉f，這個領(lǐng)域并不缺乏成熟技術(shù)理論和技術(shù)牛人：例如Yahoo的web站點性能優(yōu)化黃金法則，以及大名鼎鼎的優(yōu)化大師Steve Souders。本文并非一篇討論性能優(yōu)化技術(shù)方法的文章，而更多的是對中文站搜索List頁面持續(xù)兩年多的前端性能優(yōu)化實踐的思路總結(jié)。希望對正在從事這個領(lǐng)域研究的前端同學(xué)能有所幫助。
簡單的說，我們的性能優(yōu)化實踐分為三個階段：初探期、立規(guī)期、創(chuàng)新期， 每個階段大概持續(xù)半年左右，有足夠的時間形成一些優(yōu)化思路的沉淀。
一：初探期
2010年底我們開始接手搜索List頁面，這是中文站歷史最為悠久的頁面之一，當(dāng)時它的生命體征正如它的年齡一樣，非常虛弱：當(dāng)時的基調(diào)網(wǎng)絡(luò)監(jiān)控顯示，頁面的完全加載的時間是16秒！作為以“快”為核心業(yè)務(wù)指標(biāo)的搜索頁面，這個狀態(tài)顯然已是無法承擔(dān)重任了。
性能是一定要優(yōu)化的，但我們也面臨著大多數(shù)前端同學(xué)所面臨的共性問題 — 業(yè)務(wù)需求緊張，況且我們是剛剛接手這個業(yè)務(wù)，非常不熟悉，別說是優(yōu)化了，就是做個小需求也都經(jīng)常出現(xiàn)線上故障。就是在這樣的情況下，我們開始了搜索頁面的性能優(yōu)化之路，并且給自己定下了當(dāng)時看起來非常難以實現(xiàn)的目標(biāo)：在2011年年中前把全頁面加載時間降低到7秒以下。
我們很快成立了一個性能優(yōu)化小組，3-4個前端同學(xué)參與其中，一個人的力量畢竟有限，尤其是應(yīng)對這樣一個歷史業(yè)務(wù)繁多的頁面。參與的同學(xué)多些，技術(shù)氛圍也相對濃烈，大家很全面的分解了目前頁面上出現(xiàn)的性能瓶頸，并分別領(lǐng)取了自己的優(yōu)化任務(wù)。
在這個階段里，我們基本是照葫蘆畫瓢，把雅虎性能優(yōu)化的那些法則與我們的頁面一一對照，完成了許多優(yōu)化點，例如：
●小圖片的合并，形成CSS Sprite，并優(yōu)化圖片
●模塊的異步加載
●圖片的懶加載
●CSS文件引用放在頁面頂部，JS文件引用放在頁面底部，并對代碼壓縮
●縮小cookie體積
●…
前人的技術(shù)理論果然是靠譜，經(jīng)過我們半年時間加班加點的性能優(yōu)化后，我們奇跡般的達成了優(yōu)化目標(biāo)！（附性能曲線圖）
眾多優(yōu)化點中，對優(yōu)化效果貢獻***的就是對圖片的處理，包括了CSS sprite的合并及圖片的懶加載，說白了就是雅虎性能優(yōu)化法則的***條：要盡量地減少HTTP請求。說實話，CSS sprite合并這塊的體力活較多，但前端同學(xué)一定要引起重視，對頁面性能影響確實很大。
初探期優(yōu)化經(jīng)驗所得：
1、優(yōu)化前，廣泛地獲取該領(lǐng)域的各種優(yōu)化思路。有條件的同學(xué)可以參加下WPO領(lǐng)域的一些會議，比較推薦Velocity性能優(yōu)化大會。
2、成立性能優(yōu)化組織，明確性能優(yōu)化目標(biāo)。
這一點非常重要：可量化的目標(biāo)以及可持續(xù)跟蹤的優(yōu)化數(shù)據(jù)是性能優(yōu)化工作得以持續(xù)進行的保障，同時也是源動力！大家能持續(xù)這么長時間迭代的進行優(yōu)化工作，正是因為每個階段我們都有相應(yīng)的性能優(yōu)化目標(biāo)作為指引，并有志同道合的同學(xué)一起努力。
3、持續(xù)追蹤性能數(shù)據(jù)，要選擇合適的頁面性能測量工具，一旦選定后，不再更換，以保證歷史數(shù)據(jù)的可參照性。
我們一直在使用基調(diào)網(wǎng)絡(luò)，不得不說還是非常專業(yè)的，不過是收費工具。 給自家的測試工具也打個廣告吧，免費的測量工具–阿里測。國外的測量工具也挺多的，不過受網(wǎng)絡(luò)因素影響太大，數(shù)據(jù)抖動大，不是很推薦使用。
4、性能優(yōu)化不僅僅是可以直接的提升用戶體驗，對參與其中的前端同學(xué)而言，也是快速熟悉業(yè)務(wù)的一種捷徑。更進一步說，可以作為技術(shù)驅(qū)動業(yè)務(wù)的入口，因為優(yōu)化重構(gòu)的過程中你更容易發(fā)現(xiàn)歷史業(yè)務(wù)的不合理之處，從而推動業(yè)務(wù)方的改造，可以提升個人的技術(shù)影響力。
二、立規(guī)期
性能優(yōu)化工作并非一朝一夕的事，今天達成了目標(biāo)，并不意味著明天躺著睡覺也能維持成果。相反，前端性能通常呈現(xiàn)出較高的反復(fù)性，這和新的業(yè)務(wù)需求有著非常直接的關(guān)系，但更底層的原因通常是我們并未把性能優(yōu)化的規(guī)范給確定下來。2011年的下半年，我們并未在具體性能優(yōu)化技術(shù)點上投入更多的工作，而是做了性能優(yōu)化的“守道士”，不過這個“守”不是保守的“守”，而是以攻為守。
一方面我們制定了針對性能優(yōu)化前端代碼規(guī)范，其中最重要的是對頁面圖片資源的管理規(guī)范，納入到SVN管理，提高新圖片文件添加的成本。
另一方面我們建立了“性能聯(lián)盟”：性能優(yōu)化不僅僅是前端同學(xué)單方面就能夠保證的，更需要產(chǎn)品經(jīng)理、設(shè)計師、Java開發(fā)同學(xué)的支持和配合。在這一點上我們做了很多工作，當(dāng)然更多的是溝通和意識的影響，讓大家形成一個共識：性能是最重要的業(yè)務(wù)功能點！在平時的業(yè)務(wù)需求中，一定要從性能的角度考慮問題，有理有據(jù)的拒絕掉一些有損于前端性能的業(yè)務(wù)需求。
經(jīng)過大家的努力，在這個階段，搜索頁面的性能一直維持在７秒鐘左右，長達半年的時間。
立規(guī)期優(yōu)化經(jīng)驗所得：
1、攻城難，守城更難。制訂優(yōu)化規(guī)范，并嚴格執(zhí)行，是優(yōu)化成果得以長期保持的必要保障。
2、性能優(yōu)化不是前端同學(xué)自己的事情，需要業(yè)務(wù)各合作方的共同認同和支持。性能是最重要的業(yè)務(wù)功能點！
3、前端同學(xué)要增強自己的技術(shù)判斷力，正確評估業(yè)務(wù)需求對性能的影響。同時要提升自身的溝通和影響力。
三、創(chuàng)新期
進入到2012年，隨著我們對搜索業(yè)務(wù)理解的逐步深入，我們已不滿足于在原有前端框架上的修修補補，而是有了更多的自信去徹底重寫整個搜索前端應(yīng)用框架。這也使得性能優(yōu)化工作進入到一個新的階段。
在這個階段，我們努力的核心目標(biāo)是：從應(yīng)用框架和工具的層面做性能優(yōu)化，讓性能優(yōu)化成為一件低成本的事，真正的做到 fast by default！
在搜索應(yīng)用框架jEngine的構(gòu)建過程中，我們將一年多的前端優(yōu)化實踐思路融合在其中，實現(xiàn)了對性能優(yōu)化友好的模塊注冊機制、BigRender優(yōu)化模式、<script>標(biāo)簽無阻塞加載等利用框架即可低成本實現(xiàn)優(yōu)化的模式的支持。同時jEngine應(yīng)用框架在模塊化、前端異常監(jiān)控方面也有著自己獨特的實現(xiàn)，感興趣的同學(xué)可以研究下。
簡單介紹下對性能友好的模塊注冊機制的實現(xiàn)：jEngine的模塊管理引入了“懶注冊”的機制，所有的頁面模塊被分為以下三種模塊：
一個模塊的是首屏加載還是延遲加載，和它本身的類實現(xiàn)沒有關(guān)系，只和模塊的注冊方式有關(guān)系。
如果他出現(xiàn)在首屏，就使用正常的模塊注冊方式：AppCore.register(“sw_mod_sn”, Searchweb.Business.Category);
如果非首屏模塊，需要頁面滾動加載，或是鼠標(biāo)事件觸發(fā)加載，那么它的注冊方式只需改成這樣：
通過這種的方式，可以低成本的改變頁面初始化過程中對頁面各模塊的加載方式，從而減少首屏加載的文件個數(shù)和JS執(zhí)行時間。
***這個階段，我們不僅形成了對性能友好的前端應(yīng)用框架jEngine，還完全重寫了搜索各業(yè)務(wù)模塊代碼，完成了從YUI到j(luò)Query基礎(chǔ)框架的升級，最終把頁面加載時間長期穩(wěn)定在4秒左右。
創(chuàng)新期優(yōu)化經(jīng)驗所得：
1、從架構(gòu)、框架上發(fā)力能夠降低性能優(yōu)化的后期維護成本。
2、技術(shù)思路上的創(chuàng)新是性能優(yōu)化持續(xù)進行的源動力。
3、性能優(yōu)化工作是提升前端同學(xué)技術(shù)能力水平的一個很好的切入點。
性能優(yōu)化領(lǐng)域一個是值得前端同學(xué)深入研究的領(lǐng)域，網(wǎng)站性能直接影響到用戶體驗和各項業(yè)務(wù)指標(biāo)。隨著移動互聯(lián)網(wǎng)的快速發(fā)展，這個領(lǐng)域的研究熱點也有向移動性能優(yōu)化轉(zhuǎn)向的趨勢，相信今后會有更多更精彩的技術(shù)出現(xiàn)。
