Web前端優化最佳實踐及工具集錦

csdn發表於2013-09-23

Web前端優化

前端的效能對於一個Web應用來說非常重要，如果一個Web應用的頁面載入速度非常快、對於使用者的操作可以及時響應，那麼產品的使用者體驗將會極大地提升。下圖顯示了頁面載入速度對於使用者體驗的影響。

你的Web頁面的速度是否已經足夠快了？其實可能還有很多可以提升的地方。Google和雅虎也提出了一些Web應用的前端優化建議，併發布了一些工具，你可以逐一檢驗你的Web應用，以便達到更高的效能。

這些優化不僅僅可以給使用者提供更好的體驗，從開發者角度來說，進行優化還可以減少頁面的請求數、降低請求所佔的頻寬、減少資源的浪費。

下面來看看Google和雅虎提供的Web頁面優化最佳實踐。

一、Google的Web優化最佳實踐

1. 避免壞請求

有時頁面中的HTML或CSS會向伺服器請求一個不存在的資源，比如圖片或HTML檔案，這會造成瀏覽器與伺服器之間過多的往返請求，類似於：

瀏覽器：“我需要這個影象。”
伺服器：“我沒有這個影象。”
瀏覽器：“你確定嗎？這個文件說你有。”
伺服器：“真的沒有。”

如此一來，會降低頁面的載入速度。因此，檢查頁面中的壞連結非常有必要，你可以通過 Google的PageSpeed工具來檢測，找到問題後，補充相應的資原始檔或者修改資源的連結地址即可。

2. 避免CSS @import

使用 @import方法引用CSS檔案可以能會帶來一些影響頁面載入速度的問題，比如導致檔案按順序載入（一個載入完後才會載入另一個），而無法並行載入。

你可以使用 CSS delivery工具來檢測頁面程式碼中是否存在@import方法。比如，如果檢測結果中存在

@import url("style.css")

1	@import url("style.css")

則建議你使用下面的程式碼來替代。

<link rel="style.css" href="style.css" type="text/css">

1	<link rel="style.css" href="style.css" type="text/css">

3. 避免使用document.write

在JavaScript中，可以使用 document.write在網頁上顯示內容或呼叫外部資源，而通過此方法，瀏覽器必須採取一些多餘的步驟——下載資源、讀取資源、執行JavaScript來了解需要做什麼，呼叫其他資源時需要重新再執行一次這個過程。由於瀏覽器之前不知道要顯示什麼，所以會降低頁面載入的速度。

要知道，任何能夠被document.write呼叫的資源，都可以通過HTML來呼叫，這樣速度會更快。檢查你的頁面程式碼，如果存在類似於下面的程式碼：

document.write('<script src="another.js"></script>');

1	document.write('<script src="another.js"></script>');

建議修改為：

<script src="another.js"></script>

1	<script src="another.js"></script>

4. 合併多個外部CSS檔案

在網站中每使用一個CSS檔案，都會讓你的頁面載入速度慢一點點。如果你有一個以上的CSS檔案，你應該將它們合併為一個檔案。

你可以通過 CSS delivery工具來檢測頁面程式碼中的CSS檔案，然後通過複製貼上的方式將它們合併為一個。合併後記得修改頁面中的引用程式碼，並刪除舊的引用程式碼。

5. 合併多個外部JavaScript檔案

大部分情況下，網站往往會包含若干個 JavaScript檔案，但並不需要將這些檔案都獨立出來，其中有些是可以合併為一個檔案的。

你可以通過 resource check工具來檢測頁面中所引用的JavaScript檔案數，然後可以通過複製貼上的方式將多個檔案合併為一個。

6. 通過CSS sprites來整合影象

如果頁面中有6個小影象，那麼瀏覽器在顯示時會分別下載。你可以通過CSS sprites將這些影象合併成1個，可以減少頁面載入所需的時間。

CSS sprites需要有兩個步驟：整合影象、定點陣圖像。比如你可以通過下面的程式碼來分別定位下面影象中的上下兩部分。

.megaphone {width:50px; height:50px; background:url(images/sprite.png) 0 0px;}
.smile {width:50px; height:50px; background:url(images/sprite.png) 0 -50px;}

1 2	.megaphone {width:50px; height:50px; background:url(images/sprite.png) 0 0px;} .smile {width:50px; height:50px; background:url(images/sprite.png) 0 -50px;}

7. 延遲JavaScript的載入

瀏覽器在執行JavaScript程式碼時會停止處理頁面，當頁面中有很多JavaScript檔案或程式碼要載入時，將導致嚴重的延遲。儘管可以使用defer、非同步或將JavaScript程式碼放到頁面底部來延遲JavaScript的載入，但這些都不是一個好的解決方案。

下面是Google的建議。

<script type="text/javascript">
function downloadJSAtOnload() {
var element = document.createElement("script");
element.src = "defer.js";
document.body.appendChild(element);
}
if (window.addEventListener)
window.addEventListener("load", downloadJSAtOnload, false);
else if (window.attachEvent)
window.attachEvent("onload", downloadJSAtOnload);
else window.onload = downloadJSAtOnload;
</script>

