【前端開發】25種提高網頁載入速度的方法和技巧

【前端開發】25種提高網頁載入速度的方法和技巧

尊重原創：http://blog.csdn.net/wxzking/article/details/4089384

您希望加快網頁的載入速度嗎？瞭解如何通過縮短載入時間來改善撥接使用者的瀏覽體驗，在某些情形下，載入時間最多可縮短 80%。下面介紹二十五中網速方法和技巧。

一、使用良好的結構
可延伸 HTML (XHTML) 具有許多優勢，但是其缺點也很明顯。XHTML 可能使您的頁面更加符合標準，但是它大量使用標記（強制性的 <start> 和 <end> 標記），這意味著瀏覽器要下載更多代碼。所以，事情都有兩面性，嘗試在您的網頁中使用較少的 XHTML 程式碼，以減小頁面大小。如果您確實不得不使用 XHTML，試著儘可能對它進行最佳化。

二、不要使布局超載
堅持簡約原則：少即是多。頁面中充斥著各種類型的映像、視頻、廣告等，這大大違背實用性原則。

三、不要使用映像來表示文本
使用映像表示文本的最常見樣本就是在導覽列中。美觀的按鈕更加具有吸引力，但是它們的載入速度很慢。此外，映像仍然不能由搜尋引擎直接索引，因此，使用映像進行導航不利於搜尋引擎最佳化（search engine optimization，SEO）。當無需映像就可以通過大量 CSS 技巧建立漂亮的按鈕時，絕不使用映像來表示文本。

四、檢查cookie使用方式
設定一個較早的 expire 日期或者根本不設定 expire 日期，會縮短回應時間。要在 PHP 語言中設定 cookie 的 expire 日期，使用以下代碼：

<?php 
 $expire = 2592000 + time(); 
 // Add 30 day’s to the current time 
 setcookie(userid, “123rrw3”, $expire);
?>

這段代碼設定 cookie userid，並將 expire 日期設定為自當前日期之後 30 天。

五、不要包含不必要的 JavaScript 代碼，儘可能將其外部化
應該明智地使用 JavaScript（僅在真正必要時才使用）並最佳化指令碼的大小和速度。縮短 JavaScript 下載時間的另一種方式是使用外部檔案，而不是包含指令碼內聯。這種方法也適用於 CSS，因為瀏覽器會緩衝外部化的文本，而（在 HTML 頁面自身中）以內聯方式編碼的 CSS 或 JavaScript 每次都會隨 HTML 一起載入。

六、儘可能避免使用表格
表格被用作網頁的主要構建塊，但是作為頁面配置元素，使用表格現在被認為是糟糕的做法。有時候，您必須使用表格（並且它們被認為是顯示表格資料的出色實踐）。如果是這樣，明確地指定表格單元格、行和列的寬度和高度，否則，瀏覽器必須執行許多操作來計算如何顯示它們，這會降低頁面載入速度。

七、刪除任何不必要的元素
可能這是所有技巧中最顯而易見的一個，但是它也是最容易忘記的一個技巧。如果您真正需要在網頁上放置許多內容，考慮將網頁分為 2 個、3 個或更多的獨立頁面。

八、一些最佳化網頁的技巧
可以使用許多方法來最佳化您的網頁，包括壓縮 JavaScript 檔案，使用超文字傳輸通訊協定 (HTTP)（Hypertext Transfer Protocol，HTTP）壓縮，以及設定映像大小。

九、壓縮和縮小 JavaScript 檔案
您可以使用 GNU zip (gzip) 來完成此任務，因為許多瀏覽器都支援這種壓縮演算法。另一種替代方法是縮小檔案。這種方法刪除代碼中所有不必要的字元，比如定位字元（tab）、新行和空格。它刪除代碼中的注釋和空白，進一步縮小檔案大小。外部和內部樣式表都可以縮小。兩種最流行的縮小工具是 JSMin 和 YUI Compressor。

