網(wǎng)站性能優(yōu)化!整理Aboutme網(wǎng)絡(luò)電視事業(yè)部開發(fā)工程師changyou52@/changyou52

常優(yōu)

/

大優(yōu)WebPerformance網(wǎng)站性能!

什么是網(wǎng)站性能

為什么要做性能優(yōu)化

誰(shuí)去做

怎么做

一點(diǎn)實(shí)踐Amazon：

慢0.1s=1%

的用戶放棄交易Yahoo!：

慢

0.4s=5-9%

的用戶放棄訪問[EXP.1]Google：

慢

0.5s=20%

的用戶放棄訪問10s0.1~1s自由瀏覽<0.1s立即發(fā)生1~5s瀏覽有阻礙5~8s損失50%10s損失99%8s5s1s0.1s時(shí)間用戶體驗(yàn)[EXP.2]什么是網(wǎng)站性能？What頁(yè)面快速系統(tǒng)伸縮自如服務(wù)穩(wěn)定可靠

為什么做

網(wǎng)

站性能優(yōu)化？Thepageis：an

application

withadataconnectiontoaserverWhy….誰(shuí)去做？Who前端工程師?

or

運(yùn)維工程師?分析&

評(píng)估Analysis/index.shtml下載HTML文檔時(shí)間4%…………….……..nocache下載HTML文檔時(shí)間/index.shtmlcache20%>70%結(jié)論Conclusion前端性能怎么做？減少HTTP請(qǐng)求！How預(yù)處理查詢DNS建立鏈接發(fā)送請(qǐng)求等待響應(yīng)返回?cái)?shù)據(jù)RTT(Round-TripTime)

服務(wù)器HTTP請(qǐng)求過程客戶端客戶端讀取cache處理數(shù)據(jù)渲染元素預(yù)處理查詢DNS建立鏈接發(fā)送請(qǐng)求等待響應(yīng)返回?cái)?shù)據(jù)處理數(shù)據(jù)渲染元素讀取cache讀取本地緩存數(shù)據(jù)查詢DNS預(yù)處理建立鏈接發(fā)送請(qǐng)求等待響應(yīng)返回?cái)?shù)據(jù)處理數(shù)據(jù)渲染元素讀取cache瀏覽器DNS系統(tǒng)DNSDNS服務(wù)器預(yù)處理查詢DNS建立鏈接發(fā)送請(qǐng)求等待響應(yīng)返回?cái)?shù)據(jù)處理數(shù)據(jù)渲染元素讀取cacheTCP/IP連接CDNHostUser-AgentMozilla/5.0Gecko/20101026Firefox/3.6.12Accepttext/html,application/xhtml+xml,application/xmlAccept-Languagezh-cn,zhAccept-Encodinggzip,deflateAccept-CharsetGB2312,utf-8Keep-Alive115Connectionkeep-aliveCookieALLYESID4=01A1BC8DCF97116F預(yù)處理查詢DNS建立鏈接發(fā)送請(qǐng)求等待響應(yīng)返回?cái)?shù)據(jù)處理數(shù)據(jù)渲染元素讀取cache發(fā)送header信息預(yù)處理查詢DNS建立鏈接發(fā)送請(qǐng)求等待響應(yīng)返回?cái)?shù)據(jù)處理數(shù)據(jù)渲染元素讀取cache服務(wù)器負(fù)載數(shù)據(jù)庫(kù)查詢服務(wù)端緩存預(yù)處理查詢DNS建立鏈接發(fā)送請(qǐng)求等待響應(yīng)返回?cái)?shù)據(jù)處理數(shù)據(jù)渲染元素讀取cache受帶寬影響

JS，CSS，HTML做gzip壓縮刪除js，css文件的注釋刪除無(wú)效的css緩存改動(dòng)不大的文件

緩存favicon.ico文件精簡(jiǎn)HTML

減少DOM元素優(yōu)化img文件

文件大小預(yù)處理查詢DNS建立鏈接發(fā)送請(qǐng)求等待響應(yīng)返回?cái)?shù)據(jù)處理數(shù)據(jù)渲染元素讀取cache

響應(yīng)304請(qǐng)求Cache-Controlcache-control:max-age=31536000cache-control:privatecache-control:no-cacheExpires

expires:Sat,04Dec201001:00:43GMT預(yù)處理查詢DNS建立鏈接發(fā)送請(qǐng)求等待響應(yīng)返回?cái)?shù)據(jù)處理數(shù)據(jù)渲染元素讀取cache不要對(duì)img進(jìn)行Gzip壓縮預(yù)處理查詢DNS建立鏈接發(fā)送請(qǐng)求等待響應(yīng)返回?cái)?shù)據(jù)處理數(shù)據(jù)渲染元素讀取cacheHTML

減少DOM

IMG注明：width，heightCSS

CSS放在頂部

避免@import

避免使用低效選擇符CSSJavaScript

script放在head內(nèi)？

JavaScript放在底部

算法，循環(huán)解析HTML，樣式計(jì)算，布局，DOM操作，JS解析怎么做？減少HTTP請(qǐng)求！

CSS,JS進(jìn)行合并

AjaxGET代替POST

CSS圖片地圖緩存How

Googlepagespeed

Yahoo!YslowMicrosoftFiddler2

GooglespeedtracerReferenceTools

