轉 Web程序優化的最佳實踐（網站內容篇）

四、可緩存的 AJAX

Ajax 常常被說起的一個好處就是因爲其從後臺服務器傳輸信息的異步性而爲用戶帶來 的反饋的即時性。可是，使用 Ajax 並不能保證用戶不會在等待異步的 JavaScript 和 XML 響應上花費時間。在不少應用中，用戶是否須要等待響應取決於 Ajax 如何來使用。例 如，在一個基於 Web 的 Email 客戶端中，用戶必須等待 Ajax 返回符合他們條件的郵件

查詢結果。記住一點，"異步"並不異味着"即時"，這很重要。

爲了提升性能，優化Ajax響應是很重要的。提升Ajxa性能的措施中最重要的方法就是使 響應具備可緩存性，具體的討論能夠查看Add an Expires or a Cache-Control Header。 其它的幾條規則也一樣適用於Ajax： Gizp壓縮文件，減小DNS查找次數，精簡JavaScript，避免跳轉，配置ETags

讓咱們來看一個例子：一個 Web2.0 的 Email 客戶端會使用 Ajax 來自動完成對用戶地址 薄的下載。若是用戶在上次使用過 Email web 應用程序後沒有對地址薄做任何的修改， 並且 Ajax 響應經過 Expire 或者 Cacke-Control 頭來實現緩存，那麼就能夠直接從上一 次的緩存中讀取地址薄了。

必須告知瀏覽器是使用緩存中的地址薄仍是發送一個新的請 求。這能夠經過爲讀取地址薄的 Ajax URL 增長一個含有上次編輯時間的時間戳來實現， 例如，&t=11900241612 等。若是地址薄在上次下載後沒有被編輯過，時間戳就不變，則從瀏覽器的緩存中加載從而減小了一次 HTTP 請求過程。若是用戶修改過地址薄，時間 戳就會用來肯定新的 URL 和緩存響應並不匹配，瀏覽器就會重要請求更新地址薄。 即便你的 Ajxa 響應是動態生成的，哪怕它只適用於一個用戶，那麼它也應該被緩存起 來。這樣作可使你的 Web2.0 應用程序更加快捷。

五、推遲加載內容

你能夠仔細看一下你的網頁，問問本身"哪些內容是頁面呈現時所必需首先加載的？哪 些內容和結構能夠稍後再加載？ 把整個過程按照onload事件分隔成兩部分，JavaScript是一個理想的選擇。例如，若是 你有用於實現拖放和動畫的JavaScript，那麼它就以等待稍後加載，由於頁面上的拖放 元素是在初始化呈現以後才發生的。其它的例如隱藏部分的內容（用戶操做以後才顯現 的內容）和處於摺疊部分的圖像也能夠推遲加載

工具能夠節省你的工做量：YUI Image Loader能夠幫你推遲加載摺疊部分的圖片，YUI Get utility是包含JS和 CSS的便捷方法。好比你能夠打開Firebug的Net選項卡看一下Yahoo 的首頁。

當性能目標和其它網站開發實踐一致時就會相得益彰。這種狀況下，經過程序提升網站 性能的方法告訴咱們，在支持JavaScript的狀況下，能夠先去除用戶體驗，不過這要保 證你的網站在沒有JavaScript也能夠正常運行。在肯定頁面運行正常後，再加載腳原本

實現如拖放和動畫等更加花哨的效果。

六、預加載

預加載和後加載看起來彷佛偏偏相反，但實際上預加載是爲了實現另一種目標。預加 載是在瀏覽器空閒時請求未來可能會用到的頁面內容（如圖像、樣式表和腳本）。使用 這種方法，當用戶要訪問下一個頁面時，頁面中的內容大部分已經加載到緩存中了，因 此能夠大大改善訪問速度。

下面提供了幾種預加載方法：

無條件加載：觸發 onload 事件時，直接加載額外的頁面內容。以 Google.com 爲例，你 能夠看一下它的 spirit image 圖像是怎樣在 onload 中加載的。這個 spirit image 圖 像在 google.com 主頁中是不須要的，可是卻能夠在搜索結果頁面中用到它。

有條件加載：根據用戶的操做來有根據地判斷用戶下面可能去往的頁面並相應的預加載 頁面內容。在 search.yahoo.com 中你能夠看到如何在你輸入內容時加載額外的頁面內容。

有預期的加載：載入從新設計過的頁面時使用預加載。這種狀況常常出如今頁面通過重 新設計後用戶抱怨"新的頁面看起來很酷，可是卻比之前慢"。問題可能出在用戶對於 你的舊站點創建了完整的緩存，而對於新站點卻沒有任何緩存內容。所以你能夠在訪問 新站以前就加載一部內容來避免這種結果的出現。在你的舊站中利用瀏覽器的空餘時間

加載新站中用到的圖像的和腳原本提升訪問速度。

七、減小DOM元素數量

一個複雜的頁面意味着須要下載更多數據，同時也意味着JavaScript遍歷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標籤）。

八、根據域名劃分頁面內容

把頁面內容劃分紅若干部分可使你最大限度地實現平行下載。因爲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找到更多相關信息。

九、使 iframe 的數量最小

ifrmae 元素能夠在父文檔中插入一個新的 HTML 文檔。瞭解 iframe 的工做理而後才能更 加有效地使用它，這一點很重要。

<iframe>優勢：

 

• 解決加載緩慢的第三方內容如圖標和廣告等的加載問題

• Security sandbox

• 並行加載腳本

<iframe>的缺點：

• 即時內容爲空，加載也須要時間

• 會阻止頁面加載

• 沒有語意

十、不要出現 404 錯誤

HTTP 請求時間消耗是很大的，所以使用 HTTP 請求來得到一個沒有用處的響應（例如 404 沒有找到頁面）是徹底沒有必要的，它只會下降用戶體驗而不會有一點好處。

有些站點把 404 錯誤響應頁面改成"你是否是要找***"，這雖然改進了用戶體驗可是 一樣也會浪費服務器資源（如數據庫等）。最糟糕的狀況是指向外部 JavaScript 的鏈 接出現問題並返回 404 代碼。首先，這種加載會破壞並行加載；其次瀏覽器會把試圖在

返回的 404 響應內容中找到可能有用的部分看成 JavaScript 代碼來執行。