十、使用 HTTP 壓縮，並始終使用小寫 div 和類名
可以使用 HTTP 壓縮來減少伺服器與瀏覽器之間的通訊量。可以在 Apache 中配置 HTTP 壓縮（.htaccess 檔案），或者可以將其包含到頁面中（對於 PHP，可以使用一個 HTTP_ACCEPT_ENCODING 選項）。但是請注意：不是所有瀏覽器都支援壓縮。即使是支援壓縮的瀏覽器，壓縮和解壓縮都會加重處理器的負載。要在 Apache 中啟用地毯式（blanket）壓縮（即壓縮所有文本和 HTML），使用以下命令：
AddOutputFilterByType DEFLATE text/html text/plain text/xml

另外，考慮一下您想要壓縮的內容。映像、音樂和視頻在建立時已經進行了壓縮，因此您可以將壓縮對象限制為 HTML、CSS 和 JavaScript 檔案。另一種減少壓縮工作的技巧是使用小寫形式的 <div> 元素和類名。由於大小寫敏感性，並且使用的是無損壓縮，<header> 與 <Header> 不同，它們被壓縮為兩個不同的標記。

十一、設定映像大小
與表格單元格、行和列一樣，當您未明確設定映像大小時，瀏覽器需要執行計算來顯示映像，這會降低處理速度。

十二、將 CSS 影像地圖用於裝飾功能
使用影像地圖代替多個映像，這是另一種縮短載入時間的方式，因為同時下載映像的各個獨立部分能夠加快整個頁面的下載進度。或者，您可以使用某種名為 CSS sprites 的工具。CSS sprites 可協助減少 HTTP 要求的數量。一個映像可以包含裝飾或布置頁面所需的所有映像元素。您使用 CSS 來選擇（通過調用某些位置和維度）用於特定元素的映射。

十三、儘可能延遲指令碼載入
一種提升頁面下載速度的潛在方式是將指令碼放在頁面的底部，使頁面載入更迅速。通常，瀏覽器只能（從同一個域）下載不超過兩個並行對象，如果一個對象是一段 JavaScript 代碼，那麼在該指令碼下載完之前，其他頁面組件的下載將會暫停。如果將 JavaScript 代碼放在頁面底部，（在大多數情況下）它將在最後下載，這時所有其他組件都已下載完。

十四、按需載入 JavaScript 檔案
要按需載入 JavaScript，使用 import() 函數。
import() 函數：    
function $import(src){
  var scriptElem = document.createElement('script');
  scriptElem.setAttribute('src',src);
  scriptElem.setAttribute('type','text/javascript');
  document.getElementsByTagName('head')[0].appendChild(scriptElem);
}

// import with a random query parameter to avoid caching
function $importNoCache(src){
  var ms = new Date().getTime().toString();
  var seed = "?" + ms; 
  $import(src + seed);
}

十五、驗證函式載入
也可以驗證一個函數是否被載入，如果沒有，載入 JavaScript 檔案。 
驗證函式是否被載入：    
if (myfunction){
  // The function has been loaded
}
else{ // Function has not been loaded yet, so load the javascript.
  $import('http://www.yourfastsite.com/myfile.js');
}

注意：可以使用 defer 屬性，但不是所有瀏覽器（包括 Firefox）都支援它。

十六、最佳化 CSS 檔案
如果經過適當最佳化和維護，CSS 檔案不一定很大。例如，具有很多獨立類的 CSS 檔案會影響下載速度。與 JavaScript 檔案一樣，您需要最佳化 CSS 檔案，使其包含所需的所有內容，同時保持合理的大小。另外，使用外部檔案代替內聯定義來適應瀏覽器的緩衝機制。

十七、使用內容分布網路
內容分布網路（Content-distribution network，CDN）是另一種縮短下載時間的好方法。當您將靜態映像放在 Internet 上的許多伺服器上時，使用者能夠從離他們最近的伺服器下載這些映像。此外，大多數 CDN 都在快速伺服器上運行，因此無論伺服器的載入速度如何，其響應速度都比小型的超載伺服器快。

十八、對資產使用多個域來增加串連
CDN 的另一個優勢是它們是獨立的域。因為您的瀏覽器將並發串連的數量限制到一個單一的域，因此無論何時載入一個頁面，都很容易佔滿所有線程。因此，到其他資產的串連被延遲了。然而，您的瀏覽器能夠開啟新線程或到其他域的串連，這樣，從另一個域載入的任何資產都可以與其他所有資產同時載入。

