轉(zhuǎn)載： http://limu.iteye.com/blog/755628
WPO(Web Performance Optimization , 網(wǎng)站性能優(yōu)化)近年來(lái)發(fā)展迅猛,期間YAHOO做出了重要貢獻(xiàn),YSlow的14條軍規(guī),20條最佳實(shí)踐影響深遠(yuǎn).去年Steve出版了第二本書(shū),Velocity大會(huì)也從2008開(kāi)到了2010.各個(gè)網(wǎng)站越來(lái)越重視速度,也有越來(lái)越多開(kāi)發(fā)者投入到WPO大業(yè)當(dāng)中.
在一次內(nèi)部分享中,整理了Yahoo Rules之外WPO的一些新進(jìn)展,大雜燴只是表象,那多是些別人做了的事情.重要的是在當(dāng)前時(shí)期,WPO逐漸進(jìn)入精耕細(xì)作的階段,在放之四海而皆準(zhǔn)的Rules被巨頭們提煉的七七八八之后.如何結(jié)合自己的應(yīng)用做最合適的優(yōu)化?遵循怎樣的思路,借助什么樣的工具去發(fā)現(xiàn)問(wèn)題,解決問(wèn)題?從這些新進(jìn)展中可以看出些端倪,在這里記錄一下.PPT在此,前21頁(yè)可以飛速掠過(guò),字體很杯具丫 (>_<)!
先說(shuō)思路:
YAHOO將Rules分成Content, Server, Cookie, CSS, JavaScript, Images, Mobile七類(lèi)是一種思路,讓開(kāi)發(fā)這快速定位到技能相關(guān)類(lèi)別.但是作為前端很可能要同時(shí)關(guān)注其中N個(gè)類(lèi)別.我們從另一個(gè)角度來(lái)看,網(wǎng)頁(yè)的展現(xiàn)有l(wèi)oading階段和render階段,render階段還是js,css,html三類(lèi)前端技術(shù),而在loading階段我們則需要關(guān)注http:減少http數(shù),優(yōu)化單個(gè)http的各個(gè)時(shí)間段,減少收發(fā)數(shù)據(jù)量,有效利用緩存等等,如下圖:
我們要先分析哪個(gè)部分慢了,哪里可能有提升空間,再著手改進(jìn).
再說(shuō)工具:
借助四類(lèi)方面的四類(lèi)工具幫助,更好的覆蓋前面優(yōu)化思路中的各個(gè)方面:
一.數(shù)據(jù)包嗅探工具:
這類(lèi)工具關(guān)注HTTP的方方面面細(xì)節(jié),分析請(qǐng)求間順序和單個(gè)http請(qǐng)求各個(gè)階段的耗時(shí)情況.
典型的如HttpWatch,Firebug的網(wǎng)絡(luò)頁(yè)簽,Fiddler等等.
另外還有一些全網(wǎng)監(jiān)控工具可以獲得各個(gè)地點(diǎn)監(jiān)測(cè)結(jié)果,如基調(diào)網(wǎng)絡(luò).
二.運(yùn)行時(shí)分析工具:
這類(lèi)工具則更關(guān)注運(yùn)行時(shí)JS的性能,各階段內(nèi)存和CPU的使用情況.
典型的如Firebug Profiler, Page Speed Activity一些高階的性能探測(cè)工具如Web Page Test, Dynatrace Ajax也都在監(jiān)控這些方面.
三.內(nèi)存結(jié)構(gòu)分析工具:
這類(lèi)的工具還在起步階段,隨著復(fù)雜Web2.0應(yīng)用的內(nèi)存泄露風(fēng)險(xiǎn),隨著手持設(shè)備上web app的發(fā)展,內(nèi)存使用再次變得重要起來(lái).
主要的IE內(nèi)存泄露的診斷工具Drip, sIEve, JS Memory Leaks Detector.
而在內(nèi)存快照方面Mozilla有其研究,但Chrome先轉(zhuǎn)化為了實(shí)踐.在Chrome自帶的開(kāi)發(fā)者工具中有一個(gè)"Profiles"頁(yè)簽,其中一項(xiàng)功能"Heap Snapshots"提供內(nèi)存快照,可以從兩個(gè)角度觀察內(nèi)存結(jié)構(gòu),可以多次快照比較差異.在前天的Chrome推介會(huì)上,Google的同學(xué)也說(shuō)這個(gè)工具還不夠強(qiáng)壯.但是我們?nèi)匀豢梢杂煤盟?回想在firebug之前刪代碼+alert是定位問(wèn)題的不二法門(mén),在內(nèi)存分析工具不夠健壯時(shí),我們只要多做些test頁(yè),單獨(dú)測(cè)試我們懷疑的關(guān)注的部分就好了.
四.瀏覽器內(nèi)各子系統(tǒng)性能開(kāi)銷(xiāo)分析工具:
我們常說(shuō)"二八"原則,如果瀏覽器大量精力耗費(fèi)在了Dom訪問(wèn)中,而我們卻在優(yōu)化一個(gè)僅2%開(kāi)銷(xiāo)的算法上,顯然是沒(méi)有抓住主要矛盾.
在這方面IE一直走在前面, 最近的一篇文章剛剛披露了IE各個(gè)子系統(tǒng)和若干網(wǎng)頁(yè)展現(xiàn)時(shí)各子系統(tǒng)開(kāi)銷(xiāo)分析 ,借助這類(lèi)工具能更好的結(jié)合自身應(yīng)用找到優(yōu)化關(guān)鍵點(diǎn).
巨頭們精耕細(xì)作的實(shí)踐案例二則:
Flush the Buffer Early 是Yahoo Rules之一.推薦的Flush時(shí)機(jī)是</head>之后,可以讓瀏覽器先行下載<head>中引入的css,js,如下:
Php代碼
- ...<!--css,js-->
- </head>
- <?php flush ();?>
- <body>
- ...<!--content-->
Yahoo 首頁(yè)希望能多次flush,首次flush就能展現(xiàn)搜索框,于是經(jīng)過(guò)測(cè)試得出結(jié)論:
Php代碼
- <body>
- <divid= "page" >
- <divid= "search" ></div>
- <?php flush ();?><!-- flush 失敗,#search沒(méi)有提前渲染-->
- <divid= "main" ></div>
- </div>
- </body>
經(jīng)過(guò)測(cè)試,#page沒(méi)有關(guān)閉,阻礙了flush內(nèi)容的提前渲染,所以最新的YUI中布局都去掉了全局的<div>wrapper
Php代碼
- <body>
- <divid= "search" ></div>
- <?php flush ();?><!-- flush 成功,#search提前渲染-->
- <divid= "main" ></div>
- </body>
Facebook 頁(yè)面更復(fù)雜,且高度定制化.他們從另一個(gè)角度解決這個(gè)問(wèn)題,更加深入的使用flush.
Php代碼
- <body>
- <divid= "layout" >
- <divid= "mod_profile" ></div>
- <divid= "mod_photo" ></div>
- <divid= "mod_friend" ></div>
- </div>
- <?php flush ();?><!--首先 Flush 頁(yè)面布局-->
- <script>
- //htmlstringformod_photo
- </script>
- <?php flush ();?><!-- Flush #mod_photo的內(nèi)容-->
- <script>
- //htmlstringformod_profile
- </script>
- <?php flush ();?><!-- Flush #mod_profile的內(nèi)容-->
- <script>
- //htmlstringformod_friend
- </script>
- </body>
首先f(wàn)lush出整個(gè)頁(yè)面布局,然后服務(wù)器端并發(fā)請(qǐng)求好友數(shù)據(jù),個(gè)人信息,相冊(cè)等等模塊,哪一部分先返回就先將哪一部分作為一個(gè)單獨(dú)的<script>塊Flush出去,這就是Fackebook近來(lái)最主要的優(yōu)化技術(shù)BigPipe,使用這種技術(shù)使得Facebook的平均訪問(wèn)速度提高一倍(5s=>2.5s)
從這兩個(gè)例子可以看出,YAHOO要搜索框先看到,于是促成了布局調(diào)整,Facebook的頁(yè)面HTML內(nèi)容很多,生成慢,如果使用傳統(tǒng)Ajax會(huì)增加過(guò)多請(qǐng)求,于是通過(guò)Flush促成了動(dòng)態(tài)信息的combo -- BigPipe,這些都是在Rules基礎(chǔ)上,結(jié)合自身網(wǎng)站實(shí)際情況發(fā)展的很好的優(yōu)化實(shí)踐
淘寶廣告中的優(yōu)化實(shí)踐一則
Gzip Components 也是Yahoo Rules之一,而真正目的是減少收發(fā)數(shù)據(jù)量,那么在啟用了Gzip之后,進(jìn)一步提升壓縮效果,也可以更好的達(dá)到目標(biāo),我們知道壓縮的時(shí)候越多重復(fù)的內(nèi)容,壓縮比越高.
廣告json數(shù)據(jù)中,點(diǎn)擊地址是最長(zhǎng)的一塊,大概占到一半左右,包含:網(wǎng)站ID,廣告ID,廣告位ID等等字段,經(jīng)過(guò)一定的算法分段hash后輸出.
一次請(qǐng)求返回多條廣告,我們發(fā)現(xiàn)多條廣告之間雖然廣告ID不同,但網(wǎng)站ID,廣告位ID是一樣的,所以我們調(diào)整了字段順序,把這些PV級(jí)別的數(shù)據(jù)放在一處,這樣在hash后多條廣告的點(diǎn)擊地址當(dāng)中就多了大段的重復(fù)字符串.經(jīng)過(guò)測(cè)試,Gzip后的整體輸出數(shù)據(jù)量降低了三分之一.
可以看出首要理清思路,認(rèn)準(zhǔn)優(yōu)化目標(biāo)而不是單純的匹配Rules追求YSlow高分.
有關(guān)Rules的破與立,不要讓規(guī)則束縛腳步
巨頭們是規(guī)則的制定者,但他們卻從不囿于規(guī)則當(dāng)中:
Put Scripts at the Bottom 腳本放在頁(yè)面底部,在DomReady中執(zhí)行JS是對(duì)前端開(kāi)發(fā)影響最深遠(yuǎn)的規(guī)則之一,而YAHOO,Facebook,MicroSoft卻分別用自己的方法解決JS放在底部帶來(lái)的可交互時(shí)間被拖后,初始化時(shí)間過(guò)長(zhǎng)等問(wèn)題(PPT 48頁(yè))
Douglas Crockford講eval is evil.而Google卻應(yīng)用eval做JS的增量更新,給出eval在各種瀏覽器中的性能測(cè)試,讓Google Map 20-25%的用戶(hù)獲得1.25s的速度提升(PPT 37頁(yè))
Steve Souders講要盡量不要使用iframe,而最近卻在twitter中為meboo推介的名為iframed js的跨域無(wú)阻塞異步腳本下載方案拍手稱(chēng)快(PPT 49頁(yè))
這些也是我反復(fù)強(qiáng)調(diào)捋順優(yōu)化思路,認(rèn)清優(yōu)化本質(zhì)的原因:
一.首先認(rèn)清楚規(guī)則帶來(lái)的好處.
二.然后不回避規(guī)則帶來(lái)的問(wèn)題,如果問(wèn)題嚴(yán)重嘗試解決它,守規(guī)則不是借口.
三.如果能獲得更大的好處,我們不妨違反某些規(guī)則,以退為進(jìn),用實(shí)測(cè)數(shù)據(jù)說(shuō)話.
跟隨清晰優(yōu)化思路解決實(shí)際工作中的問(wèn)題
最后再介紹兩則在優(yōu)化思路上的實(shí)踐:
BannerMaker 是我們使用Flash開(kāi)發(fā)的廣告牌設(shè)計(jì)和展現(xiàn)工具,沒(méi)有使用HTML,CSS,JS,相應(yīng)的規(guī)則就用不上.但思路是同樣的!我們的目標(biāo)依然是減少初始化負(fù)載,減少HTTP請(qǐng)求,充分利用緩存資源,等等.詳見(jiàn): BannerMaker2010+性能改進(jìn)路線圖 .
我們的有很多運(yùn)營(yíng)的同學(xué),進(jìn)行簡(jiǎn)單的HTML類(lèi)廣告牌制作,在諸多規(guī)則中,他們又要重點(diǎn)關(guān)注那些?有些技術(shù)不是他們專(zhuān)長(zhǎng),但是順著優(yōu)化的思路就能很好的跟大家解釋為什么要壓縮甚至合并圖片,為什么不要在廣告牌中為了一個(gè)效果引入一個(gè)類(lèi)庫(kù).詳見(jiàn): HTML廣告牌優(yōu)化(運(yùn)營(yíng)版)
更多文章、技術(shù)交流、商務(wù)合作、聯(lián)系博主
微信掃碼或搜索：z360901061
微信掃一掃加我為好友
QQ號(hào)聯(lián)系： 360901061
您的支持是博主寫(xiě)作最大的動(dòng)力，如果您喜歡我的文章，感覺(jué)我的文章對(duì)您有幫助，請(qǐng)用微信掃描下面二維碼支持博主2元、5元、10元、20元等您想捐的金額吧，狠狠點(diǎn)擊下面給點(diǎn)支持吧，站長(zhǎng)非常感激您！手機(jī)微信長(zhǎng)按不能支付解決辦法：請(qǐng)將微信支付二維碼保存到相冊(cè)，切換到微信，然后點(diǎn)擊微信右上角掃一掃功能，選擇支付二維碼完成支付。
【本文對(duì)您有幫助就好】元
