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

時間  2019-11-07
標籤 web 前端 優化 最佳 實踐 工具 集錦 欄目 HTML 简体版
原文   原文鏈接

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

發表於 2013-09-23 19:47| 21315次閱讀| 來源Googe & Yahoo| 118 條評論| 做者王果 編譯
Web優化 Google 雅虎 PageSpeed YSlow
摘要：前端的性能對於Web應用的用戶體驗來講很是重要。不要覺得你的Web應用的性能已經足夠好了，其實還會有不少能夠提高的地方。本文將介紹Google和雅虎關於前端優化的最佳實踐以及工具，你能夠逐一檢驗你的Web應用。

前端的性能對於一個Web應用來講很是重要，若是一個Web應用的頁面加載速度很是快、對於用戶的操做能夠及時響應，那麼產品的用戶體驗將會極大地提高。下圖顯示了頁面加載速度對於用戶體驗的影響。javascript


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

這些優化不只僅能夠給用戶提供更好的體驗，從開發者角度來講，進行優化還能夠減小頁面的請求數、下降請求所佔的帶寬、減小資源的浪費。html

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

1、Google的Web優化最佳實踐

1.  避免壞請求 java

有時頁面中的HTML或CSS會向服務器請求一個不存在的資源，好比圖片或HTML文件，這會形成瀏覽器與服務器之間過多的往返請求，相似於：git

  • 瀏覽器：「我須要這個圖像。」
  • 服務器：「我沒有這個圖像。」
  • 瀏覽器：「你肯定嗎？這個文檔說你有。」
  • 服務器：「真的沒有。」


如此一來，會下降頁面的加載速度。所以，檢查頁面中的壞連接很是有必要，你能夠經過 Google的PageSpeed工具 來檢測，找到問題後，補充相應的資源文件或者修改資源的連接地址便可。github

2.  避免CSS @import web

使用 @import方法引用CSS文件能夠能會帶來一些影響頁面加載速度的問題，好比致使文件按順序加載（一個加載完後纔會加載另外一個），而沒法並行加載。ajax

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

[css] view plain copy
  1. @import url("style.css")  

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

[html] view plain copy
  1. <link rel="style.css" href="style.css" type="text/css">  

3.  避免使用document.write

在JavaScript中，可使用 document.write在網頁上顯示內容或調用外部資源，而經過此方法，瀏覽器必須採起一些多餘的步驟——下載資源、讀取資源、運行JavaScript來了解須要作什麼，調用其餘資源時須要從新再執行一次這個過程。因爲瀏覽器以前不知道要顯示什麼，因此會下降頁面加載的速度。

要知道，任何可以被document.write調用的資源，均可以經過HTML來調用，這樣速度會更快。檢查你的頁面代碼，若是存在相似於下面的代碼：

[js] view plain copy
  1. document.write('<script src="another.js"></script>');  

建議修改成：

[html] view plain copy
  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須要有兩個步驟：整合圖像、定位圖像。好比你能夠經過下面的代碼來分別定位下面圖像中的上下兩部分。

[css] view plain copy
  1. .megaphone {width:50px; height:50px; background:url(images/sprite.png) 0 0px;}  
  2. .smile {width:50px; height:50px; background:url(images/sprite.png) 0 -50px;}  

7. 延遲JavaScript的加載

瀏覽器在執行JavaScript代碼時會中止處理頁面，當頁面中有不少JavaScript文件或代碼要加載時，將致使嚴重的延遲。儘管 可使用defer、異步或將JavaScript代碼放到頁面底部來延遲JavaScript的加載，但這些都不是一個好的解決方案。

下面是Google的建議。

[js] view plain copy
  1. <script type="text/javascript">  
  2. function downloadJSAtOnload() {  
  3. var element = document.createElement("script");  
  4. element.src = "defer.js";  
  5. document.body.appendChild(element);  
  6. }  
  7. if (window.addEventListener)  
  8. window.addEventListener("load", downloadJSAtOnload, false);  
  9. else if (window.attachEvent)  
  10. window.attachEvent("onload", downloadJSAtOnload);  
  11. else window.onload = downloadJSAtOnload;  
  12. </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文件中。