十九、在合適的時候使用 Google Gears
使用 Google Gears（參見 參考資料）是避免使用者反覆下載同一內容的另一種好方法。Gears 允許使用者離線訪問 Web 應用程式，但是也允許將頁面元素持久化到使用者的電腦上。因此，頻繁載入但未進行更新的內容可以儲存在 Gears 資料庫中，該資料庫是一個 SQLite3 關聯式資料庫管理系統。對同一內容的所有 next 請求都可以從資料庫（而不是伺服器）直接載入。

二十、使用 PNG 格式的映像

Graphic Interchange Format (GIF) 和 Joint Photographic Experts Group (JPEG) 映像格式都已淘汰了：Portable Network Graphic (PNG) 是未來流行的格式。當然，您可以說 GIF 和 JPEG 已經消亡，或者 PNG 沒有任何缺陷，但是所有事物都有各自的優缺點，PNG 以最佳的檔案大小提供了出色的品質。因此，如果進行選擇的話，應該儘可能使用 PNG 映像。

二十一、保持 Ajax 調用簡短、準確
當統稱為 Asynchronous JavaScript + XML (Ajax) 的技術在兩年前出現時，這些技術為處理頁面請求和響應提供了一種革命性方法。然而，撥號使用者可能從來沒機會體驗其真正的優勢，因為在許多情形下，Ajax 需要在瀏覽器與伺服器之間大量通訊。因此，如果您能夠保持 Ajax 調用簡短和準確，可以避免使用者花費無止盡的時間來等待元素重新整理或響應。

二十二、進行一次較大的 Ajax 調用並在本地處理客戶機資料

如果不能進行簡短的 Ajax 調用，或者如果這些調用不能提供期望的結果，可以考慮一種替代方法：進行一次大的 Ajax 調用來擷取所需的一切內容，然後讓客戶機在本地處理資料。通過這種方式，客戶機只需等待一次（擷取傳入的資料），但是在此之後（當瀏覽器與伺服器之間沒有必要通訊時），處理速度將更快。當然，還有大量 Ajax 最佳化技術，本教程無法一一列出。

二十三、在沙箱中測試代碼

還有一個經常被遺忘的常用技巧。儘管清醒的 Web 開發人員通常會在啟動應用程式之前對其進行測試，但是有時候測試會使他們不那麼重視維護任務，或者新功能添加得太快，並且未經過充分考慮或測試。結果，餘下的指令碼減緩了應用程式的速度。如果您添加一項新功能，可以首先在沙箱裡（完全脫離了應用程式的其餘部分）進行測試，查看它作為單個函數的行為。通過這種方式，您可以反覆檢查，並分析效能和回應時間，無需考慮 Web 應用程式的其餘部分。然後，當新功能的行為符合預期時，可以將其引入到應用程式的其餘部分中，運行其他測試，保證功能本身的行為符合預期。

二十四、分析站台碼
在許多情境中，自我反省是一個不錯的建議。幸運的是，在開發過程中，我們可以使用工具來協助反省，並儘可能客觀地進行實踐。像 JSLint（參見 參考資源）這樣的工具的價值是無法衡量的，儘管其網站宣稱它 “可能令您備受挫折”，因為它向您提供了所有的潛在代碼缺陷，這些缺陷不但使調試更加困難，而且可能導致更長的回應時間。

二十五、檢查孤立的檔案和丟失的映像
檢查孤立的檔案和丟失的映像是一種明智之舉。大部分 Web 開發人員都會檢查錯誤的檔案引用，但是這裡仍然需要說明一下。丟失的檔案容易引起各種問題，因為它們會導致 “The image/page cannot be displayed” 之類的錯誤訊息。但是在網頁速度最佳化方面，它們具有更大的缺陷：當瀏覽器尋找丟失的或孤立的檔案時，它會消耗資源，這不可避免地會導致頁面處理速度變慢。因此，請檢查孤立或丟失的檔案，包括拼字錯誤的檔案名稱。

http://www.ibm.com/developerworks/cn/web/wa-speedweb/?S_TACT=105AGX52&S_CMP=tec-csdn