如何提高頁面回應速度

仲介交易 SEO診斷 淘寶客 雲主機 技術大廳

存取速度緩慢的互聯網已經成為過去,但頁面能暫態呈現也只是未來才會發生的事情. Christian heilmann的一些技巧，現在就可以令你的網站訪問起來更為流暢。

頁面首次訪問時的延時是網站和Web應用設計中遇到的一個很重要的問題。 使用者總是感覺頁面相應的不夠快。

為什麼使用者會有這樣的感覺？ 也許使用者還保留多年前那種按分鐘計費的接入網方式的使用習慣（現在的飯店或機場還保持那種接入方式）；也許是因為使用者覺得頁面要有足夠快的回應才能稱得上所謂的資訊高速路。 但在我看來這是好萊塢的責任。 在每部好萊塢的動作大片中：敲擊一下鍵盤的同時，電腦螢幕上就會出現超高解析度，有著密密麻麻資料顯示的精美網站操作介面；而且網站上讀取一部百科全書也不過短短幾毫秒就可以完成。

但在現實生活中卻完全不是這麼回事,因為無論你如何儘量簡化你的頁面,延遲還是存在的。 而且為了使頁面更絢麗，通常會使用flash，但如果濫用flash會嚴重影響頁面的回應速度。 作為網路應用，還必須保證頁面元素的載入順序，不會因為頁面上未完全載入的元素被使用者訪問而造成異常。

那些因素造成網站回應緩慢？

