web前端性能優化進階路

發表于:2015-01-09來源:uml.org.cn作者:不詳點擊數: 標簽:
Web前端性能優化WPO,相信大多數前端同學都不會陌生,在各自所負責的站點頁面中,也都會或多或少的有過一定的技術實踐。

  Web前端性能優化WPO,相信大多數前端同學都不會陌生,在各自所負責的站點頁面中,也都會或多或少的有過一定的技術實踐??梢哉f,這個領域并不缺乏成熟技術理論和技術牛人:例如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年的下半年,我們并未在具體性能優化技術點上投入更多的工作,而是做了性能優化的“守道士”,不過這個“守”不是保守的“守”,而是以攻為守。

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

国产97人人超碰caoprom_尤物国产在线一区手机播放_精品国产一区二区三_色天使久久综合给合久久97