讓我們來看一個例子:一個Web2.0的Email客戶端會使用Ajax來自動完成對用戶地址薄的下載。如果用戶在上次使用過Email web應用程序后沒有對地址薄作任何的修改,而且Ajax響應通過Expire或者Cacke-Control頭來實現緩存,那么就可以直接從上一次的緩存中讀取地址薄了。必須告知瀏覽器是使用緩存中的地址薄還是發送一個新的請求。這可以通過為讀取地址薄的Ajax URL增加一個含有上次編輯時間的時間戳來實現,例如,&t=11900241612等。如果地址薄在上次下載后沒有被編輯過,時間戳就不變,則從瀏覽器的緩存中加載從而減少了一次HTTP請求過程。如果用戶修改過地址薄,時間戳就會用來確定新的URL和緩存響應并不匹配,瀏覽器就會重要請求更新地址薄。
即使你的Ajxa響應是動態生成的,哪怕它只適用于一個用戶,那么它也應該被緩存起來。這樣做可以使你的Web2.0應用程序更加快捷。
5、推遲加載內容
你可以仔細看一下你的網頁,問問自己“哪些內容是頁面呈現時所必需首先加載的?哪些內容和結構可以稍后再加載?
把整個過程按照onload事件分隔成兩部分,Javascrīpt是一個理想的選擇。例如,如果你有用于實現拖放和動畫的Javascrīpt,那么它就以等待稍后加載,因為頁面上的拖放元素是在初始化呈現之后才發生的。其它的例如隱藏部分的內容(用戶操作之后才顯現的內容)和處于折疊部分的圖像也可以推遲加載
工具可以節省你的工作量:YUI Image Loader可以幫你推遲加載折疊部分的圖片,YUI Get utility是包含JS和 CSS的便捷方法。比如你可以打開Firebug的Net選項卡看一下Yahoo的首頁。
當性能目標和其它網站開發實踐一致時就會相得益彰。這種情況下,通過程序提高網站性能的方法告訴我們,在支持Javascrīpt的情況下,可以先去除用戶體驗,不過這要保證你的網站在沒有Javascrīpt也可以正常運行。在確定頁面運行正常后,再加載腳本來實現如拖放和動畫等更加花哨的效果。
6、預加載
預加載和后加載看起來似乎恰恰相反,但實際上預加載是為了實現另外一種目標。預加載是在瀏覽器空閑時請求將來可能會用到的頁面內容(如圖像、樣式表和腳本)。使用這種方法,當用戶要訪問下一個頁面時,頁面中的內容大部分已經加載到緩存中了,因此可以大大改善訪問速度。
下面提供了幾種預加載方法:
無條件加載:觸發onload事件時,直接加載額外的頁面內容。以Google.com為例,你可以看一下它的spirit image圖像是怎樣在onload中加載的。這個spirit image圖像在google.com主頁中是不需要的,但是卻可以在搜索結果頁面中用到它。
有條件加載:根據用戶的操作來有根據地判斷用戶下面可能去往的頁面并相應的預加載頁面內容。在search.yahoo.com中你可以看到如何在你輸入內容時加載額外的頁面內容。
有預期的加載:載入重新設計過的頁面時使用預加載。這種情況經常出現在頁面經過重新設計后用戶抱怨“新的頁面看起來很酷,但是卻比以前慢”。問題可能出在用戶對于你的舊站點建立了完整的緩存,而對于新站點卻沒有任何緩存內容。因此你可以在訪問新站之前就加載一部內容來避免這種結果的出現。在你的舊站中利用瀏覽器的空余時間加載新站中用到的圖像的和腳本來提高訪問速度。
7、減少DOM元素數量
一個復雜的頁面意味著需要下載更多數據,同時也意味著Javascrīpt遍歷DOM的效率越慢。比如當你增加一個事件句柄時在500和5000個DOM元素中循環效果肯定是不一樣的。
大量的DOM元素的存在意味著頁面中有可以不用移除內容只需要替換元素標簽就可以精簡的部分。你在頁面布局中使用表格了嗎?你有沒有僅僅為了布局而引入更多的<div>元素呢?也許會存在一個適合或者在語意是更貼切的標簽可以供你使用。
YUI CSS utilities可以給你的布局帶來巨大幫助:grids.css可以幫你實現整體布局,font.css和reset.css可以幫助你移除瀏覽器默認格式。它提供了一個重新審視你頁面中標簽的機會,比如只有在語意上有意義時才使用<div>,而不是因為它具有換行效果才使用它。
DOM元素數量很容易計算出來,只需要在Firebug的控制臺內輸入:
document.getElementsByTagName('*').length
那么多少個DOM元素算是多呢?這可以對照有很好標記使用的類似頁面。比如Yahoo!主頁是一個內容非常多的頁面,但是它只使用了700個元素(HTML標簽)。
8、根據域名劃分頁面內容
把頁面內容劃分成若干部分可以使你最大限度地實現平行下載。由于DNS查找帶來的影響你首先要確保你使用的域名數量在2個到4個之間。例如,你可以把用到的HTML內容和動態內容放在www.example.org上,而把頁面各種組件(圖片、腳本、CSS)分別存放在statics1.example.org和statics.example.org上。
你可在Tenni Theurer和Patty Chi合寫的文章Maximizing Parallel Downloads in the Carpool Lane找到更多相關信息。
文章來源于領測軟件測試網 http://www.kjueaiud.com/