Web前端優(yōu)化最佳實踐及工具集錦
發(fā)表于2013-09-23 19:47| 34107次閱讀| 來源Googe & Yahoo| 124 條評論| 作者王果 編譯
Web優(yōu)化
Google
雅虎
PageSpeed
YSlow
摘要：前端的性能對于Web應用的用戶體驗來說非常重要饰序。不要以為你的Web應用的性能已經足夠好了，其實還會有很多可以提升的地方均唉。本文將介紹Google和雅虎關于前端優(yōu)化的最佳實踐以及工具蚊逢，你可以逐一檢驗你的Web應用镜会。
前端的性能對于一個Web應用來說非常重要，如果一個Web應用的頁面加載速度非常快、對于用戶的操作可以及時響應，那么產品的用戶體驗將會極大地提升史辙。下圖顯示了頁面加載速度對于用戶體驗的影響晦毙。
你的Web頁面的速度是否已經足夠快了？其實可能還有很多可以提升的地方。Google和雅虎也提出了一些Web應用的前端優(yōu)化建議，并發(fā)布了一些工具卵酪，你可以逐一檢驗你的Web應用瘸羡，以便達到更高的性能讯赏。
這些優(yōu)化不僅僅可以給用戶提供更好的體驗，從開發(fā)者角度來說冷尉，進行優(yōu)化還可以減少頁面的請求數漱挎、降低請求所占的帶寬、減少資源的浪費雀哨。
下面來看看Google和雅虎提供的Web頁面優(yōu)化最佳實踐磕谅。
一、Google的Web優(yōu)化最佳實踐
- 避免壞請求
有時頁面中的HTML或CSS會向服務器請求一個不存在的資源雾棺，比如圖片或HTML文件膊夹，這會造成瀏覽器與服務器之間過多的往返請求，類似于：
瀏覽器：“我需要這個圖像捌浩》排伲”
服務器：“我沒有這個圖像∈龋”
瀏覽器：“你確定嗎进统？這個文檔說你有±颂”
服務器：“真的沒有螟碎。”
如此一來迹栓，會降低頁面的加載速度掉分。因此，檢查頁面中的壞鏈接非常有必要克伊，你可以通過 Google的PageSpeed工具 來檢測酥郭，找到問題后，補充相應的資源文件或者修改資源的鏈接地址即可愿吹。
- 避免CSS @import
使用 @import方法引用CSS文件可以能會帶來一些影響頁面加載速度的問題褥民，比如導致文件按順序加載（一個加載完后才會加載另一個），而無法并行加載洗搂。
你可以使用 CSS delivery工具 來檢測頁面代碼中是否存在@import方法。比如载弄，如果檢測結果中存在
[css] view plaincopy
@import url("style.css")
則建議你使用下面的代碼來替代耘拇。
[html] view plaincopy
<link rel="style.css" href="style.css" type="text/css">
- 避免使用document.write
在JavaScript中，可以使用 document.write在網頁上顯示內容或調用外部資源宇攻，而通過此方法惫叛，瀏覽器必須采取一些多余的步驟——下載資源、讀取資源逞刷、運行JavaScript來了解需要做什么嘉涌，調用其他資源時需要重新再執(zhí)行一次這個過程妻熊。由于瀏覽器之前不知道要顯示什么，所以會降低頁面加載的速度仑最。
要知道扔役，任何能夠被document.write調用的資源，都可以通過HTML來調用警医，這樣速度會更快亿胸。檢查你的頁面代碼，如果存在類似于下面的代碼：
[js] view plaincopy
document.write('<script src="another.js"></script>');
建議修改為：
[html] view plaincopy
<script src="another.js"></script>
合并多個外部CSS文件
在網站中每使用一個CSS文件预皇，都會讓你的頁面加載速度慢一點點侈玄。如果你有一個以上的CSS文件，你應該將它們合并為一個文件吟温。
你可以通過 CSS delivery工具 來檢測頁面代碼中的CSS文件序仙，然后通過復制粘貼的方式將它們合并為一個。合并后記得修改頁面中的引用代碼鲁豪，并刪除舊的引用代碼潘悼。合并多個外部JavaScript文件
大部分情況下，網站往往會包含若干個 JavaScript文件呈昔，但并不需要將這些文件都獨立出來挥等，其中有些是可以合并為一個文件的。
你可以通過 resource check工具 來檢測頁面中所引用的JavaScript文件數堤尾，然后可以通過復制粘貼的方式將多個文件合并為一個肝劲。通過CSS sprites來整合圖像
如果頁面中有6個小圖像，那么瀏覽器在顯示時會分別下載郭宝。你可以通過CSS sprites將這些圖像合并成1個辞槐，可以減少頁面加載所需的時間。
CSS sprites需要有兩個步驟：整合圖像粘室、定位圖像榄檬。比如你可以通過下面的代碼來分別定位下面圖像中的上下兩部分。
[css] view plaincopy
.megaphone {width:50px; height:50px; background:url(images/sprite.png) 0 0px;}
.smile {width:50px; height:50px; background:url(images/sprite.png) 0 -50px;}
- 延遲JavaScript的加載
瀏覽器在執(zhí)行JavaScript代碼時會停止處理頁面衔统，當頁面中有很多JavaScript文件或代碼要加載時鹿榜，將導致嚴重的延遲。盡管可以使用defer锦爵、異步或將JavaScript代碼放到頁面底部來延遲JavaScript的加載舱殿，但這些都不是一個好的解決方案。
下面是Google的建議险掀。
[js] view plaincopy
<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”文件。下面是測試結果樟氢。
- 啟用壓縮/ GZIP
使用gzip對HTML和CSS文件進行壓縮冈绊，通诚丽可以節(jié)省大約50％到70％的大小，這樣加載頁面只需要更少的帶寬和更少的時間死宣。
你可以通過這個 Gzip壓縮工具 來檢測頁面是否已經經過Gzip壓縮伟恶。 - 啟用Keep-Alive
HTTP協(xié)議采用“請求-應答”模式，當使用普通模式（非KeepAlive模式）時十电，每個請求/應答客戶和服務器都要新建一個連接知押，完成之后立即斷開連接（HTTP協(xié)議為無連接的協(xié)議）；當使用 Keep-Alive模式（又稱持久連接鹃骂、連接重用）時台盯，Keep-Alive功能使客戶端到服務器端的連接持續(xù)有效，當出現(xiàn)對服務器的后繼請求時畏线，Keep-Alive功能避免了建立或者重新建立連接静盅。
在HTTP 1.0中Keep-Alive默認是關閉的，需要在HTTP頭中加入“Connection: Keep-Alive”寝殴，才能啟用Keep-Alive蒿叠；在 HTTP1.1中Keep-Alive默認啟用，加入“Connection: close”可關閉蚣常。目前大部分瀏覽器都是用HTTP 1.1協(xié)議市咽，也就是說默認都會發(fā)起Keep-Alive的連接請求了，所以是否能完成一個完整的Keep- Alive連接就看Web服務器的設置情況抵蚊。 - 將小的CSS和JavaScript代碼內嵌到HTML中
如果你的CSS代碼比較小施绎，可以將這部分代碼放到HTML文件中，而不是一個外部CSS文件贞绳，這樣可以減少頁面加載所需的文件數谷醉，從而加快頁面的加載。同樣冈闭，也可以將小的 JavaScript腳本代碼內嵌到HTML文件中俱尼。
[html] view plaincopy
<style type="text/css">
</style>
<script type="text/javascript">
</script>
- 利用瀏覽器緩存
在顯示頁面時，瀏覽器需要加載logo萎攒、CSS文件和其他一些資源遇八。瀏覽器緩存所做的工作就是“記住”已經加載的資源，讓頁面的加載速度更快耍休。 - 壓縮CSS代碼
不管你在頁面中如何使用CSS刃永，CSS文件都是越小越好，這會幫助你提升網頁的加載速度羹应。你可以通過 Minify CSS工具 來壓縮你的CSS代碼。
壓縮前：
[css] view plaincopy
body
{
background-color:#d0e4fe;
}
h1
{
color:orange;
text-align:center;
}
壓縮后：
[css] view plaincopy
body {background-color:#d0e4fe;}
h1 {color:orange;text-align:center;}
- 盡量減少DNS查詢次數
當瀏覽器與Web服務器建立連接時次屠，它需要進行DNS解析园匹，將域名解析為IP地址雳刺。然而，一旦客戶端需要執(zhí)行DNS lookup時裸违，等待時間將會取決于域名服務器的有效響應的速度掖桦。
雖然所有的ISP的DNS服務器都能緩存域名和IP地址映射表，但如果緩存的DNS記錄過期了而需要更新供汛，則可能需要通過遍歷多個DNS節(jié)點枪汪，有時候需要通過全球范圍內來找到可信任的域名服務器。一旦域名服務器工作繁忙怔昨，請求解析時就需要排隊雀久，則進一步延遲等待時間。
因此趁舀，減少DNS的查詢次數非常重要赖捌，頁面加載時就盡量避免額外耗時。為了減少DNS查詢次數矮烹，最好的解決方法就是在頁面中減少不同的域名請求的機會越庇。
你可以通過 request checker工具 來檢測頁面中存在多少請求，然后進行優(yōu)化奉狈。 - 盡量減少重定向
有時為了特定需求卤唉，需要在網頁中使用重定向。重定向的意思是仁期，用戶的原始請求（例如請求A）被重定向到其他的請求（例如請求B）桑驱。
但是這會造成網站性能和速度下降，因為瀏覽器訪問網址是一連串的過程蟀拷，如果訪問到一半而跳到新地址碰纬，就會重復發(fā)起一連串的過程，這將浪費很多的時間问芬。所以我們要盡量避免重定向悦析，Google建議：
不要鏈接到一個包含重定向的頁面
不要請求包含重定向的資源
- 優(yōu)化樣式表和腳本的順序
Style標簽和樣式表調用代碼應該放置在JavaScript代碼的前面，這樣可以使頁面的加載速度加快此衅。
[html] view plaincopy
<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>
避免JavaScripts阻塞渲染
瀏覽器在遇到一個引入外部JS文件的<script>標簽時强戴，會停下所有工作來下載并解析執(zhí)行它，在這個過程中挡鞍，頁面渲染和用戶交互完全被阻塞了骑歹。這時頁面加載就會停止。
谷歌 建議 刪除干擾頁面中第一屏內容加載的JavaScript墨微，第一屏是指用戶在屏幕中最初看到的頁面道媚，無論是桌面瀏覽器、手機，還是平板電腦最域。縮小原始圖像
如果無需在頁面中顯示較大的圖像谴分，那么就建議將圖像的實際大小縮小為顯示的大小，這樣可以減少下載圖像所需的時間镀脂。指定圖像尺寸
當瀏覽器加載頁面的HTML代碼時牺蹄，有時候需要在圖片下載完成前就對頁面布局進行定位。如果HTML里的圖片沒有指定尺寸（寬和高）薄翅，或者代碼描述的尺寸與實際圖片的尺寸不符時沙兰，瀏覽器則要在圖片下載完成后再“回溯”該圖片并重新顯示，這將消耗額外的時間）翘魄。
所以鼎天，最好為頁面中的每一張圖片都指定尺寸，不管是在HTML里的<img>標簽中熟丸，還是在CSS中训措。
更多信息： https://developers.google.com/speed/docs/insights/rules
二、雅虎的Web優(yōu)化最佳實踐內容優(yōu)化
盡量減少HTTP請求：常見方法包括合并多個CSS文件和JavaScript文件光羞，利用CSS Sprites整合圖像绩鸣，Image map（圖像中不同的區(qū)域設置不同的鏈接），內聯(lián)圖象（使用 data: URL scheme 在實際的頁面嵌入圖像數據）等纱兑。
減少DNS查找
避免重定向
使Ajax可緩存
延遲加載組件：考慮哪些內容是頁面呈現(xiàn)時所必需首先加載的呀闻、哪些內容和結構可以稍后再加載，根據這個優(yōu)先級進行設定潜慎。
預加載組件：預加載是在瀏覽器空閑時請求將來可能會用到的頁面內容（如圖像捡多、樣式表和腳本）。當用戶要訪問下一個頁面時铐炫，頁面中的內容大部分已經加載到緩存中了垒手，因此可以大大改善訪問速度。
減少DOM元素數量：頁面中存在大量DOM 元素倒信，會導致JavaScript遍歷DOM的效率變慢科贬。
根據域名劃分頁面內容：把頁面內容劃分成若干部分可以使你最大限度地實現(xiàn)平行下載。但要確保你使用的域名數量在2個到4個之間（否則與第2條沖突）鳖悠。
最小化iframe的數量：iframes 提供了一個簡單的方式把一個網站的內容嵌入到另一個網站中榜掌。但其創(chuàng)建速度比其他包括JavaScript和CSS的DOM元素的創(chuàng)建慢了1-2個數量級。
避免404：HTTP請求時間消耗是很大的乘综，因此使用HTTP請求來獲得一個沒有用處的響應（例如404沒有找到頁面）是完全沒有必要的憎账，它只會降低用戶體驗而不會有一點好處。
- 服務器優(yōu)化
使用內容分發(fā)網絡（CDN）：把你的網站內容分散到多個卡辰、處于不同地域位置的服務器上可以加快下載速度胞皱。
添加Expires或Cache-Control信息頭：對于靜態(tài)內容邪意，可設置文件頭過期時間Expires的值為“Never expire（永不過期）”；對于動態(tài)內容反砌，可使用恰當的Cache-Control文件頭來幫助瀏覽器進行有條件的請求抄罕。
Gzip壓縮
設置ETag：ETags（Entity tags，實體標簽）是web服務器和瀏覽器用于判斷瀏覽器緩存中的內容和服務器中的原始內容是否匹配的一種機制于颖。
提前刷新緩沖區(qū)：當用戶請求一個頁面時，服務器會花費200到500毫秒用于后臺組織HTML文件嚷兔。在這期間森渐，瀏覽器會一直空閑等待數據返回。在PHP中冒晰，可以使用flush()方法同衣，它允許你把已經編譯的好的部分HTML響應文件先發(fā)送給瀏覽器，這時瀏覽器就會可以下載文件中的內容（腳本等）而后臺同時處理剩余的HTML頁面壶运。
對Ajax請求使用GET方法：當使用XMLHttpRequest時耐齐，瀏覽器中的POST方法會首先發(fā)送文件頭，然后才發(fā)送數據蒋情。因此使用GET最為恰當埠况。
避免空的圖像src
- Cookie優(yōu)化
減小cookie大小：去除不必要的coockie棵癣，并使coockie體積盡量小以減少對用戶響應的影響
針對Web組件使用域名無關的Cookie：對靜態(tài)組件的Cookie讀取是一種浪費辕翰，使用另一個無Cookie的域名來存放靜態(tài)組件是一個好方法，或者也可以在Cookie中只存放帶www的域名狈谊。
- CSS優(yōu)化
將CSS代碼放在HTML頁面的頂部
避免使用CSS表達式：CSS表達式在執(zhí)行時候的運算量非常大喜命，會對頁面性能產生大的影響
使用<link>來代替@import
避免使用Filters：IE獨有屬性AlphaImageLoader用于修正IE 7以下版本中PNG圖片的半透明效果，但它的問題在于瀏覽器加載圖片時它會終止內容的呈現(xiàn)并且凍結瀏覽器河劝。
- JavaScript優(yōu)化
將JavaScript腳本放在頁面的底部
將JavaScript和CSS作為外部文件來引用：在實際應用中使用外部文件可以提高頁面速度壁榕，因為JavaScript和CSS文件都能在瀏覽器中產生緩存游桩。
縮小JavaScript和CSS
刪除重復的腳本
最小化DOM的訪問：使用JavaScript訪問DOM元素比較慢
開發(fā)智能的事件處理程序
- 圖像優(yōu)化
優(yōu)化圖片大小
通過CSS Sprites優(yōu)化圖片
不要在HTML中使用縮放圖片
favicon.ico要小而且可緩存
- 針對移動優(yōu)化
保持組件大小在25KB以下：主要是因為iPhone不能緩存大于25K的文件（注意這里指的是解壓縮后的大懈郴馈）。
將組件打包成為一個復合文檔：把頁面內容打包成復合文本就如同帶有多附件的Email死嗦，它能夠使你在一個HTTP請求中獲取多個組件煎娇。
更多信息：http://developer.yahoo.com/performance/rules.html（中文翻譯）
三二庵、一些工具
- Google PageSpeed
Google提供了 PageSpeed工具，這是一個瀏覽器插件缓呛，可以很好地應用上文中Google所提到的Web優(yōu)化實踐——幫助你輕松對網站的性能瓶頸進行分析催享，并為你提供優(yōu)化建議。
在線分析你的網站
安裝瀏覽器插件（ Chrome哟绊、 Firefox）
通過 Insights API在應用中嵌入PageSpeed功能
- 雅虎 YSlow
YSlow是雅虎推出的一款瀏覽器插件因妙，可以幫助你對網站的頁面進行分析，并為你提供一些優(yōu)化建議，以提高網站的性能攀涵。
Firefox插件
Chrome插件
YSlow for Mobile/Bookmarklet
源碼
- 其他分析優(yōu)化工具
蜘蛛模擬器：這個工具可以分析你的頁面铣耘，并提供一些優(yōu)化建議。
圖像SEO工具：這個工具可以檢查圖片的alt標簽以故，并提供一些優(yōu)化建議蜗细。
請求檢查器：找出頁面中需要加載哪些資源和服務。
鏈接檢查器：檢查頁面中內部怒详、外部和無效鏈接炉媒。
HTTP頭檢查：顯示網頁或資源的HTTP響應頭。
社交檢查器：檢查頁面中的社交組件昆烁，比如Google+吊骤、Facebook、Twitter静尼、Linkedin和Pinterest白粉。
If modified檢查器：檢查頁面是否接受 If-Modified-Since HTTP頭。
Gzip檢查器：檢查頁面是否經過了Gzip壓縮鼠渺。
CSS delivery工具：檢查頁面中所使用的CSS文件鸭巴。
面包屑工具：可根據你輸入的信息提供面包屑導航的代碼。
CSS壓縮工具：用于壓縮CSS代碼拦盹。
通過以上的優(yōu)化建議和優(yōu)化工具奕扣，可以輕松找到影響你的Web頁面性能的瓶頸，輕松實現(xiàn)Web頁面性能的提升掌敬。如果你也有Web優(yōu)化方面的經驗惯豆，歡迎分享。
