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