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