function downloadJSAtOnload() {

var element = document.createElement("script");

element.src = "defer.js";

document.body.appendChild(element);

}

if (window.addEventListener)

window.addEventListener("load", downloadJSAtOnload, false);

else if (window.attachEvent)

window.attachEvent("onload", downloadJSAtOnload);

else window.onload = downloadJSAtOnload;

</script>

這段程式碼的意思是等待頁面載入完成後，然後再載入外部的“defer.js”檔案。下面是測試結果。

8. 啟用壓縮/ GZIP

使用gzip對HTML和CSS檔案進行壓縮，通常可以節省大約50％到70％的大小，這樣載入頁面只需要更少的頻寬和更少的時間。

你可以通過這個 Gzip壓縮工具來檢測頁面是否已經經過Gzip壓縮。

9. 啟用Keep-Alive

HTTP協議採用“請求-應答”模式，當使用普通模式（非KeepAlive模式）時，每個請求/應答客戶和伺服器都要新建一個連線，完成之後立即斷開連線（HTTP協議為無連線的協議）；當使用 Keep-Alive模式（又稱持久連線、連線重用）時，Keep-Alive功能使客戶端到伺服器端的連線持續有效，當出現對伺服器的後繼請求時，Keep-Alive功能避免了建立或者重新建立連線。

在HTTP 1.0中Keep-Alive預設是關閉的，需要在HTTP頭中加入“Connection: Keep-Alive”，才能啟用Keep-Alive；在 HTTP1.1中Keep-Alive預設啟用，加入“Connection: close”可關閉。目前大部分瀏覽器都是用HTTP 1.1協議，也就是說預設都會發起Keep-Alive的連線請求了，所以是否能完成一個完整的Keep- Alive連線就看Web伺服器的設定情況。

10. 將小的CSS和JavaScript程式碼內嵌到HTML中

如果你的CSS程式碼比較小，可以將這部分程式碼放到HTML檔案中，而不是一個外部CSS檔案，這樣可以減少頁面載入所需的檔案數，從而加快頁面的載入。同樣，也可以將小的 JavaScript指令碼程式碼內嵌到HTML檔案中。

<style type="text/css">
<!--CSS程式碼-->
</style>

<script type="text/javascript">
<!--JavaScript程式碼-->
</script>

</style>

</script>

11. 利用瀏覽器快取

在顯示頁面時，瀏覽器需要載入logo、CSS檔案和其他一些資源。瀏覽器快取所做的工作就是“記住”已經載入的資源，讓頁面的載入速度更快。

12. 壓縮CSS程式碼

不管你在頁面中如何使用CSS，CSS檔案都是越小越好，這會幫助你提升網頁的載入速度。你可以通過 Minify CSS工具來壓縮你的CSS程式碼。

壓縮前：

body
{
background-color:#d0e4fe;
}
h1
{
color:orange;
text-align:center;
}

body

{

background-color:#d0e4fe;

}

{

color:orange;

text-align:center;

}

壓縮後：

