前台頁面最佳實務的幾個準則-3

轉載自 ：http://hi.baidu.com/redstorm_wu/blog/item/011ca4fea05c463b5d600809.html1.1 使用Get方法擷取Ajax請求

Yahoo郵件團隊發現使用XMLHttpRequest時，POST的方式在瀏覽器中分兩步實現，第一步是發送要求標頭部，第二部是發送請求資料；而GET方式在發送的請求長度小於2k時，請求和資料都會在一個TCP包中發送。從以上發現中，我們看到POST請求並不像GET請求那樣發送資料，根據HTTP規範，GET是查詢資訊的方式，POST用來向服務端提交需要儲存的資料。因此當你只是向伺服器查詢資料時，使用GET方式就是很自然的事。
1.2 消極式載入頁面元素

你應該仔細檢查頁面，弄明白哪些內容是頁面初次渲染時必須的，哪些內容可以等到以後再載入。一般情況下，JS代碼可以消極式載入，比如要實現頁面拖動或者動畫效果的JS。另外一些能夠消極式載入的內容包括初始頁面中隱藏的內容以及在檔案夾下面的圖片（頁面第一次展現的時候不顯示，等操作員開啟檔案夾才顯示出來）等。

如果你能確認頁面在沒有JS的時候能夠正常運行，那麼你就可以消極式載入頁面中的JS，來提高客戶體驗。
1.3 提前載入頁面元素

提前載入看起來和消極式載入剛好相反，實際上提前載入和消極式載入有截然不同的目標。消極式載入是通過延遲頁面元素的載入時間以提高頁面的響應速度；而提前載入是當瀏覽器閒置時候，提前載入將來可能使用到的頁面元素（像圖片、樣式表和指令碼），這樣在展示用到這些內容的頁面時，就會獲得更好的響應速度。

提前載入有幾種類型：無條件提前載入：只要當前頁面觸發onload事件，就開始提前載入一些特殊的頁面元素。在google的網站上，我們能看到提前載入技術的應用，在使用者開啟首頁後（還沒有進行搜尋的動作），瀏覽器就開始載入用於搜尋結果展示的圖片。有條件提前載入：根據使用者動作來分析使用者下一步可能的動作，以進行提前載入。在yahoo搜尋的首頁上，我們能看到這種技術的應用。
1.4 減少DOM元素數

複雜的頁面需要更多的儲存空間（會導致下載該頁面的速度變慢），同時還會減緩JS對頁面DOM元素的訪問（因為DOM樹的複雜度提高）。如果你的頁麵包含大量的DOM元素，大多數情況下，這表明你的頁面需要最佳化。你是否僅僅為了頁面的布局而使用了表嵌套？或者僅僅因為頁面配置引入了過多的div標籤？使用YUI CSS utilities能方便你進行頁面配置的操作，避免引入過多的DOM對象。

使用Firebug能很容易檢查頁面中包含了多少個DOM對象，只需在控制台中輸入下面語句：document.getElementByTagName(‘*’).length。那麼頁面中包含多少個DOM對象合適呢？這個沒有明確的標準，但可以對比做的比較好的網站得出答案。例如，Yahoo網站的首頁包含相當多的內容，它的DOM對象不到700個。
1.5 拆分頁面元素到幾個域

將頁面的內容分開放置在不同域的伺服器上，以最大限度的提高並發。但是要注意，網域服務器最佳的配置是2-4個，再多的話就會因為要頻繁尋找DNS伺服器而導致效能下降。
1.6 少用iframe

Iframe允許將一個完整的html頁面嵌入到父頁面中，要想更高效地使用iframe，必須瞭解iframe的優點和缺點。

Iframe的優點：很適合用於展示第三方提供的展現速度慢的內容，包括商標標識和廣告等；提供安全沙箱；可以並發下載指令碼代碼。

Iframe的缺點：資源消耗大（即使一個空白的iframe，都會佔用很多資源）；會阻塞頁面載入；無語義。
1.7 避免404頁面

HTTP請求耗費資源代價昂貴，因此讓一個HTTP請求返回一個完全無用的響應（比如404），絕對是錯誤的。有些網站在找不到請求的內容時，會提供有用的“404”返回，比如提供給使用者另外一個選擇。即使如此，這樣的互動過程依然浪費了伺服器的資源，最糟糕的情況發生在請求外部JS出錯，首先請求外部JS時會阻塞其他頁面元素的下載，其次瀏覽器還要花費時間解析伺服器返回的404頁面，它試圖從響應中尋找請求的JS內容。
1.8 降低Cookie大小

Cookies被用來做校正以及提供個人化響應，在客戶瀏覽頁面的過程中，cookies中的資訊被放在HTTP頭部在瀏覽器和伺服器之間交換。因此要盡量減少cookies的大小，以此降低進行cookies資訊交換的資源消耗。關於cookies數量過多導致的問題，請看這篇分析文檔：http://yuiblog.com/blog/2007/03/01/performance-research-part-3/。

控制cookies的大小，要遵從以下幾個準則：刪除不必要的cookies；盡量減少cookies的數量；合理設計cookies所處的域，以避免在子域中引入沒有必要的主域cookies；合理設定cookies的逾時時間長度。
1.9 使用不支援Cookie的域

瀏覽器請求一個靜態圖片並隨這個請求發送cookies，瀏覽器收到該請求後，它並不使用cookies，這些cookies只是產生無用的網路流量。因此所有靜態HTTP請求，不應該發送cookies。在實際工作中可以建立一個子域，在該子域上部署所有的靜態元素，為該子網域設定不發送cookies的設定，從而提高應用的響應速度。

比如你的應用網域名稱為www.example.org，你可能將應用的靜態內容部署到網域名稱為static.example.org上。但是，如果你已經在頂級域example.org上設定了cookies，那麼所有到static.example.org的請求都會包含cookies。在這種情況下，你需要購買一個全新的網域名稱，用來部署應用的靜態內容，以設定不使用cookies。比如，Yahoo使用yimg.com部署靜態內容，YouTube使用ytimg.com，Amazon使用images-amazon.com。

另外一個不使用cookies的好處是，如果請求帶有cookies，有些代理可能會拒絕緩衝該請求的響應。
1.10 最小化DOM元素訪問

使用JS訪問DOM元素速度緩慢，因此要想獲得更快的響應，你應該遵循以下原則：緩衝要訪問的DOM元素的引用；Update nodes “offline” and then add them to the tree；避免使用JS設定頁面配置。要獲得更多這方面的資訊，請訪問http://yuiblog.com/blog/2007/12/20/video-lecomte/。
1.11 智能化事件處理

有時候頁面的反應速度慢是因為頁面DOM樹的元素上綁定了太多事件處理方法，這些事件處理方法不斷執行導致頁面響應速度緩慢。使用代理可以比較好的解決該問題，假設在一個div裡面有10個按鈕，在div那裡綁定一個事件處理方法要比在每一個按鈕上綁定一個事件處理方法高效的多。

另外一個智能化的JS處理方式是，你的JS對頁面元素的操作不用等到整個頁面載入完成，只要你訪問的元素在頁面的DOM樹中建立完成，你就可以引用該元素，而不用等到頁面將所有的圖片和樣式載入完成，一直到onload事件觸發才進行以後的操作。