Web前端效能最佳化

標籤：des   style   http   color   java   使用   os   io   

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

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

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

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

一、Google的Web最佳化最佳實務

1.  避免壞請求

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

 

• 瀏覽器：“我需要這個映像。”
• 伺服器：“我沒有這個映像。”
• 瀏覽器：“你確定嗎？這個文檔說你有。”
• 伺服器：“真的沒有。”

 

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

2.  避免CSS @import

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

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

1	@import url("style.css")

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

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

3.  避免使用document.write

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

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

1	document.write(‘<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需要有兩個步驟：整合映像、定位元影像像。比如你可以通過下面的代碼來分別定位下面映像中的上下兩部分。

12	.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的建議。

 

123456789101112

<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>

 

這段代碼的意思是等待頁面載入完成後，然後再載入外部的“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檔案中。

1234567

<style type="text/css"><!--CSS代碼--></style> <script type="text/javascript"><!--JavaScript代碼--></script>

 

11.  利用瀏覽器緩衝

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

12.  壓縮CSS代碼

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

壓縮前：

 

123456789

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

 

壓縮後：

 

12	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代碼的前面，這樣可以使頁面的載入速度加快。

 

12345678910

<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>

 

16.  避免JavaScripts阻塞渲染

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

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

17.  縮小原始映像

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

18.  指定映像尺寸

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

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

更多資訊： https://developers.google.com/speed/docs/insights/rules

二、雅虎的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最佳化

• 將JavaScript指令碼放在頁面的底部
• 將JavaScript和CSS作為外部檔案來引用：在實際應用中使用外部檔案可以提高頁面速度，因為JavaScript和CSS檔案都能在瀏覽器中產生緩衝。
• 縮小JavaScript和CSS
• 重複資料刪除的指令碼
• 最小化DOM的訪問：使用JavaScript訪問DOM元素比較慢
• 開發智能的事件處理常式

 

6. 映像最佳化

• 最佳化圖片大小
• 通過CSS Sprites最佳化圖片
• 不要在HTML中使用縮放圖片
• favicon.ico要小而且可緩衝

 

7. 針對移動最佳化

• 保持組件大小在25KB以下：主要是因為iPhone不能緩衝大於25K的檔案（注意這裡指的是解壓縮後的大小）。
• 將組件打包成為一個複合文檔：把頁面內容打包成複合文本就如同帶有多附件的Email，它能夠使你在一個HTTP請求中擷取多個組件。

更多資訊：http://developer.yahoo.com/performance/rules.html（中文翻譯）

 

三、一些工具

1.  Google PageSpeed

Google提供了 PageSpeed工具，這是一個瀏覽器外掛程式，可以很好地應用上文中Google所提到的Web最佳化實踐——協助你輕鬆對網站的效能瓶頸進行分析，並為你提供最佳化建議。

• 線上分析你的網站
• 安裝瀏覽器外掛程式（ Chrome、 Firefox）
• 通過 Insights API在應用中嵌入PageSpeed功能

 

2.  雅虎 YSlow

YSlow是雅虎推出的一款瀏覽器外掛程式，可以協助你對網站的頁面進行分析，並為你提供一些最佳化建議，以提高網站的效能。

 

• Firefox外掛程式
• Chrome外掛程式
• YSlow for Mobile/Bookmarklet
• 源碼

 

3. 其他分析最佳化工具

• 蜘蛛模擬器：這個工具可以分析你的頁面，並提供一些最佳化建議。
• 映像SEO工具：這個工具可以檢查圖片的alt標籤，並提供一些最佳化建議。
• 請求檢查器：找出頁面中需要載入哪些資源和服務。
• 連結檢查器：檢查頁面中內部、外部和無效連結。
• HTTP頭檢查：顯示網頁或資源的HTTP回應標頭。
• 社交檢查器：檢查頁面中的社交組件，比如Google+、Facebook、Twitter、Linkedin和Pinterest。
• If modified檢查器：檢查頁面是否接受 If-Modified-Since HTTP頭。
• Gzip檢查器：檢查頁面是否經過了Gzip壓縮。
• CSS delivery工具：檢查頁面中所使用的CSS檔案。
• 麵包屑工具：可根據你輸入的資訊提供麵包屑導航的代碼。
• CSS壓縮公用程式：用於壓縮CSS代碼。

通過以上的最佳化建議和最佳化工具，可以輕鬆找到影響你的Web頁面效能的瓶頸，輕鬆實現Web頁面效能的提升。如果你也有Web最佳化方面的經驗，歡迎分享。