body {background-color:#d0e4fe;}
h1 {color:orange;text-align:center;}

1 2	body {background-color:#d0e4fe;} h1 {color:orange;text-align:center;}

13. 儘量減少DNS查詢次數

當瀏覽器與Web伺服器建立連線時，它需要進行DNS解析，將域名解析為IP地址。然而，一旦客戶端需要執行DNS lookup時，等待時間將會取決於域名伺服器的有效響應的速度。

雖然所有的ISP的DNS伺服器都能快取域名和IP地址對映表，但如果快取的DNS記錄過期了而需要更新，則可能需要通過遍歷多個DNS節點，有時候需要通過全球範圍內來找到可信任的域名伺服器。一旦域名伺服器工作繁忙，請求解析時就需要排隊，則進一步延遲等待時間。

因此，減少DNS的查詢次數非常重要，頁面載入時就儘量避免額外耗時。為了減少DNS查詢次數，最好的解決方法就是在頁面中減少不同的域名請求的機會。

你可以通過 request checker工具來檢測頁面中存在多少請求，然後進行優化。

14. 儘量減少重定向

有時為了特定需求，需要在網頁中使用重定向。重定向的意思是，使用者的原始請求（例如請求A）被重定向到其他的請求（例如請求B）。

但是這會造成網站效能和速度下降，因為瀏覽器訪問網址是一連串的過程，如果訪問到一半而跳到新地址，就會重複發起一連串的過程，這將浪費很多的時間。所以我們要儘量避免重定向，Google建議：

不要連結到一個包含重定向的頁面
不要請求包含重定向的資源

15. 優化樣式表和指令碼的順序

Style標籤和樣式表呼叫程式碼應該放置在JavaScript程式碼的前面，這樣可以使頁面的載入速度加快。

<head>
<meta name=description content="description"/>
<title>title</title>
<style>
page specific css code goes here
</style>
<script type="text/javascript">
javascript code goes here
</script>
</head>

<head>

<title>title</title>

<style>

page specific css code goes here

</style>

javascript code goes here

</script>

</head>

16. 避免JavaScripts阻塞渲染

瀏覽器在遇到一個引入外部JS檔案的<script>標籤時，會停下所有工作來下載並解析執行它，在這個過程中，頁面渲染和使用者互動完全被阻塞了。這時頁面載入就會停止。

谷歌建議刪除干擾頁面中第一屏內容載入的JavaScript，第一屏是指使用者在螢幕中最初看到的頁面，無論是桌面瀏覽器、手機，還是平板電腦。

17. 縮小原始影象

如果無需在頁面中顯示較大的影象，那麼就建議將影象的實際大小縮小為顯示的大小，這樣可以減少下載影象所需的時間。

18. 指定影象尺寸

當瀏覽器載入頁面的HTML程式碼時，有時候需要在圖片下載完成前就對頁面佈局進行定位。如果HTML裡的圖片沒有指定尺寸（寬和高），或者程式碼描述的尺寸與實際圖片的尺寸不符時，瀏覽器則要在圖片下載完成後再“回溯”該圖片並重新顯示，這將消耗額外的時間）。

所以，最好為頁面中的每一張圖片都指定尺寸，不管是在HTML裡的<img>標籤中，還是在CSS中。

二、雅虎的Web優化最佳實踐

1. 內容優化

儘量減少HTTP請求：常見方法包括合併多個CSS檔案和JavaScript檔案，利用CSS Sprites整合影象，Image map（影象中不同的區域設定不同的連結），內聯圖象（使用 data: URL scheme 在實際的頁面嵌入影象資料）等。
減少DNS查詢
避免重定向
使Ajax可快取
延遲載入元件：考慮哪些內容是頁面呈現時所必需首先載入的、哪些內容和結構可以稍後再載入，根據這個優先順序進行設定。
預載入元件：預載入是在瀏覽器空閒時請求將來可能會用到的頁面內容（如影象、樣式表和指令碼）。當使用者要訪問下一個頁面時，頁面中的內容大部分已經載入到快取中了，因此可以大大改善訪問速度。
減少DOM元素數量：頁面中存在大量DOM 元素，會導致JavaScript遍歷DOM的效率變慢。
根據域名劃分頁面內容：把頁面內容劃分成若干部分可以使你最大限度地實現平行下載。但要確保你使用的域名數量在2個到4個之間（否則與第2條衝突）。
最小化iframe的數量：iframes 提供了一個簡單的方式把一個網站的內容嵌入到另一個網站中。但其建立速度比其他包括JavaScript和CSS的DOM元素的建立慢了1-2個數量級。
避免404：HTTP請求時間消耗是很大的，因此使用HTTP請求來獲得一個沒有用處的響應（例如404沒有找到頁面）是完全沒有必要的，它只會降低使用者體驗而不會有一點好處。

2. 伺服器優化

使用內容分發網路（CDN）：把你的網站內容分散到多個、處於不同地域位置的伺服器上可以加快下載速度。
新增Expires或Cache-Control資訊頭：對於靜態內容，可設定檔案頭過期時間Expires的值為“Never expire（永不過期）”；對於動態內容，可使用恰當的Cache-Control檔案頭來幫助瀏覽器進行有條件的請求。
Gzip壓縮
設定ETag：ETags（Entity tags，實體標籤）是web伺服器和瀏覽器用於判斷瀏覽器快取中的內容和伺服器中的原始內容是否匹配的一種機制。
提前重新整理緩衝區：當使用者請求一個頁面時，伺服器會花費200到500毫秒用於後臺組織HTML檔案。在這期間，瀏覽器會一直空閒等待資料返回。在PHP中，可以使用flush()方法，它允許你把已經編譯的好的部分HTML響應檔案先傳送給瀏覽器，這時瀏覽器就會可以下載檔案中的內容（指令碼等）而後臺同時處理剩餘的HTML頁面。
對Ajax請求使用GET方法：當使用XMLHttpRequest時，瀏覽器中的POST方法會首先傳送檔案頭，然後才傳送資料。因此使用GET最為恰當。
避免空的影象src

3. Cookie優化

減小cookie大小：去除不必要的coockie，並使coockie體積儘量小以減少對使用者響應的影響
針對Web元件使用域名無關的Cookie：對靜態元件的Cookie讀取是一種浪費，使用另一個無Cookie的域名來存放靜態元件是一個好方法，或者也可以在Cookie中只存放帶www的域名。

4. CSS優化

將CSS程式碼放在HTML頁面的頂部
避免使用CSS表示式：CSS表示式在執行時候的運算量非常大，會對頁面效能產生大的影響
使用<link>來代替@import
避免使用Filters：IE獨有屬性AlphaImageLoader用於修正IE 7以下版本中PNG圖片的半透明效果，但它的問題在於瀏覽器載入圖片時它會終止內容的呈現並且凍結瀏覽器。

5. JavaScript優化