原作者:
contact@thinkvitamin.com 譯者:
kwyjibo(
Blog)
發(fā)表時(shí)間：04/04/2007
原文鏈接訪問(wèn)速度緩慢的互聯(lián)網(wǎng)已經(jīng)成為過(guò)去,但頁(yè)面能瞬時(shí)呈現(xiàn)也只是未來(lái)才會(huì)發(fā)生的事情. Christianheilmann的一些技巧，現(xiàn)在就可以令你的網(wǎng)站訪問(wèn)起來(lái)更為流暢。
頁(yè)面首次訪問(wèn)時(shí)的延時(shí)是網(wǎng)站和Web應(yīng)用設(shè)計(jì)中遇到的一個(gè)很重要的問(wèn)題。用戶(hù)總是感覺(jué)頁(yè)面相應(yīng)的不夠快。
為什么用戶(hù)會(huì)有這樣的感覺(jué)？也許用戶(hù)還保留多年前那種按分鐘計(jì)費(fèi)的接入網(wǎng)方式的使用習(xí)慣（現(xiàn)在的飯店或機(jī)場(chǎng)還保持那種接入方式）；也許是因?yàn)橛脩?hù)覺(jué)得頁(yè)面要有足夠快的響應(yīng)才能稱(chēng)得上所謂的信息高速路。但在我看來(lái)這是好萊塢的責(zé)任。在每部好萊塢的動(dòng)作大片中：敲擊一下鍵盤(pán)的同時(shí)，電腦屏幕上就會(huì)出現(xiàn)超高分辨率，有著密密麻麻數(shù)據(jù)顯示的精美網(wǎng)站操作界面；而且網(wǎng)站上讀取一部百科全書(shū)也不過(guò)短短幾毫秒就可以完成。
但在現(xiàn)實(shí)生活中卻完全不是這么回事,因?yàn)闊o(wú)論你如何盡量簡(jiǎn)化你的頁(yè)面,延遲還是存在的。而且為了使頁(yè)面更絢麗，通常會(huì)使用flash，但如果濫用flash會(huì)嚴(yán)重影響頁(yè)面的響應(yīng)速度。作為網(wǎng)絡(luò)應(yīng)用，還必須保證頁(yè)面元素的加載順序，不會(huì)因?yàn)轫?yè)面上未完全加載的元素被用戶(hù)訪問(wèn)而造成異常。
哪些因素造成網(wǎng)站響應(yīng)緩慢？
當(dāng)談到提高網(wǎng)站響應(yīng)速度，最通常的做法就是盡可能的減少網(wǎng)站文件的尺寸。(這也導(dǎo)致針對(duì)JavaScript庫(kù)文件大小的無(wú)休止的討論，但最終也沒(méi)什么結(jié)果。）實(shí)際上,有許多因素會(huì)影響到網(wǎng)頁(yè)初次訪問(wèn)的響應(yīng)速度:
HTML文檔的大小。
頁(yè)面中嵌入的腳本、圖像、多媒體元素文檔的大小。
HTML頁(yè)面的復(fù)雜程度。(瀏覽器可以很快的展現(xiàn)簡(jiǎn)單的頁(yè)面)
用戶(hù)的接入速度
會(huì)被頁(yè)面訪問(wèn)的第三方內(nèi)容所在服務(wù)器的訪問(wèn)速度。
網(wǎng)站域名及其頁(yè)面包含的外部域名的ＤＮＳ解析速度。
用戶(hù)計(jì)算機(jī)的性能。(瀏覽器會(huì)因?yàn)橄到y(tǒng)消耗過(guò)多的資源在其他任務(wù)上而變得響應(yīng)緩慢)。
服務(wù)器的相應(yīng)速度。
除了以上的技術(shù)上的因素會(huì)導(dǎo)致網(wǎng)站響應(yīng)變慢以外，還有一些人為設(shè)計(jì)上的因素。例如：為了避免頁(yè)面加載過(guò)程中出現(xiàn)的頁(yè)面區(qū)域錯(cuò)亂和無(wú)圖像顯示；頁(yè)面被設(shè)計(jì)為需要頁(yè)面內(nèi)容完全加載完畢后才一起顯示。
讓網(wǎng)站響應(yīng)便快的方法
經(jīng)過(guò)實(shí)踐，以下經(jīng)驗(yàn)對(duì)于解決由于技術(shù)和人為因素造成網(wǎng)站響應(yīng)變慢的問(wèn)題會(huì)有所幫助。
在不影響頁(yè)面顯示質(zhì)量的前提下，盡可能的優(yōu)化HTML代碼。（這包括在發(fā)布頁(yè)面時(shí)，去掉HTML文檔中的注釋以及冗余的換行標(biāo)記。但為了保證頁(yè)面的可讀性，這些代碼還應(yīng)當(dāng)保留在源代碼中）
頁(yè)面中盡可能少的包含其他外部引用，減少文檔之間的依賴(lài)。（可以將多個(gè)腳本放入一個(gè)腳本文件，用CSS的sprite技巧將多個(gè)小圖片合并為一個(gè)大圖，這樣就只需要加載一次）
確保你沒(méi)有從外部服務(wù)器上引用第三方的內(nèi)容：用一個(gè)腳本將遠(yuǎn)程的RSS源緩存在本地。這樣不僅可以避免DNS解析所造成的延時(shí)，而且也不會(huì)因?yàn)橥獠糠?wù)器的宕機(jī)影響你的服務(wù)。
盡可能的制定圖片及包含圖片的元素的尺寸。這樣可以避免頁(yè)面展現(xiàn)時(shí)由于圖片陸續(xù)加載而造成頁(yè)面元素跳動(dòng)的現(xiàn)象。
在頁(yè)面的末端加載大的腳本，這樣頁(yè)面的可以在大的腳本加載完成前展示出來(lái)。如果把大的腳本在頁(yè)面頭元素中加載，則瀏覽器會(huì)等到腳本完全加載完成后才顯示頁(yè)面內(nèi)容。
web開(kāi)發(fā)準(zhǔn)則與提高響應(yīng)速度
可惜上文提到的這些計(jì)巧與我們通常認(rèn)為的web開(kāi)發(fā)的準(zhǔn)則有沖突。例如減少頁(yè)面包含文件數(shù)量會(huì)造成產(chǎn)品的可維護(hù)性變差。為了使網(wǎng)站的不用頁(yè)面（首頁(yè)，文章頁(yè)，存檔頁(yè)）保持不同的頁(yè)面風(fēng)格最簡(jiǎn)單的方法是不同類(lèi)型的頁(yè)面的特殊的樣式存放在他們各自的樣式文件中。一個(gè)頁(yè)面可以有一個(gè)最基本的樣式文件，然后根據(jù)頁(yè)面的不同類(lèi)型再包含該類(lèi)型頁(yè)面的指定的樣式文件。
腳本的存放也可以用相同的方法，將功能相近的腳本放到一個(gè)文件中。這樣有助于代碼的維護(hù)。你不用察看所有的腳本代碼就可以很快的找到你需要的函數(shù)。此外，將腳本加入到頁(yè)面的主體部分通常被認(rèn)為是不良的編碼習(xí)慣，因?yàn)樗麑⒂脩?hù)的行為控制邏輯嵌入的頁(yè)面的結(jié)構(gòu)中。
幸好有技術(shù)方案可以解決這些問(wèn)題。
用一個(gè)包含來(lái)引用多個(gè)樣式或腳本。
愛(ài)德華艾略特提出的解決方法是用一個(gè)PHP的腳本
將多個(gè)CSS樣式或腳本整理成單一的檔案。這個(gè)腳本對(duì)于javascript還可以調(diào)用
DouglasCrockford’s的JSmin進(jìn)行壓縮。這個(gè)腳本使用很簡(jiǎn)單，而且可以緩存歸并后的文件，直到這些被歸并的文件被修改。這就意味著當(dāng)你修改被歸并的某個(gè)文件后，腳本會(huì)自動(dòng)重新打包緩存。這樣就很簡(jiǎn)單的解決了代碼維護(hù)和頁(yè)面響應(yīng)速度間的矛盾。
解決頁(yè)面加載的問(wèn)題
另一個(gè)棘手的問(wèn)題是，嵌入在頁(yè)面頭元素的腳本，必要要等頁(yè)面加載完成后才能被調(diào)用。這樣就會(huì)有些延時(shí) ，而且還會(huì)產(chǎn)生問(wèn)題。
延時(shí)是由于瀏覽器加載，解析和展現(xiàn)文檔的方式造成的。當(dāng)你用window的onload事件加載腳本時(shí)，瀏覽器的處理順序是這樣的：
解析HTML代碼裝載外部腳本和樣式表
執(zhí)行被解析后的腳本
建立HTML的DOM樹(shù)
裝載圖片和其它外部引用內(nèi)容
頁(yè)面裝載完畢
在大多數(shù)情況下這樣的加載會(huì)比較慢，而有些步驟需要提前。許多聰明的程序員致力于解決這個(gè)問(wèn)題，不時(shí)的會(huì)有新的解決方案出現(xiàn)。大多數(shù)的javascript腳本都會(huì)有針對(duì)onAvailable或onDocumentReady的事件處理。這類(lèi)事件會(huì)在部分文檔裝載完成后就會(huì)被觸發(fā)，而不用等到大量圖片被加載。但通過(guò)實(shí)踐和反復(fù)測(cè)試，針對(duì)舊的瀏覽器和操作系統(tǒng)并沒(méi)有無(wú)懈可擊的解決方案。但我相信只要我們繼續(xù)努力，再加上那么點(diǎn)運(yùn)氣一定會(huì)找到最終的解決方案的。
對(duì)于web應(yīng)用由于調(diào)用未加載完成的元素而導(dǎo)致異常是很致命的問(wèn)題。如果這類(lèi)問(wèn)題時(shí)發(fā)生在頁(yè)面美化部分，則會(huì)有一些解決方法。
為了解決一次加載過(guò)多內(nèi)容的問(wèn)題，可以采按需分別加載內(nèi)容。
為了更好的裝飾頁(yè)面一次載入大量的內(nèi)容，往往會(huì)產(chǎn)生問(wèn)題。大量的內(nèi)容有可能是每個(gè)標(biāo)簽中都包含過(guò)多的文字或者是一個(gè)有四級(jí)的導(dǎo)航欄。運(yùn)用javacript腳本可以很輕松的動(dòng)態(tài)展示這些內(nèi)容。但是如果腳本被禁用，則這些動(dòng)態(tài)內(nèi)容就會(huì)失去樣式而被打亂，無(wú)法正確地展示，這當(dāng)然不是一個(gè)好主意。頁(yè)面也沒(méi)有必要一次將所有的動(dòng)態(tài)展示內(nèi)容都一次加載，這樣會(huì)增加頁(yè)面載入的負(fù)載。
解決方法是當(dāng)用戶(hù)觸發(fā)標(biāo)簽時(shí)再用javascript動(dòng)態(tài)的加載顯示的內(nèi)容。當(dāng)用戶(hù)關(guān)閉腳本后也會(huì)顯示一個(gè)基本的靜態(tài)文本。
用什么方法來(lái)加載額外的內(nèi)容取決于你需要引用的是什么。最簡(jiǎn)單的方法是動(dòng)態(tài)的生成腳本標(biāo)簽。這是一個(gè)很早就有的方法，被用來(lái)引入大量的javascript數(shù)據(jù)集或在頁(yè)面加載后再引入腳本。
function pull(){
var s = document.createElement(‘script‘);
s.type = ‘text/javascript‘;
s.src = ‘largeJavaScriptBlock.js‘;
document.getElementsByTagName(‘head‘)[0].appendChild(s);
}
window.onload = pull;
del.icio.us頁(yè)面就到這種方法來(lái)引入由json返回的數(shù)據(jù)。由于json返回的不過(guò)是一堆javascript代碼，你可以在頁(yè)面裝載完成后，生成javascript腳本標(biāo)簽包含這些代碼；然后執(zhí)行這些代碼原來(lái)替換頁(yè)面中某個(gè)元素的內(nèi)容。
Dishy作為封裝了json的對(duì)象可以讓你很輕松的完成這些。另一個(gè)列子是
不太顯眼的Flickr頭像，F(xiàn)lickr用json輸出顯示你最新相片，當(dāng)用戶(hù)禁用腳本，哪個(gè)位置顯示的只是一個(gè)鏈接。
如果你要引入的是非javascript的內(nèi)容，你可以使用Ajax或者AHAH或者Hijax或者其他不包含xml的ajax（你愿意把稱(chēng)作什么名稱(chēng)都可以）。例如，一個(gè)
用ajax實(shí)現(xiàn)的導(dǎo)航，它甚至可以根據(jù)用戶(hù)需要可選擇的加載更為復(fù)雜的界面。
Imaging trickery 圖像顯示技巧
最后一個(gè)方法的淵源會(huì)追溯到可能你還沒(méi)開(kāi)始接觸網(wǎng)站開(kāi)發(fā)時(shí)。那時(shí)瀏覽器大戰(zhàn)中最為ie的競(jìng)爭(zhēng)對(duì)手苦命的Netscape（但在我看來(lái)那時(shí)還是不錯(cuò)的）瀏覽器支持一個(gè)自定義的HTML屬性‘lowsrc’，這個(gè)屬性可以指定一個(gè)小圖片提前加載作為大圖載入時(shí)的替代顯示圖片。這樣即使用戶(hù)的接入速度很慢，也可以看到即將呈現(xiàn)圖片的一個(gè)預(yù)覽。
你可以重用這一想法，當(dāng)頁(yè)面加載時(shí)不要嵌入過(guò)大的圖片而是載入更為規(guī)范化的小圖片；等頁(yè)面加載完成后再用大圖片進(jìn)行替換。你甚至可以簡(jiǎn)化到開(kāi)始只載入背景色，然后等頁(yè)面載入完成再用javascript或者DOM加載原圖進(jìn)行覆蓋。
這種方法還適用于你需要從多個(gè)服務(wù)器取得許多不能被緩存的圖片。（例如gravatars）通常可以先載入一個(gè)占位的圖片，等頁(yè)面加載完成后再動(dòng)態(tài)取得分散在其他服務(wù)器上的小圖片。
總結(jié)
以上只是提高頁(yè)面響應(yīng)速度的一些基本方法，我希望其中的一些會(huì)對(duì)你有啟發(fā)有幫助。
如果你有些更好的主意，不要猶豫回復(fù)給我。