[html] view plain copy
  1. <style type="text/css">  
  2. <!--CSS代碼-->  
  3. </style>  
  4.   
  5. <script type="text/javascript">  
  6. <!--JavaScript代碼-->  
  7. </script>  

11.  利用瀏覽器緩存

在顯示頁面時，瀏覽器須要加載logo、CSS文件和其餘一些資源。瀏覽器緩存所作的工做就是「記住」已經加載的資源，讓頁面的加載速度更快。

12.  壓縮CSS代碼

無論你在頁面中如何使用CSS，CSS文件都是越小越好，這會幫助你提高網頁的加載速度。你能夠經過 Minify CSS工具 來壓縮你的CSS代碼。

壓縮前：

[css] view plain copy
  1. body  
  2. {  
  3. background-color:#d0e4fe;  
  4. }  
  5. h1  
  6. {  
  7. color:orange;  
  8. text-align:center;  
  9. }  

壓縮後：

[css] view plain copy
  1. body {background-color:#d0e4fe;}  
  2. 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代碼的前面，這樣可使頁面的加載速度加快。

[html] view plain copy
  1. <head>  
  2. <meta name=description content="description"/>  
  3. <title>title</title>  
  4. <style>  
  5. page specific css code goes here  
  6. </style>  
  7. <script type="text/javascript">  
  8. javascript code goes here  
  9. </script>  
  10. </head>  

16.  避免JavaScripts阻塞渲染

瀏覽器在遇到一個引入外部JS文件的<script>標籤時，會停下全部工做來下載並解析執行它，在這個過程當中，頁面渲染和用戶交互徹底被阻塞了。這時頁面加載就會中止。

谷歌 建議 刪除干擾頁面中第一屏內容加載的JavaScript，第一屏是指用戶在屏幕中最初看到的頁面，不管是桌面瀏覽器、手機，仍是平板電腦。


17.  縮小原始圖像

若是無需在頁面中顯示較大的圖像，那麼就建議將圖像的實際大小縮小爲顯示的大小，這樣能夠減小下載圖像所需的時間。

18.  指定圖像尺寸

當瀏覽器加載頁面的HTML代碼時，有時候須要在圖片下載完成前就對頁面佈局進行定位。若是HTML裏的圖片沒有指定尺寸（寬和高），或者代碼描述的尺寸與實際圖片的尺寸不符時，瀏覽器則要在圖片下載完成後再「回溯」該圖片並從新顯示，這將消耗額外的時間）。

因此，最好爲頁面中的每一張圖片都指定尺寸，無論是在HTML裏的<img>標籤中，仍是在CSS中。

更多信息： https://developers.google.com/speed/docs/insights/rules

2、雅虎的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優化

5. JavaScript優化

6. 圖像優化

7. 針對移動優化

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

3、一些工具

1.  Google PageSpeed

Google提供了 PageSpeed工具，這是一個瀏覽器插件，能夠很好地應用上文中Google所提到的Web優化實踐——幫助你輕鬆對網站的性能瓶頸進行分析，併爲你提供優化建議。

2.  雅虎 YSlow

YSlow是雅虎推出的一款瀏覽器插件，能夠幫助你對網站的頁面進行分析，併爲你提供一些優化建議，以提升網站的性能。

3. 其餘分析優化工具

經過以上的優化建議和優化工具，能夠輕鬆找到影響你的Web頁面性能的瓶頸，輕鬆實現Web頁面性能的提高。若是你也有Web優化方面的經驗，歡迎分享。

相關文章
相關標籤/搜索
每日一句
    每一个你不满意的现在，都有一个你没有努力的曾经。
本站公眾號
   歡迎關注本站公眾號,獲取更多信息
聯繫我們 最近搜索 最新文章 沪ICP备13005482号-10 MyBatis教程 SQL 教程 MySQL教程 Java 教程 Thymeleaf 教程 Hibernate教程 Spring教程 Redis教程