Firebug一些實(shí)踐Practice2010.2cachenocacheTime:7.671Time:2.089首頁(yè)284.9K，整個(gè)網(wǎng)頁(yè)902.3K17個(gè)JS文件,74K5個(gè)Iframe,25K冷靜！發(fā)現(xiàn)問題解決問題改進(jìn)反饋問題執(zhí)行力進(jìn)化到下一階段任何一個(gè)好的產(chǎn)品都不是被設(shè)計(jì)出來的！1.精簡(jiǎn)HTML&JavascriptHTML去掉注釋，回車符，以及無(wú)效字節(jié)可節(jié)省

65K(28%）JavaScript利用JSMin/YUICompressor工具（每個(gè)JS文件可降低26%文件大?。?.合并JavaScript&CSS/jsca/js/pwin.js/jsca/js/template.js/library/column/2010/09/20/C28048/script/asian.js/nettv/Library/ibugu/ibugu_new/flash/js_flash_gateway.js/nettv/Library/ibugu/ibugu_new/js/changelights.js/nettv/Library/ibugu/js/calendar.js/nettv/Library/ibugu/js/changelights.js/nettv/Library/ibugu/js/jquery-1.3.2.min.js/nettv/Library/ibugu/js/lightbox.js/nettv/Library/ibugu/js/tagchange_new.js/nettv/Library/ibugu/js/change_flash.js/bmgad_wpu_cc.js/bmgad_wpu_show_check.js/bmgad_wpu_show_cntv.js/bnnr/alysxc.js/main/s?user=cntv|bugu|shouye_fubiao&db=cntv&border=0&local=yes&js=ie/jsca/css/style_controlbar.css/nettv/Library/ibugu/ibugu_new/css/common.css/nettv/Library/ibugu/ibugu_new/css/headfoot.css/nettv/Library/ibugu/ibugu_new/css/index.cssJavaScriptCSS(/p/minify/)Minify<scripttype="text/javascript”src="/nettv/Library/ibugu/js/jquery-1.3.2.min.js”></script><scripttype="text/javascript”src="/nettv/Library/ibugu/js/lightbox.js”></script><scripttype="text/javascript”src="/nettv/Library/ibugu/js/tagchange_new.js”</script><scripttype="text/javascript”src="/nettv/Library/ibugu/js/change_flash.js”></script><scripttype="text/javascript”src="/min/f=nettv/Library/ibugu/js/jquery-1.3.2.min.js,nettv/Library/ibugu/js/lightbox.js,nettv/Library/ibugu/js/tagchange_new.js,nettv/Library/ibugu/js/change_flash.js”>script>Copymin文件夾到網(wǎng)站目錄下，配置min/config.phpApache配置mod_Rewrite

或者使用g參數(shù)（需配置min/groupsConfig.php）Done！<tdwidth="13%"align="center"><imgwidth="16"height="15"src="/nettv/ibugu/Library/ibugu/C10003000015/images/icon_tv2.jpg"/></td>28X283.CSSsprites.no3{background:transparenturl(../images/no713.jpg);background-position:0-30px;width:15px;height:15px;}/寫入img：第一時(shí)間顯示logo圖和背景，避免空白和無(wú)背景<bodyonload=“if(document.images)newImage().src='/images/nav_logo8.png”>在img標(biāo)簽中指定尺寸：提升瀏覽器渲染效率<h1><atitle="GotoGoogleHome"href="/webhp?hl=en"id="logo">Google<imgwidth="164"height="106"alt=""src="/images/nav_logo.png"/></a></h1>預(yù)處理4.JavaScript放到底部，

CSS放到頂部CSS放到header中：避免白屏Javascript放置底部：避免阻塞下載JS，CSS寫在html內(nèi)？還是外部link？5.減少DNS查詢<iframewidth=“685”scrolling=“no”height=“90”src=“/main/s?user=cntv|bugu|shouye_changtong01&db=cntv&border=0&local=yes”marginwidth=“0”

marginheight="0"></iframe>廣告與頁(yè)面分離增加并行下載數(shù)提升整站下載時(shí)間/index.shtml(88%reduction)./jsca/templates/pwin_toolbar_banner.html(45%reduction)/jsca/templates/pwin_toolbar_text_unlogin.html(36%reduction)壓縮html文件，js文件，css文件?？蓽p少文件大小至少60%6.Gzip壓縮組件TYPESIZEGZIPURLdoc284.6K26.1K/index.shtmlJS57.2K19.7K/nettv/Library/ibugu/js/jquery-1.3.2.min.jsJS6.9K1.3K/nettv/Library/ibugu/js/tagchange_new.jsJS1.3K0.3K/nettv/Library/ibugu/js/changelights.jsJS5.5K1.6K/nettv/Library/ibugu/js/calendar.jsJS7.3K2.7K/Library/a2.jscss5.5K1.4K/nettv/Library/ibugu/ibugu_new/css/index.css7.添加Expires頭14個(gè)JS,CSS靜態(tài)文件緩存時(shí)間很短。Cache-Control：max-age=1800

/nettv/Library/ibugu/ibugu_new/css/index.css/jsca/css/style_controlbar.css/nettv/Library/ibugu/js/jquery-1.3.2.min.js/nettv/Library/ibugu/js/tagchange_new.js/nettv