網(wǎng)站最基本的東西是什么？
網(wǎng)站最基本的東西是什么？
——內(nèi)容？SEO（搜索引擎優(yōu)化）？UE（用戶體驗(yàn)）？都不對(duì)！是速度！
內(nèi)容再豐富的網(wǎng)站，如果慢到無(wú)法訪問(wèn)也是毫無(wú)意義的； SEO做的再好的網(wǎng)站，如果搜索蜘蛛抓不到也是白搭； UE設(shè)計(jì)的再人性化的網(wǎng)站，如果用戶連看都看不到也是空談。
所以網(wǎng)頁(yè)的效率絕對(duì)是最值得關(guān)注的方面。如何才能提高一個(gè)網(wǎng)頁(yè)的效率呢？Steve Souders(Steve Souders的資料http://www.oreillynet.com/pub/au/2951)提出的提高網(wǎng)頁(yè)效率的14條準(zhǔn)則，而這些準(zhǔn)則也將是我們下篇中介紹到的YSlow工具的理論基礎(chǔ)：
· Make Fewer HTTP Requests
· Use a Content Delivery Network
· Add an Expires Header
· Gzip Components
· Put CSS at the Top
· Move Scripts to the Bottom
· Avoid CSS Expressions
· Make JavaScript and CSS External
· Reduce DNS Lookups
· Minify JavaScript
· Avoid Redirects
· Remove Duplicate Scripts
· Configure ETags
· Make Ajax Cacheable
這里我們將逐一的講解這些準(zhǔn)則,對(duì)其中開(kāi)發(fā)者密切相關(guān)的準(zhǔn)則我將詳細(xì)講解。小弟個(gè)人技術(shù)實(shí)在有限，錯(cuò)誤和無(wú)知在所難免，還請(qǐng)高人指點(diǎn)。
第一條：Make Fewer HTTP Requests 盡可能的減少HTTP的Request請(qǐng)求數(shù)。
80%的用戶響應(yīng)時(shí)間都是浪費(fèi)在前端。而這些時(shí)間主要又是因?yàn)橄螺d圖片、樣式表、JavaScript腳本、flash等文件造成的。減少這些資源文件的Request請(qǐng)求數(shù)將是提高網(wǎng)頁(yè)顯示效率的重點(diǎn)。
這里好像有個(gè)矛盾，就是如果我減少了很多的圖片，樣式，腳本或者flash，那么網(wǎng)頁(yè)豈不是光禿禿的，那多難看呢？其實(shí)這是一個(gè)誤解。我們只是說(shuō)盡量的減少，并沒(méi)有說(shuō)完全不能使用。減少這些文件的Request請(qǐng)求數(shù)，當(dāng)然也有一些技巧和建議的：
1：用一個(gè)大圖片代替多個(gè)小圖片。
這的確有點(diǎn)顛覆傳統(tǒng)的思維了。以前我們一直以為多個(gè)小圖片的下載速度之和會(huì)小于一個(gè)大圖片的下載速度。但是現(xiàn)在利用httpwatch工具的對(duì)多個(gè)頁(yè)面進(jìn)行分析后的結(jié)果表明事實(shí)并不是這樣。
第一張圖是一個(gè)大小為40528bytes的337*191px的大圖片的分析結(jié)果。
第二張圖是一個(gè)大小為13883bytes的280*90px的小圖片的分析結(jié)果。
一個(gè)大小為40528bytes的337*191px的大圖片的分析結(jié)果（點(diǎn)擊圖片可以查看完整大圖片）
一個(gè)大小為13883bytes的280*90px的小圖片的分析結(jié)果（點(diǎn)擊圖片可以查看完整大圖片）
第一張大圖片花費(fèi)時(shí)間為：
Blocked：13.034s
Send：0.001s
Wait：0.163s
Receive：4.596s
TTFB：0.164s
NetWork：4.760s
功耗時(shí)：17.795s
真正用于傳輸大文件花費(fèi)的時(shí)間為Reveive時(shí)間，即4.596s，多數(shù)的時(shí)間是用來(lái)檢索緩存和確定鏈接是否有效的Blocked時(shí)間，供花費(fèi)13.034s，占總時(shí)間的73.2%。
第二張小圖片花費(fèi)時(shí)間為：
Blocked：16.274s
Send：小于0.001s
Wait：0.117s
Receive：0.397s
TTFB：0.118s
NetWork：0.516s
功耗時(shí)：16.790s
真正用于傳輸文件的花費(fèi)時(shí)間是Reveive時(shí)間，即0.397s，這的確要比剛才大文件的4.596s小很多。但是他的Blocked時(shí)間為16.274s，占總時(shí)間的97%。
如果這些數(shù)據(jù)還不夠說(shuō)服你的話，讓我們看看下面這張圖。這里列出了某個(gè)網(wǎng)頁(yè)中所有圖片中的花費(fèi)時(shí)間示意圖。當(dāng)然，里面的圖片有大有小，規(guī)格不一。
大約80%以上的時(shí)間是用來(lái)檢索緩存和確定鏈接是否有效的Blocked時(shí)間。
其中藏青色的為傳輸文件花費(fèi)的Reveive時(shí)間，而前面白色的為檢索緩存和確認(rèn)鏈接是否有效的Blocked時(shí)間。鐵一樣的事實(shí)告訴我們：
§ 大文件和小文件下載所需時(shí)間的確是不同的，差異的絕對(duì)值不大。而且下載所需時(shí)間占總耗費(fèi)時(shí)間比例很小。
§ 大約80%以上的時(shí)間是用來(lái)檢索緩存和確定鏈接是否有效的Blocked時(shí)間。無(wú)論文件大小，這個(gè)時(shí)間的花費(fèi)大致是相同的。而且所占總耗費(fèi)時(shí)間的比例是極大的。
§ 一個(gè)100k的大圖片總耗費(fèi)時(shí)間絕對(duì)大于4個(gè)25k的小圖片的總耗費(fèi)時(shí)間。而且主要差別就是4個(gè)小圖片的Blocked時(shí)間絕對(duì)大于1個(gè)大圖片的Blocked時(shí)間。
所以如果可能還是使用大圖片來(lái)替代過(guò)多的瑣碎的小圖片吧。這也是為什么翻轉(zhuǎn)門(mén)的效率要高于圖片替換實(shí)現(xiàn)的滑動(dòng)門(mén)的原因。
但是，請(qǐng)注意：也不能用太大的單張圖片，因?yàn)槟菢訒?huì)影響到用戶體驗(yàn)。例如個(gè)幾兆的背景圖片的使用絕對(duì)不是一個(gè)好主意。
2：合并你的css文件。
圖:合并與融合
我以前犯了一個(gè)錯(cuò)誤，你在看我《樣式表的組織與規(guī)劃》的系列文章中會(huì)知道。當(dāng)時(shí)，我為了方便組織和規(guī)劃樣式表，將用于不同用途的樣式表文件分離開(kāi)來(lái)，形成不同的css文件。然后在頁(yè)面中根據(jù)需要引用多個(gè)css文件。根據(jù)“盡可能的減少HTTP的Request請(qǐng)求數(shù)”準(zhǔn)則我們知道，那樣的確是不合理的，因?yàn)槟菢訒?huì)產(chǎn)生更多的HTTP的Request請(qǐng)求數(shù)。從而降低網(wǎng)頁(yè)的效率。所以，從提高網(wǎng)頁(yè)效率的角度上而言，我們還是應(yīng)該將所有的css寫(xiě)在同一個(gè)css文件中。但是問(wèn)題又來(lái)了。那么怎么來(lái)很好的組織和規(guī)劃樣式表呢？這的確是個(gè)矛盾。我現(xiàn)在的做法是采用兩套版本。編輯版和發(fā)布版。編輯版仍然使用多個(gè)css文件以便于規(guī)劃和組織。而等到發(fā)布的時(shí)候，再將多個(gè)css文件合并到一個(gè)文件中去，從而達(dá)到減少HTTPRequest請(qǐng)求數(shù)的目的。
3：合并你的javascript文件。
原因和處理方法同上，不再贅言。
第二條：Use a Content Delivery Network 使用CDN
這個(gè)看上去好像很深?yuàn)W的樣子，但是只要結(jié)合中國(guó)的網(wǎng)絡(luò)特色，這個(gè)便不難理解了。“北方服務(wù)器”、“南方服務(wù)器”、“電信服務(wù)器”、“網(wǎng)通服務(wù)器”……這些詞聽(tīng)起來(lái)是那么熟悉和壓抑。如果，一個(gè)北京的電信用戶試圖從廣東的網(wǎng)通服務(wù)器上打開(kāi)一個(gè)類(lèi)似《壁紙合集》帖子的網(wǎng)頁(yè)時(shí)，你就能很深刻的理解。
鑒于這個(gè)不是我們開(kāi)發(fā)人員力所能及的準(zhǔn)則，所以這里也就不多言了。
圖:這個(gè)圖也算有點(diǎn)中國(guó)特色了
第三條：Add an Expires Header 添加周期頭
這個(gè)也并非開(kāi)發(fā)人員來(lái)控制，而是網(wǎng)站服務(wù)器管理員的職責(zé)。所以，如果作為開(kāi)發(fā)人員的你不了解和明白也沒(méi)有關(guān)系。還是把這個(gè)準(zhǔn)則告訴公司的網(wǎng)站服務(wù)器管理員。
第四條：Gzip Components 啟用Gzip壓縮
這個(gè)大家應(yīng)該比較熟悉。Gzip的思想就是把文件先在服務(wù)器端進(jìn)行壓縮，然后再傳輸。這對(duì)于體積較大的純文字型的文件有特效。鑒于這也并非開(kāi)發(fā)人員，而是網(wǎng)站服務(wù)器管理員的工作范疇，這里就不詳細(xì)講解了。如果你對(duì)此感興趣，可以資訊貴公司的網(wǎng)站服務(wù)器管理人員。
第五條：Put CSS at the Top 把CSS樣式放在頁(yè)面的上方。
無(wú)論是HTML還是XHTML還是CSS都是解釋型的語(yǔ)言，而非編譯型的。所以CSS到上方的話，那么瀏覽器解析結(jié)構(gòu)的時(shí)候，就已經(jīng)可以對(duì)頁(yè)面進(jìn)行渲染。這樣就不會(huì)出現(xiàn)，頁(yè)面結(jié)構(gòu)光禿禿的先出來(lái)，然后CSS渲染，頁(yè)面又突然華麗起來(lái)，這樣太具有“戲劇性”的頁(yè)面瀏覽體驗(yàn)了。
第六條：Move Scripts to the Bottom 將腳本放在底部
原因同第五條一樣。只是腳本一般是用來(lái)于用戶交互的。所以如果頁(yè)面還沒(méi)有出來(lái)，用戶連頁(yè)面都不知道什么樣子，那談交互簡(jiǎn)直就是扯談。所以，腳本和CSS正好相反，腳本應(yīng)該放在頁(yè)面的底部。
第七條：Avoid CSS Expressions 避免使用CSS中的Expressions
圖:CSS中的Expressions其實(shí)也是一種if判斷
首先有必要先說(shuō)明一下CSS Expressions是什么一個(gè)東西。其實(shí)它就像其它語(yǔ)言中的if……else……語(yǔ)句。這樣在CSS中就可以進(jìn)行簡(jiǎn)單的邏輯判斷了。舉個(gè)簡(jiǎn)單的例子——
<style>
input{background-color:expression((this.readOnly && this.readOnly==true)?"#0000ff":"#ff0000")}
</style>
<INPUT TYPE="text" NAME="">
<INPUT TYPE="text" NAME="" readonly="true">
這樣css就可以根結(jié)一些情況分別使用不同的樣式了。如果你對(duì)這個(gè)感興趣可以到我的博客上閱讀相關(guān)的文章—— 《CSS中的expression系列文章》。但是CSS中Expressions 的代價(jià)卻是極高的。當(dāng)你的頁(yè)面需要根據(jù)判斷來(lái)渲染效果的元素很多的時(shí)候，那么你的瀏覽器將長(zhǎng)期處于假死狀態(tài)，從而給用戶帶來(lái)極差的用戶體驗(yàn)。
第八條：Make JavaScript and CSS External 將javascript和css獨(dú)立成外部文件
這一條好像和第一條有點(diǎn)矛盾。的確，如果從HTTP的request請(qǐng)求數(shù)來(lái)講的話，這樣做的確是降低了效率。但是之所以這么做，是因?yàn)榱硗庖粋€(gè)重要的考慮因素——緩存。因?yàn)橥獠康囊梦募?huì)被瀏覽器緩存，所以如果javascript和css體積較大的時(shí)候，我們將它們獨(dú)立成外部文件。這樣當(dāng)用戶只要瀏覽一次以后，這些體積較大的js和css文件就能被緩存起來(lái)，從而極高地提高用戶再次訪問(wèn)時(shí)的效率。
第九條：Reduce DNS Lookups 減少DNS查詢(xún)
DNS域名解析系統(tǒng)。大家都知道我們之所以能記住那么多的網(wǎng)址，是因?yàn)槲覀冇涀〉亩际菃卧~，而非http://202.153.125.45這樣的東西，而幫我們把那些單詞和202.153.125.45這樣的ip地址聯(lián)系起來(lái)的就是DNS。那這一條對(duì)我們到底有什么真正意義上的指導(dǎo)意義呢？其實(shí)有兩條：
1：如果不是必須，請(qǐng)不要把網(wǎng)站放到兩臺(tái)服務(wù)器上。
2：網(wǎng)頁(yè)中的圖片、css文件、js文件、flash文件等等，不要太多的分散在不同的網(wǎng)絡(luò)空間中。這就是為什么那種只發(fā)一個(gè)網(wǎng)站中的壁紙圖片的帖子，要比壁紙圖片來(lái)源于不同網(wǎng)站的帖子顯示要快得多的原因。
第十條：Minify JavaScript and CSS 減少JavaScript和CSS文件的體積
這點(diǎn)很好理解。在你的最終發(fā)布版本中把沒(méi)有必要的空行、空格和注釋全部去掉。顯然手工去處理效率太低，好在網(wǎng)上到處都是用于壓縮這些東西的工具。壓縮JavaScript代碼體積的工具隨處可見(jiàn)，我便不再列舉了，這里我只提供一個(gè)用于壓縮css代碼體積的在線工具網(wǎng)站——http://www.cssdrive.com/index.php/main/csscompressor
它提供了多種壓縮方式，可以適應(yīng)多種要求。
第十一條：Avoid Redirects 避免跳轉(zhuǎn)
我只從網(wǎng)頁(yè)開(kāi)發(fā)人員的角度來(lái)解讀此條。那么我們可以解讀到什么東西呢？2點(diǎn)——
1：“此域名已過(guò)期，5秒鐘以后，頁(yè)面將跳轉(zhuǎn)到http://www.xxxxxx.com/index.html頁(yè)面”，這句話看起來(lái)的確很熟悉。但是，我就奇怪了，為什么不直接鏈接到那個(gè)頁(yè)面呢？
2：一些鏈接地址請(qǐng)更明確的寫(xiě)出來(lái)。例如:將http://justinyoung.cnblogs.com/ 寫(xiě)成http://justinyoung.cnblogs.com （注意最后面一個(gè)“/”符號(hào)）。的確，這兩個(gè)網(wǎng)址都能訪問(wèn)到我的博客，但是，事實(shí)上，它們是有區(qū)別的。http://justinyoung.cnblogs.com 的結(jié)果是個(gè)301響應(yīng)，它會(huì)被重新指向http://justinyoung.cnblogs.com/ 。但是顯然，中間多浪費(fèi)了一些時(shí)間。
第十二條 Remove Duplicate Scripts 移除重復(fù)的腳本
圖:對(duì)重復(fù)說(shuō)“不！”
這個(gè)準(zhǔn)則的道理很淺顯，但是真正在工作中，很多人卻因?yàn)?span lang="EN-US">“項(xiàng)目時(shí)間緊”、“太累了”、“初期沒(méi)有規(guī)劃好”……這樣的理由搪塞過(guò)去了。你，的確可以找很多的理由不去處理這些多余重復(fù)的腳本代碼，如果你的網(wǎng)站不需要更高的效率和后期維護(hù)的話。
也正是這點(diǎn)，我提醒大家一些，一些javascript框架、javascript包一定要慎用。至少要問(wèn)一下：用了這個(gè)js kit 到底給我們多少方便，提高了多少工作效率。然后，再與它因?yàn)槎嘤嗟?、重?fù)的代碼帶來(lái)的負(fù)面效果比較一下。
第十三條：Configure ETags 配置你的實(shí)體標(biāo)簽
首先來(lái)講講什么是Etag吧。Etag（Entity tags ）實(shí)體標(biāo)簽。這個(gè)tag和你在網(wǎng)上經(jīng)?？吹降臉?biāo)簽云那種tag有點(diǎn)區(qū)別。這個(gè)Etag不是給用戶用的，而是給瀏覽器緩存用的。Etag是服務(wù)器告訴瀏覽器緩存，緩存中的內(nèi)容是否已經(jīng)發(fā)生變化的一種機(jī)制。通過(guò)Etag，瀏覽器就可以知道現(xiàn)在的緩存中的內(nèi)容是不是最新的，需不需要重新從服務(wù)器上重新下載。這和“Last-Modified”的概念有點(diǎn)類(lèi)似。很遺憾作為網(wǎng)頁(yè)開(kāi)發(fā)人員對(duì)此無(wú)能為力。他依然是網(wǎng)站服務(wù)器人員的工作范疇。如果，你對(duì)此有興趣，可以咨詢(xún)貴公司的網(wǎng)站服務(wù)器管理員。
第十四條：Make Ajax Cacheable 上面的準(zhǔn)則也適用Ajax
圖:Ajax的使用要恰當(dāng)
現(xiàn)在的Ajax好像有點(diǎn)被神話了，好像網(wǎng)頁(yè)只要Ajax了，那么就不存在效率問(wèn)題了。其實(shí)這是一種誤解。拙劣的使用Ajax不會(huì)讓你的網(wǎng)頁(yè)效率更高，反而會(huì)降低你的網(wǎng)頁(yè)效率。Ajax的確是個(gè)好東西，但是請(qǐng)不要過(guò)分的神話它。使用Ajax的時(shí)候也要考慮上面的那些準(zhǔn)則。
后記：
當(dāng)然，上面的這些也只是供你參考的理論上的準(zhǔn)則。具體的情況還是要具體的去對(duì)待。理論和準(zhǔn)則只是用來(lái)指導(dǎo)現(xiàn)實(shí)工作的，卻是萬(wàn)萬(wàn)不可死記硬套。