當談到提高網站回應速度，最通常的做法就是盡可能的減少網站檔的尺寸。 (這也導致針對JavaScript庫檔案大小的無休止的討論，但最終也沒什麼結果。 ）實際上,有許多因素會影響到網頁初次訪問的回應速度:

HTML文檔的大小。
頁面中嵌入的腳本、圖像、多媒體元件文檔的大小。
HTML頁面的複雜程度。 (瀏覽器可以很快的展現簡單的頁面)
使用者的接入速度
會被頁面訪問的協力廠商內容所在伺服器的存取速度。
網站功能變數名稱及其頁面包含的外部功能變數名稱的ＤＮＳ解析速度。
使用者電腦的性能。 (瀏覽器會因為系統消耗過多的資源在其他任務上而變得回應緩慢)。
伺服器的相應速度。
除了以上的技術上的因素會導致網站回應變慢以外，還有一些人為設計上的因素。 例如：為了避免頁面載入過程中出現的頁面區域錯亂和無圖像顯示；頁面被設計為需要頁面內容完全載入完畢後才一起顯示。

讓網站回應便快的方法

經過實踐，以下經驗對於解決由於技術和人為因素造成網站回應變慢的問題會有所説明。

在不影響頁面顯示品質的前提下，盡可能的優化HTML代碼。 （這包括在發佈頁面時，去掉HTML文檔中的注釋以及冗余的換行標記。 但為了保證頁面的可讀性，這些代碼還應當保留在原始程式碼中）頁面中盡可能少的包含其他外部引用，減少文檔之間的依賴。 （可以將多個腳本放入一個指令檔，用CSS的sprite技巧將多個小圖片合併為一個大圖，這樣就只需要載入一次）確保你沒有從外部伺服器上引用協力廠商的內容：用一個腳本將遠端的RSS源緩存在本地。 這樣不僅可以避免DNS解析所造成的延時，而且也不會因為外部伺服器的宕機影響你的服務。

盡可能的制定圖片及包含圖片的元素的尺寸。 這樣可以避免頁面展現時由於圖片陸續載入而造成頁面元素跳動的現象。

在頁面的末端載入大的腳本，這樣頁面的可以在大的腳本載入完成前展示出來。 如果把大的腳本在頁面頭元素中載入，則瀏覽器會等到腳本完全載入完成後才顯示頁面內容。

web開發準則與提高回應速度

可惜上文提到的這些計巧與我們通常認為的web開發的準則有衝突。 例如減少頁面包含檔數量會造成產品的可維護性變差。 為了使網站的不用頁面（首頁，文章頁，存檔頁）保持不同的頁面風格最簡單的方法是不同類型的頁面的特殊的樣式存放在他們各自的樣式檔中。 一個頁面可以有一個最基本的樣式檔，然後根據頁面的不同類型再包含該類型頁面的指定的樣式檔。

腳本的存放也可以用相同的方法，將功能相近的腳本放到一個檔中。 這樣有助於代碼的維護。 你不用察看所有的腳本代碼就可以很快的找到你需要的函數。 此外，將腳本加入到頁面的主體部分通常被認為是不良的編碼習慣，因為他將使用者的行為控制邏輯嵌入的頁面的結構中。

幸好有技術方案可以解決這些問題。

用一個包含來引用多個樣式或腳本。

愛德華艾略特提出的解決方法是用一個PHP的腳本將多個CSS樣式或腳本整理成單一的檔案。 這個腳本對於javascript還可以調用Douglas Crockford’s的JSmin進行壓縮。 這個腳本使用很簡單，而且可以緩存歸併後的檔，直到這些被歸併的檔被修改。 這就意味著當你修改被歸併的某個檔後，腳本會自動重新封包緩存。 這樣就很簡單的解決了代碼維護和頁面回應速度間的矛盾。

解決頁面載入的問題

另一個棘手的問題是，嵌入在頁面頭元素的腳本，必要要等頁面載入完成後才能被調用。 這樣就會有些延時 ，而且還會產生問題。

延時是由於瀏覽器載入，解析和展現文檔的方式造成的。 當你用window的onload事件載入腳本時，瀏覽器的處理順序是這樣的：

解析HTML代碼裝載外部腳本和樣式表
執行被解析後的腳本
建立HTML的DOM樹
裝載圖片和其它外部引用內容
頁面裝載完畢

在大多數情況下這樣的載入會比較慢，而有些步驟需要提前。 許多聰明的程式師致力於解決這個問題，不時的會有新的解決方案出現。 大多數的javascript腳本都會有針對onAvailable或onDocumentReady的事件處理。 這類事件會在部分文檔裝載完成後就會被觸發，而不用等到大量圖片被載入。 但通過實踐和反復測試，針對舊的瀏覽器和作業系統並沒有無懈可擊的解決方案。 但我相信只要我們繼續努力，再加上那麼點運氣一定會找到最終的解決方案的。

對於web應用由於調用未載入完成的元素而導致異常是很致命的問題。 如果這類問題時發生在頁面美化部分，則會有一些解決方法。

為了解決一次載入過多內容的問題，可以采按需分別載入內容。

為了更好的裝飾頁面一次載入大量的內容，往往會產生問題。 大量的內容有可能是每個標籤中都包含過多的文字或者是一個有四級的巡覽列。 運用javacript腳本可以很輕鬆的動態展示這些內容。 但是如果腳本被禁用，則這些動態內容就會失去樣式而被打亂，無法正確地展示，這當然不是一個好主意。 頁面也沒有必要一次將所有的動態展示內容都一次載入，這樣會增加頁面載入的負載。

解決方法是當使用者觸發標籤時再用javascript動態的載入顯示的內容。 當使用者關閉腳本後也會顯示一個基本的靜態文本。

用什麼方法來載入額外的內容取決於你需要引用的是什麼。 最簡單的方法是動態的生成腳本標籤。 這是一個很早就有的方法，被用來引入大量的javascript資料集或在頁面載入後再引入腳本。

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頁面就到這種方法來引入由json返回的資料。 由於json返回的不過是一堆javascript代碼，你可以在頁面裝載完成後，生成javascript腳本標籤包含這些代碼；然後執行這些代碼原來替換頁面中某個元素的內容。 Dishy作為封裝了json的物件可以讓你很輕鬆的完成這些。 另一個列子是不太顯眼的Flickr頭像，Flickr用json輸出顯示你最新相片，當使用者禁用腳本，哪個位置顯示的只是一個連結。

如果你要引入的是非javascript的內容，你可以使用Ajax或者AHAH或者Hijax或者其他不包含xml的ajax（你願意把稱作什麼名稱都可以）。 例如，一個用ajax實現的導航，它甚至可以根據使用者需要可選擇的載入更為複雜的介面。

Imaging trickery 圖像顯示技巧

最後一個方法的淵源會追溯到可能你還沒開始接觸網站開發時。 那時瀏覽器大戰中最為ie的競爭對手苦命的Netscape（但在我看來那時還是不錯的）瀏覽器支援一個自訂的HTML屬性‘lowsrc’，這個屬性可以指定一個小圖片提前載入作為大圖載入時的替代顯示圖片。 這樣即使使用者的接入速度很慢，也可以看到即將呈現圖片的一個預覽。

你可以重用這一想法，當頁面載入時不要嵌入過大的圖片而是載入更為正常化的小圖片；等頁面載入完成後再用大圖片進行替換。 你甚至可以簡化到開始只載入背景色，然後等頁面載入完成再用javascript或者DOM載入原圖進行覆蓋。

這種方法還適用于你需要從多個伺服器取得許多不能被緩存的圖片。 （例如gravatars）通常可以先載入一個占位的圖片，等頁面載入完成後再動態取得分散在其他伺服器上的小圖片。

總結
以上只是提高頁面回應速度的一些基本方法，我希望其中的一些會對你有啟發有説明。
如果你有些更好的主意，不要猶豫回復給我。