11.15日(rì)音(yīn)訊,制(z✔←hì)作(zuò)門(mén)戶網站(zhàn)應更加注重前端性能π≠(néng)優化(huà)和(hé)規範。Web性能(néng)涉及的(de)←∞範圍太廣，但(dàn)一(yī)般web開(kāi)發者在程序上(s₽₩hàng)線以後很(hěn)多(duō)都(dōu)曾遇到(dào)過性能(₽✔¥÷néng)的(de)問(wèn)題。普遍表現(xià≠₹≥n)為(wèi)頁面速度開(kāi)始急劇(jù)變慢(màn)，正常訪問 ≈€(wèn)時(shí)間(jiān)變的(de)很(hěn)ε←長(cháng)，或則幹脆給你(nǐ)抛出異常錯(cuò)誤頁面。這(z$€↔hè)裡(lǐ)會(huì)涉及到(dào)很(hěn)多($₹duō)可(kě)能(néng)發生(shēng)的(d♣© ♣e)情況，舉例幾個(gè)最主要(yào)發生(shēng)的(de)情況∑♣ α：
*數(shù)據庫連接超過最大(dà)限制(zhì)，一(✘© yī)般表現(xiàn)為(wèi)程序的(d§≈π"e)連接池滿，拒絕了(le)與數(shù)∏<據庫的(de)連接。
*數(shù)據庫死鎖
*WebServer超過最大(dà)連接& 數(shù)（一(yī)般在虛拟主機(jī)上(shàn₽™∏g)才會(huì)限制(zhì)）
*內(nèi)存洩漏
*Http連接數(shù)太多(duō)↓•>，即訪問(wèn)量超過了(le)機(jī)器(qì)和(hé)軟λ± ®件(jiàn)設計(jì)正常所能(néng)提供的(d☆>e)服務
而今天分(fēn)享的(de)主要₹Ω(yào)是(shì)比較偏向前端
浏覽器(qì)請(qǐng)求和(hé)響應的(de)過程
第一(yī)步、浏覽器(qì)預處理(lǐ)
查詢Cache：讀(dú)取Cac> ε↑he或者發送304請(qǐng)求
第二步、查詢DNS
優化(huà)規則--減少(shǎo)DNS查找
DNS緩存
浏覽器(qì)DNS緩存計(jì)算(suàn)機(jī)D§₽NS緩存服務器(qì)DNS緩存（TTL）
使用(yòng)Keep-Aliv§♦£♣e特性
減少(shǎo)DNS查找
當客戶端的(de)DNS緩存為(wè↑£₽i)空(kōng)時(shí)，DNS查↑≈找的(de)數(shù)量與Web頁面中唯一(yī)主機→≈&×(jī)名的(de)數(shù)量相(xiàδ™ng)等。減少(shǎo)唯一(yī)主機(jī)名的(de≠→★≠)數(shù)量就(jiù)可(kě)以減少÷α(shǎo)DNS查找的(de)數(shù)量。
較少(shǎo)的(de)域名來(lái)減少(s♥©♠γhǎo)DNS查找（2-4個(gè)主機(j©ī)）
第三步、建立連接
優化(huà)規則--使用(yòng)內 π₽>(nèi)容分(fēn)發網絡
美(měi)國(guó)十大(dà←σ≥↓)Internet網站(zhàn)和(hé)CDN服務提供商
頁面靜(jìng)态化(huà),取決于發布系統
Ctrip使用(yòng)的(de)China-Cache和($♠δ☆hé)網宿
優化(huà)規則--用(yòng)域名劃分(fēn)頁面內(nèi)容↓₩
按頁面內(nèi)容劃分(fēn)域♥✔≈<名，在合适的(de)資源服務器(qì)上(s€βhàng)存放(fàng)文(wén)件(jiàn)
第四步、發送請(qǐng)求
優化(huà)規則--減少(shǎo)HTTP請(qǐng)♦↔求
HTTP請(qǐng)求30-40,合并文(wén)件(jiàn)±×¥✔,圖片地(dì)圖,內(nèi)聯圖像
a)js文(wén)件(jiàn)（不(bù)超¶↑★↔過7個(gè)）
1.tuna_090501_base.&♥js和(hé)tuna_090501_module.js(拆分(fēn♥®)tuna_090501.js)
2.數(shù)據文(wén)件(jiàn)js（™'1-2個(gè)）
3.頻(pín)道(dào)公用(yòng)js(1個(g奶è)）和(hé)頁面私有(yǒu)js（1-♠β2個(gè)）
不(bù)含ga.js、uiscript.asp和(hé∞✔≈)外(wài)鏈其他(tā)網站(zhàn)的π≤≥(de)js
b)css文(wén)件(jiàn→•)不(bù)超過4個(gè)，各頻(pín)道(dào)首頁和(hé<★)全站(zhàn)首頁不(bù)超過3個(€•€ gè)。
c)目前無法解決的(de)是(shì)allyes廣告的(ε&de)請(qǐng)求數(shù)。
•大(dà)量的(de)廣♠≠告和(hé)産品圖片可(kě)能(néng)會(huì)造☆✘¥成，圖片請(qǐng)求數(shù)很(hěn)大(dà)，可(∑↕kě)能(néng)造成總請(qǐng)求數(shù)指标吃(chī)緊，
這(zhè)個(gè)隻能(néng)從(cóng)設計(jì)上(↑•×shàng)搞定，需要(yào)權衡
•目前老(lǎo)頁面可(kě↓©)能(néng)css和(hé)js文(wén) ↑件(jiàn)請(qǐng)求數(shù)可(kě)能(néng¥<≈)會(huì)超标
優化(huà)規則-–優化(huà)CSSSp§β§irite
圖片地(dì)圖Ctrip首頁例子(z×₽δǐ)
優化(huà)規則–避免404錯(cu€&§ò)誤
避免內(nèi)部無效的(de)鏈>∏Ω 接
規則優化(huà)–不(bù)要(yπào)使用(yòng)frameset，少(shǎ''o)使用(yòng)iframe
搜索引擎不(bù)友(yǒu)好(h≈×ǎo)、即時(shí)內(nèi)容為(wèi)空("≠ ↔kōng)，加載也(yě)需要(yào)時(shí)間(jπ$≥iān)、會(huì)阻止頁面加載
禁止使用(yòng)iframe引入外(wài)部資源，不(bΩ∑ ù)包括allyes廣告，不(bù)包括about:bl∑ε♠✔ank的(de)空(kōng)頁面。
第五步、等待響應
優化(huà)規則--避免重定向
在重定向完畢并且HTML下(xià)載完畢之前，是(shì)'"沒有(yǒu)任何東(dōng)西(xī)顯示給用(yòng<€↕∞)戶的(de)
涉及服務器(qì)負載、數(shù)據查∞>♠詢、服務器(qì)端緩存等
第七步、接收數(shù)據
優化(huà)規則--壓縮組件(jiàn)
HTML文(wén)檔、腳本和(hé)樣式表、XML和(hδ✘é)JSON的(de)文(wén)本響應壓縮如(rú)何工(gōng)作✔≥ε(zuò)
壓縮通(tōng)常能(néng)将響應的(de)數(shù)∑π據量減少(shǎo)将近(jìn)70%
優化(huà)規則--精簡Javascript和(hé)Css >≤↕
從(cóng)代碼中移除不(bù)必要<π(yào)的(de)字符以減少(shǎo)其大(d à)小(xiǎo)，減少(shǎo)加載時(shí)間(jiān)。
規則規則–盡量縮減頁面大(dà)小(xiǎo)
頁面必須小(xiǎo)于150K(不(bù)含圖片）≤'
a)靜(jìng)态文(wén)件(ji₽ àn)是(shì)否gzip
b)圖片是(shì)否壓縮優化(huà)過
第八步、讀(dú)取Cache
優化(huà)規則--添加Expire或Cache-Coπ£→ntrol
應用(yòng)于不(bù)經常變化(huà)的(de)組件(jià'↕ ≥n)，包括腳本、樣式表、Flash組件(jiàn)、圖片
Expires和(hé)Cache-Control
規則規則--使用(yòng)外(w'∑×←ài)部的(de)Js和(hé)Css文(wén)件 ✔>(jiàn)
盡可(kě)能(néng)使用(yòng)外∞&™(wài)部Js和(hé)Css，因為(wèi)我們目前大(dà)部∞↔分(fēn)Js和(hé)Css都(dōu)做(↓ ₽zuò)了(le)Gzip和(hé)緩存技(jì)術(s →←hù)，可(kě)以充分(fēn)利用(yòng)。
第九步、處理(lǐ)元素
不(bù)要(yào)對(duì)image和(hé)p↔÷ df等二進制(zhì)文(wén)件(jiàn≥≈∑)進行(xíng)gzip壓縮
第十步、渲染元素
優化(huà)規則--将樣式表放(fàng)在頂↕©σ部
界面原型頁面必須将樣式表置于頁面頂部，開(kāi)發人(rén)員(y≈↑☆uán)如(rú)無特殊原因也(yě)必須将樣式★>表置于頂部。
以往多(duō)數(shù)是(s±¶hì)因為(wèi)masterpage原因 ¥↔≈無法将所有(yǒu)樣式表置頂，在改版修₽α♠'改masterpage時(shí)，盡可(kě)能(néng)按照(zhào)&∞¶此原則進行(xíng)設計(jì)。
優化(huà)規則–建議(yì)将腳本放(fàng)在底ε'β部
一(yī)般浏覽器(qì)可(kě)以允許↔并行(xíng)下(xià)載，取決于主機(jī ™")個(gè)數(shù)、帶寬等
（默認情況下(xià)，IE是(shì)2個(gè)而€₽FF是(shì)8個(gè)）
下(xià)載腳本時(shí)并行(xíng)下(xià)載實♣π際上(shàng)是(shì)被禁用(yòng)的(de)。
優化(huà)規則--移除重複腳本
必須為(wèi)0
優化(huà)規則--避免CSS表達式
影(yǐng)響浏覽器(qì)渲染時(shí)間(jiān)
優化(huà)規則–優化(huà)圖像
盡量使用(yòng)GIF和(hé)PNG
盡量使用(yòng)png/gif格式的(de)圖片，png的(d∞≥¥e)圖片優先，但(dàn)是(shì)必須注意如(rú)要(yào)兼←×≠容IE6，則png使用(yòng)一(yī)定要(yào)注意透明(••míng)問(wèn)題。
圖片在上(shàng)次前一(yī)定要(yào)先用(yòng)工(g$≠♦ ōng)具壓縮優化(huà)（png、jpg）
