Web前端優(yōu)化最佳實踐及工具集錦

轉(zhuǎn)載自：http://web.jobbole.com/82197/

前端的性能對于一個Web應(yīng)用來說非常重要，如果一個Web應(yīng)用的頁面加載速度非澈烤快诚隙、對于用戶的操作可以及時響應(yīng)，那么產(chǎn)品的用戶體驗將會極大地提升赎懦。下圖顯示了頁面加載速度對于用戶體驗的影響雀鹃。

![前端的性能對于一個Web應(yīng)用來說非常重要，如果一個Web應(yīng)用的頁面加載速度非忱剑快黎茎、對于用戶的操作可以及時響應(yīng)，那么產(chǎn)品的用戶體驗將會極大地提升当悔。下圖顯示了頁面加載速度對于用戶體驗的影響。

image

你的Web頁面的速度是否已經(jīng)足夠快了盲憎？其實可能還有很多可以提升的地方嗅骄。Google和雅虎也提出了一些Web應(yīng)用的前端優(yōu)化建議，并發(fā)布了一些工具饼疙，你可以逐一檢驗?zāi)愕腤eb應(yīng)用溺森，以便達到更高的性能。

這些優(yōu)化不僅僅可以給用戶提供更好的體驗窑眯，從開發(fā)者角度來說屏积，進行優(yōu)化還可以減少頁面的請求數(shù)、降低請求所占的帶寬磅甩、減少資源的浪費炊林。

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

一更胖、Google的Web優(yōu)化最佳實踐

1. 避免壞請求

有時頁面中的HTML或CSS會向服務(wù)器請求一個不存在的資源铛铁，比如圖片或HTML文件隔显，這會造成瀏覽器與服務(wù)器之間過多的往返請求，類似于：

瀏覽器：“我需要這個圖像饵逐±撸”
服務(wù)器：“我沒有這個圖像”度ǎ”
瀏覽器：“你確定嗎掷豺？這個文檔說你有”∩”
服務(wù)器：“真的沒有当船。”

image

如此一來默辨，會降低頁面的加載速度德频。因此，檢查頁面中的壞鏈接非常有必要缩幸，你可以通過 Google的PageSpeed工具來檢測壹置，找到問題后，補充相應(yīng)的資源文件或者修改資源的鏈接地址即可表谊。

2. 避免CSS @import

使用 @import方法引用CSS文件可以能會帶來一些影響頁面加載速度的問題钞护，比如導(dǎo)致文件按順序加載（一個加載完后才會加載另一個），而無法并行加載爆办。

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

CSS

@import url("style.css")

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

XHTML

3. 避免使用document.write

在JavaScript中余佃，可以使用 document.write在網(wǎng)頁上顯示內(nèi)容或調(diào)用外部資源，而通過此方法挑格，瀏覽器必須采取一些多余的步驟——下載資源咙冗、讀取資源沾歪、運行JavaScript來了解需要做什么漂彤，調(diào)用其他資源時需要重新再執(zhí)行一次這個過程。由于瀏覽器之前不知道要顯示什么灾搏，所以會降低頁面加載的速度挫望。

要知道，任何能夠被document.write調(diào)用的資源狂窑，都可以通過HTML來調(diào)用媳板，這樣速度會更快。檢查你的頁面代碼泉哈，如果存在類似于下面的代碼：

JavaScript

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

建議修改為：

XHTML

4. 合并多個外部CSS文件

在網(wǎng)站中每使用一個CSS文件蛉幸，都會讓你的頁面加載速度慢一點點破讨。如果你有一個以上的CSS文件，你應(yīng)該將它們合并為一個文件奕纫。

你可以通過 CSS delivery工具來檢測頁面代碼中的CSS文件提陶，然后通過復(fù)制粘貼的方式將它們合并為一個。合并后記得修改頁面中的引用代碼匹层，并刪除舊的引用代碼隙笆。

image

5. 合并多個外部JavaScript文件

大部分情況下，網(wǎng)站往往會包含若干個 JavaScript文件升筏，但并不需要將這些文件都獨立出來撑柔，其中有些是可以合并為一個文件的。

你可以通過 resource check工具來檢測頁面中所引用的JavaScript文件數(shù)您访，然后可以通過復(fù)制粘貼的方式將多個文件合并為一個铅忿。

6. 通過CSS sprites來整合圖像

如果頁面中有6個小圖像，那么瀏覽器在顯示時會分別下載灵汪。你可以通過CSS sprites將這些圖像合并成1個辆沦，可以減少頁面加載所需的時間。

CSS sprites需要有兩個步驟：整合圖像识虚、定位圖像肢扯。比如你可以通過下面的代碼來分別定位下面圖像中的上下兩部分。

CSS

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

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

image

7. 延遲JavaScript的加載

瀏覽器在執(zhí)行JavaScript代碼時會停止處理頁面担锤，當(dāng)頁面中有很多JavaScript文件或代碼要加載時蔚晨，將導(dǎo)致嚴(yán)重的延遲。盡管可以使用defer肛循、異步或?qū)avaScript代碼放到頁面底部來延遲JavaScript的加載铭腕，但這些都不是一個好的解決方案。

下面是Google的建議多糠。

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”文件。下面是測試結(jié)果夹孔。

image

8. 啟用壓縮/ GZIP

使用gzip對HTML和CSS文件進行壓縮被盈，通常可以節(jié)省大約50％到70％的大小搭伤，這樣加載頁面只需要更少的帶寬和更少的時間只怎。

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

9. 啟用Keep-Alive

HTTP協(xié)議采用“請求-應(yīng)答”模式怜俐，當(dāng)使用普通模式（非KeepAlive模式）時身堡，每個請求/應(yīng)答客戶和服務(wù)器都要新建一個連接，完成之后立即斷開連接（HTTP協(xié)議為無連接的協(xié)議）拍鲤；當(dāng)使用 Keep-Alive模式（又稱持久連接贴谎、連接重用）時汞扎，Keep-Alive功能使客戶端到服務(wù)器端的連接持續(xù)有效，當(dāng)出現(xiàn)對服務(wù)器的后繼請求時擅这，Keep-Alive功能避免了建立或者重新建立連接佩捞。

在HTTP 1.0中Keep-Alive默認是關(guān)閉的，需要在HTTP頭中加入“Connection: Keep-Alive”蕾哟，才能啟用Keep-Alive一忱；在 HTTP1.1中Keep-Alive默認啟用，加入“Connection: close”可關(guān)閉谭确。目前大部分瀏覽器都是用HTTP 1.1協(xié)議帘营，也就是說默認都會發(fā)起Keep-Alive的連接請求了，所以是否能完成一個完整的Keep- Alive連接就看Web服務(wù)器的設(shè)置情況逐哈。

10. 將小的CSS和JavaScript代碼內(nèi)嵌到HTML中

如果你的CSS代碼比較小芬迄，可以將這部分代碼放到HTML文件中，而不是一個外部CSS文件昂秃，這樣可以減少頁面加載所需的文件數(shù)禀梳，從而加快頁面的加載。同樣肠骆，也可以將小的 JavaScript腳本代碼內(nèi)嵌到HTML文件中算途。

XHTML

</style>

</script>

11. 利用瀏覽器緩存

在顯示頁面時，瀏覽器需要加載logo蚀腿、CSS文件和其他一些資源嘴瓤。瀏覽器緩存所做的工作就是“記住”已經(jīng)加載的資源，讓頁面的加載速度更快莉钙。

12. 壓縮CSS代碼

不管你在頁面中如何使用CSS廓脆，CSS文件都是越小越好，這會幫助你提升網(wǎng)頁的加載速度磁玉。你可以通過 Minify CSS工具來壓縮你的CSS代碼停忿。

壓縮前：

CSS

body

{

background-color:#d0e4fe;

}

{

color:orange;

text-align:center;

}

壓縮后：

CSS

body {background-color:#d0e4fe;}

h1 {color:orange;text-align:center;}

13. 盡量減少DNS查詢次數(shù)

當(dāng)瀏覽器與Web服務(wù)器建立連接時，它需要進行DNS解析蚊伞，將域名解析為IP地址席赂。然而，一旦客戶端需要執(zhí)行DNS lookup時厚柳，等待時間將會取決于域名服務(wù)器的有效響應(yīng)的速度氧枣。

雖然所有的ISP的DNS服務(wù)器都能緩存域名和IP地址映射表，但如果緩存的DNS記錄過期了而需要更新别垮，則可能需要通過遍歷多個DNS節(jié)點，有時候需要通過全球范圍內(nèi)來找到可信任的域名服務(wù)器扎谎。一旦域名服務(wù)器工作繁忙碳想，請求解析時就需要排隊烧董，則進一步延遲等待時間。

因此胧奔，減少DNS的查詢次數(shù)非常重要逊移，頁面加載時就盡量避免額外耗時。為了減少DNS查詢次數(shù)龙填，最好的解決方法就是在頁面中減少不同的域名請求的機會胳泉。

你可以通過 request checker工具來檢測頁面中存在多少請求，然后進行優(yōu)化岩遗。

14. 盡量減少重定向

有時為了特定需求扇商，需要在網(wǎng)頁中使用重定向。重定向的意思是宿礁，用戶的原始請求（例如請求A）被重定向到其他的請求（例如請求B）案铺。

但是這會造成網(wǎng)站性能和速度下降控汉，因為瀏覽器訪問網(wǎng)址是一連串的過程，如果訪問到一半而跳到新地址壁酬，就會重復(fù)發(fā)起一連串的過程舆乔，這將浪費很多的時間。所以我們要盡量避免重定向颜武，Google建議：

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

15. 優(yōu)化樣式表和腳本的順序

Style標(biāo)簽和樣式表調(diào)用代碼應(yīng)該放置在JavaScript代碼的前面，這樣可以使頁面的加載速度加快篙议。

XHTML

<head>

<title>title</title>

<style>

page specific css code goes here

</style>

javascript code goes here

</script>

</head>

16. 避免JavaScripts阻塞渲染

瀏覽器在遇到一個引入外部JS文件的<script>標(biāo)簽時鬼贱，會停下所有工作來下載并解析執(zhí)行它这难，在這個過程中姻乓，頁面渲染和用戶交互完全被阻塞了。這時頁面加載就會停止。

谷歌建議刪除干擾頁面中第一屏內(nèi)容加載的JavaScript疚顷，第一屏是指用戶在屏幕中最初看到的頁面，無論是桌面瀏覽器笆檀、手機，還是平板電腦樱衷。

image

17. 縮小原始圖像

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

18. 指定圖像尺寸

當(dāng)瀏覽器加載頁面的HTML代碼時网沾，有時候需要在圖片下載完成前就對頁面布局進行定位。如果HTML里的圖片沒有指定尺寸（寬和高）桦山，或者代碼描述的尺寸與實際圖片的尺寸不符時，瀏覽器則要在圖片下載完成后再“回溯”該圖片并重新顯示度苔，這將消耗額外的時間）匆篓。

所以浑度，最好為頁面中的每一張圖片都指定尺寸，不管是在HTML里的<img>標(biāo)簽中，還是在CSS中先慷。

二、雅虎的Web優(yōu)化最佳實踐

1. 內(nèi)容優(yōu)化

盡量減少HTTP請求：常見方法包括合并多個CSS文件和JavaScript文件脓诡，利用CSS Sprites整合圖像宪迟，Image map（圖像中不同的區(qū)域設(shè)置不同的鏈接），內(nèi)聯(lián)圖象（使用 data: URL scheme 在實際的頁面嵌入圖像數(shù)據(jù)）等交惯。
減少DNS查找
避免重定向
使Ajax可緩存
延遲加載組件：考慮哪些內(nèi)容是頁面呈現(xiàn)時所必需首先加載的次泽、哪些內(nèi)容和結(jié)構(gòu)可以稍后再加載，根據(jù)這個優(yōu)先級進行設(shè)定席爽。
預(yù)加載組件：預(yù)加載是在瀏覽器空閑時請求將來可能會用到的頁面內(nèi)容（如圖像意荤、樣式表和腳本）。當(dāng)用戶要訪問下一個頁面時只锻，頁面中的內(nèi)容大部分已經(jīng)加載到緩存中了玖像，因此可以大大改善訪問速度。
減少DOM元素數(shù)量：頁面中存在大量DOM 元素炬藤，會導(dǎo)致JavaScript遍歷DOM的效率變慢御铃。
根據(jù)域名劃分頁面內(nèi)容：把頁面內(nèi)容劃分成若干部分可以使你最大限度地實現(xiàn)平行下載。但要確保你使用的域名數(shù)量在2個到4個之間（否則與第2條沖突）沈矿。
最小化iframe的數(shù)量：iframes 提供了一個簡單的方式把一個網(wǎng)站的內(nèi)容嵌入到另一個網(wǎng)站中上真。但其創(chuàng)建速度比其他包括JavaScript和CSS的DOM元素的創(chuàng)建慢了1-2個數(shù)量級。
避免404：HTTP請求時間消耗是很大的羹膳，因此使用HTTP請求來獲得一個沒有用處的響應(yīng)（例如404沒有找到頁面）是完全沒有必要的睡互，它只會降低用戶體驗而不會有一點好處。

2. 服務(wù)器優(yōu)化

使用內(nèi)容分發(fā)網(wǎng)絡(luò)（CDN）：把你的網(wǎng)站內(nèi)容分散到多個、處于不同地域位置的服務(wù)器上可以加快下載速度就珠。
添加Expires或Cache-Control信息頭：對于靜態(tài)內(nèi)容寇壳，可設(shè)置文件頭過期時間Expires的值為“Never expire（永不過期）”；對于動態(tài)內(nèi)容妻怎，可使用恰當(dāng)?shù)腃ache-Control文件頭來幫助瀏覽器進行有條件的請求壳炎。
Gzip壓縮
設(shè)置ETag：ETags（Entity tags，實體標(biāo)簽）是web服務(wù)器和瀏覽器用于判斷瀏覽器緩存中的內(nèi)容和服務(wù)器中的原始內(nèi)容是否匹配的一種機制逼侦。
提前刷新緩沖區(qū)：當(dāng)用戶請求一個頁面時匿辩，服務(wù)器會花費200到500毫秒用于后臺組織HTML文件。在這期間榛丢，瀏覽器會一直空閑等待數(shù)據(jù)返回铲球。在PHP中，可以使用flush()方法晰赞，它允許你把已經(jīng)編譯的好的部分HTML響應(yīng)文件先發(fā)送給瀏覽器稼病，這時瀏覽器就會可以下載文件中的內(nèi)容（腳本等）而后臺同時處理剩余的HTML頁面。
對Ajax請求使用GET方法：當(dāng)使用XMLHttpRequest時掖鱼，瀏覽器中的POST方法會首先發(fā)送文件頭然走，然后才發(fā)送數(shù)據(jù)。因此使用GET最為恰當(dāng)锨用。
避免空的圖像src

3. Cookie優(yōu)化

減小cookie大小：去除不必要的coockie丰刊，并使coockie體積盡量小以減少對用戶響應(yīng)的影響
針對Web組件使用域名無關(guān)的Cookie：對靜態(tài)組件的Cookie讀取是一種浪費，使用另一個無Cookie的域名來存放靜態(tài)組件是一個好方法增拥，或者也可以在Cookie中只存放帶www的域名啄巧。

4. CSS優(yōu)化

將CSS代碼放在HTML頁面的頂部
避免使用CSS表達式：CSS表達式在執(zhí)行時候的運算量非常大，會對頁面性能產(chǎn)生大的影響
使用<link>來代替@import
避免使用Filters：IE獨有屬性AlphaImageLoader用于修正IE 7以下版本中PNG圖片的半透明效果掌栅，但它的問題在于瀏覽器加載圖片時它會終止內(nèi)容的呈現(xiàn)并且凍結(jié)瀏覽器秩仆。

5. JavaScript優(yōu)化

將JavaScript腳本放在頁面的底部
將JavaScript和CSS作為外部文件來引用：在實際應(yīng)用中使用外部文件可以提高頁面速度，因為JavaScript和CSS文件都能在瀏覽器中產(chǎn)生緩存猾封。
縮小JavaScript和CSS
刪除重復(fù)的腳本
最小化DOM的訪問：使用JavaScript訪問DOM元素比較慢
開發(fā)智能的事件處理程序

6. 圖像優(yōu)化

優(yōu)化圖片大小
通過CSS Sprites優(yōu)化圖片
不要在HTML中使用縮放圖片
favicon.ico要小而且可緩存

7. 針對移動優(yōu)化

保持組件大小在25KB以下：主要是因為iPhone不能緩存大于25K的文件（注意這里指的是解壓縮后的大谐嗡！）。
將組件打包成為一個復(fù)合文檔：把頁面內(nèi)容打包成復(fù)合文本就如同帶有多附件的Email晌缘，它能夠使你在一個HTTP請求中獲取多個組件齐莲。

三、一些工具

1. Google PageSpeed

Google提供了 PageSpeed工具磷箕，這是一個瀏覽器插件选酗，可以很好地應(yīng)用上文中Google所提到的Web優(yōu)化實踐——幫助你輕松對網(wǎng)站的性能瓶頸進行分析，并為你提供優(yōu)化建議岳枷。

在線分析你的網(wǎng)站
安裝瀏覽器插件（ Chrome芒填、 Firefox）
通過 Insights API在應(yīng)用中嵌入PageSpeed功能

2. 雅虎 YSlow

YSlow是雅虎推出的一款瀏覽器插件呜叫，可以幫助你對網(wǎng)站的頁面進行分析，并為你提供一些優(yōu)化建議殿衰，以提高網(wǎng)站的性能朱庆。

Firefox插件
Chrome插件
YSlow for Mobile/Bookmarklet
源碼

3. 其他分析優(yōu)化工具

蜘蛛模擬器：這個工具可以分析你的頁面，并提供一些優(yōu)化建議闷祥。
圖像SEO工具：這個工具可以檢查圖片的alt標(biāo)簽娱颊，并提供一些優(yōu)化建議。
請求檢查器：找出頁面中需要加載哪些資源和服務(wù)蜀踏。
鏈接檢查器：檢查頁面中內(nèi)部维蒙、外部和無效鏈接掰吕。
HTTP頭檢查：顯示網(wǎng)頁或資源的HTTP響應(yīng)頭果覆。
社交檢查器：檢查頁面中的社交組件，比如Google+殖熟、Facebook局待、Twitter、Linkedin和Pinterest菱属。
If modified檢查器：檢查頁面是否接受 If-Modified-Since HTTP頭钳榨。
Gzip檢查器：檢查頁面是否經(jīng)過了Gzip壓縮。
CSS delivery工具：檢查頁面中所使用的CSS文件纽门。
面包屑工具：可根據(jù)你輸入的信息提供面包屑導(dǎo)航的代碼薛耻。
CSS壓縮工具：用于壓縮CSS代碼。

通過以上的優(yōu)化建議和優(yōu)化工具赏陵，可以輕松找到影響你的Web頁面性能的瓶頸饼齿，輕松實現(xiàn)Web頁面性能的提升。如果你也有Web優(yōu)化方面的經(jīng)驗蝙搔，歡迎分享缕溉。
](http://upload-images.jianshu.io/upload_images/1229727-f612206e5e7e4f60.jpg?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)

你的Web頁面的速度是否已經(jīng)足夠快了篱竭？其實可能還有很多可以提升的地方忘分。Google和雅虎也提出了一些Web應(yīng)用的前端優(yōu)化建議拿愧，并發(fā)布了一些工具敷存，你可以逐一檢驗?zāi)愕腤eb應(yīng)用募舟，以便達到更高的性能猖败。

這些優(yōu)化不僅僅可以給用戶提供更好的體驗领虹，從開發(fā)者角度來說届宠，進行優(yōu)化還可以減少頁面的請求數(shù)赐写、降低請求所占的帶寬鸟蜡、減少資源的浪費。

下面來看看Google和雅虎提供的Web頁面優(yōu)化最佳實踐血淌。

一矩欠、Google的Web優(yōu)化最佳實踐

1. 避免壞請求

有時頁面中的HTML或CSS會向服務(wù)器請求一個不存在的資源财剖，比如圖片或HTML文件，這會造成瀏覽器與服務(wù)器之間過多的往返請求癌淮，類似于：

瀏覽器：“我需要這個圖像躺坟。”
服務(wù)器：“我沒有這個圖像乳蓄∵涑龋”
瀏覽器：“你確定嗎？這個文檔說你有虚倒∶勒欤”
服務(wù)器：“真的沒有』臧拢”

image

如此一來菠剩，會降低頁面的加載速度。因此耻煤，檢查頁面中的壞鏈接非常有必要具壮，你可以通過 Google的PageSpeed工具來檢測，找到問題后哈蝇，補充相應(yīng)的資源文件或者修改資源的鏈接地址即可棺妓。

2. 避免CSS @import

使用 @import方法引用CSS文件可以能會帶來一些影響頁面加載速度的問題，比如導(dǎo)致文件按順序加載（一個加載完后才會加載另一個）炮赦，而無法并行加載怜跑。

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

CSS

@import url("style.css")

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

XHTML

3. 避免使用document.write

在JavaScript中，可以使用 document.write在網(wǎng)頁上顯示內(nèi)容或調(diào)用外部資源看幼，而通過此方法批旺，瀏覽器必須采取一些多余的步驟——下載資源、讀取資源诵姜、運行JavaScript來了解需要做什么汽煮，調(diào)用其他資源時需要重新再執(zhí)行一次這個過程。由于瀏覽器之前不知道要顯示什么棚唆，所以會降低頁面加載的速度暇赤。

要知道，任何能夠被document.write調(diào)用的資源宵凌，都可以通過HTML來調(diào)用鞋囊，這樣速度會更快。檢查你的頁面代碼瞎惫，如果存在類似于下面的代碼：

JavaScript

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

建議修改為：

XHTML

4. 合并多個外部CSS文件

在網(wǎng)站中每使用一個CSS文件溜腐，都會讓你的頁面加載速度慢一點點译株。如果你有一個以上的CSS文件，你應(yīng)該將它們合并為一個文件挺益。

你可以通過 CSS delivery工具來檢測頁面代碼中的CSS文件歉糜，然后通過復(fù)制粘貼的方式將它們合并為一個。合并后記得修改頁面中的引用代碼望众，并刪除舊的引用代碼匪补。

image

5. 合并多個外部JavaScript文件

大部分情況下，網(wǎng)站往往會包含若干個 JavaScript文件烂翰，但并不需要將這些文件都獨立出來夯缺，其中有些是可以合并為一個文件的。

你可以通過 resource check工具來檢測頁面中所引用的JavaScript文件數(shù)甘耿，然后可以通過復(fù)制粘貼的方式將多個文件合并為一個踊兜。

6. 通過CSS sprites來整合圖像

如果頁面中有6個小圖像，那么瀏覽器在顯示時會分別下載棵里。你可以通過CSS sprites將這些圖像合并成1個润文，可以減少頁面加載所需的時間。

CSS sprites需要有兩個步驟：整合圖像殿怜、定位圖像。比如你可以通過下面的代碼來分別定位下面圖像中的上下兩部分曙砂。

CSS

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

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

image

7. 延遲JavaScript的加載

瀏覽器在執(zhí)行JavaScript代碼時會停止處理頁面头谜，當(dāng)頁面中有很多JavaScript文件或代碼要加載時，將導(dǎo)致嚴(yán)重的延遲鸠澈。盡管可以使用defer柱告、異步或?qū)avaScript代碼放到頁面底部來延遲JavaScript的加載，但這些都不是一個好的解決方案笑陈。

下面是Google的建議际度。

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”文件涵妥。下面是測試結(jié)果乖菱。

image

8. 啟用壓縮/ GZIP

使用gzip對HTML和CSS文件進行壓縮，通撑钔可以節(jié)省大約50％到70％的大小窒所，這樣加載頁面只需要更少的帶寬和更少的時間。

你可以通過這個 Gzip壓縮工具來檢測頁面是否已經(jīng)經(jīng)過Gzip壓縮帆锋。

9. 啟用Keep-Alive

HTTP協(xié)議采用“請求-應(yīng)答”模式吵取，當(dāng)使用普通模式（非KeepAlive模式）時，每個請求/應(yīng)答客戶和服務(wù)器都要新建一個連接锯厢，完成之后立即斷開連接（HTTP協(xié)議為無連接的協(xié)議）皮官；當(dāng)使用 Keep-Alive模式（又稱持久連接脯倒、連接重用）時，Keep-Alive功能使客戶端到服務(wù)器端的連接持續(xù)有效捺氢，當(dāng)出現(xiàn)對服務(wù)器的后繼請求時盔憨，Keep-Alive功能避免了建立或者重新建立連接。

在HTTP 1.0中Keep-Alive默認是關(guān)閉的讯沈，需要在HTTP頭中加入“Connection: Keep-Alive”郁岩，才能啟用Keep-Alive；在 HTTP1.1中Keep-Alive默認啟用缺狠，加入“Connection: close”可關(guān)閉问慎。目前大部分瀏覽器都是用HTTP 1.1協(xié)議，也就是說默認都會發(fā)起Keep-Alive的連接請求了挤茄，所以是否能完成一個完整的Keep- Alive連接就看Web服務(wù)器的設(shè)置情況如叼。

10. 將小的CSS和JavaScript代碼內(nèi)嵌到HTML中

如果你的CSS代碼比較小，可以將這部分代碼放到HTML文件中穷劈，而不是一個外部CSS文件笼恰，這樣可以減少頁面加載所需的文件數(shù)，從而加快頁面的加載歇终。同樣社证，也可以將小的 JavaScript腳本代碼內(nèi)嵌到HTML文件中。

XHTML

</style>

</script>

11. 利用瀏覽器緩存

在顯示頁面時评凝，瀏覽器需要加載logo追葡、CSS文件和其他一些資源。瀏覽器緩存所做的工作就是“記住”已經(jīng)加載的資源奕短，讓頁面的加載速度更快宜肉。

12. 壓縮CSS代碼

不管你在頁面中如何使用CSS，CSS文件都是越小越好翎碑，這會幫助你提升網(wǎng)頁的加載速度谬返。你可以通過 Minify CSS工具來壓縮你的CSS代碼。

壓縮前：

CSS

body

{

background-color:#d0e4fe;

}

{

color:orange;

text-align:center;

}

壓縮后：

CSS

body {background-color:#d0e4fe;}

h1 {color:orange;text-align:center;}

13. 盡量減少DNS查詢次數(shù)

當(dāng)瀏覽器與Web服務(wù)器建立連接時日杈，它需要進行DNS解析遣铝，將域名解析為IP地址。然而达椰，一旦客戶端需要執(zhí)行DNS lookup時翰蠢，等待時間將會取決于域名服務(wù)器的有效響應(yīng)的速度。

雖然所有的ISP的DNS服務(wù)器都能緩存域名和IP地址映射表啰劲，但如果緩存的DNS記錄過期了而需要更新梁沧，則可能需要通過遍歷多個DNS節(jié)點，有時候需要通過全球范圍內(nèi)來找到可信任的域名服務(wù)器蝇裤。一旦域名服務(wù)器工作繁忙廷支，請求解析時就需要排隊频鉴，則進一步延遲等待時間。

因此恋拍，減少DNS的查詢次數(shù)非常重要垛孔，頁面加載時就盡量避免額外耗時。為了減少DNS查詢次數(shù)施敢，最好的解決方法就是在頁面中減少不同的域名請求的機會周荐。

你可以通過 request checker工具來檢測頁面中存在多少請求，然后進行優(yōu)化僵娃。

14. 盡量減少重定向

有時為了特定需求概作，需要在網(wǎng)頁中使用重定向。重定向的意思是默怨，用戶的原始請求（例如請求A）被重定向到其他的請求（例如請求B）讯榕。

但是這會造成網(wǎng)站性能和速度下降，因為瀏覽器訪問網(wǎng)址是一連串的過程匙睹，如果訪問到一半而跳到新地址愚屁，就會重復(fù)發(fā)起一連串的過程，這將浪費很多的時間痕檬。所以我們要盡量避免重定向霎槐，Google建議：

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

15. 優(yōu)化樣式表和腳本的順序

Style標(biāo)簽和樣式表調(diào)用代碼應(yīng)該放置在JavaScript代碼的前面，這樣可以使頁面的加載速度加快谆棺。

XHTML

<head>

<title>title</title>

<style>

page specific css code goes here

</style>

javascript code goes here

</script>

</head>

16. 避免JavaScripts阻塞渲染

瀏覽器在遇到一個引入外部JS文件的<script>標(biāo)簽時栽燕，會停下所有工作來下載并解析執(zhí)行它，在這個過程中榆纽，頁面渲染和用戶交互完全被阻塞了躏升。這時頁面加載就會停止佃却。

谷歌建議刪除干擾頁面中第一屏內(nèi)容加載的JavaScript，第一屏是指用戶在屏幕中最初看到的頁面深纲，無論是桌面瀏覽器、手機妻柒，還是平板電腦计盒。

image

17. 縮小原始圖像

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

18. 指定圖像尺寸

當(dāng)瀏覽器加載頁面的HTML代碼時悯恍，有時候需要在圖片下載完成前就對頁面布局進行定位唉侄。如果HTML里的圖片沒有指定尺寸（寬和高）篙梢，或者代碼描述的尺寸與實際圖片的尺寸不符時，瀏覽器則要在圖片下載完成后再“回溯”該圖片并重新顯示美旧，這將消耗額外的時間）。

所以贬墩，最好為頁面中的每一張圖片都指定尺寸榴嗅，不管是在HTML里的<img>標(biāo)簽中，還是在CSS中陶舞。

二嗽测、雅虎的Web優(yōu)化最佳實踐

1. 內(nèi)容優(yōu)化

盡量減少HTTP請求：常見方法包括合并多個CSS文件和JavaScript文件，利用CSS Sprites整合圖像，Image map（圖像中不同的區(qū)域設(shè)置不同的鏈接）唠粥，內(nèi)聯(lián)圖象（使用 data: URL scheme 在實際的頁面嵌入圖像數(shù)據(jù)）等疏魏。
減少DNS查找
避免重定向
使Ajax可緩存
延遲加載組件：考慮哪些內(nèi)容是頁面呈現(xiàn)時所必需首先加載的、哪些內(nèi)容和結(jié)構(gòu)可以稍后再加載晤愧，根據(jù)這個優(yōu)先級進行設(shè)定大莫。
預(yù)加載組件：預(yù)加載是在瀏覽器空閑時請求將來可能會用到的頁面內(nèi)容（如圖像、樣式表和腳本）官份。當(dāng)用戶要訪問下一個頁面時只厘，頁面中的內(nèi)容大部分已經(jīng)加載到緩存中了，因此可以大大改善訪問速度舅巷。
減少DOM元素數(shù)量：頁面中存在大量DOM 元素羔味，會導(dǎo)致JavaScript遍歷DOM的效率變慢。
根據(jù)域名劃分頁面內(nèi)容：把頁面內(nèi)容劃分成若干部分可以使你最大限度地實現(xiàn)平行下載钠右。但要確保你使用的域名數(shù)量在2個到4個之間（否則與第2條沖突）赋元。
最小化iframe的數(shù)量：iframes 提供了一個簡單的方式把一個網(wǎng)站的內(nèi)容嵌入到另一個網(wǎng)站中。但其創(chuàng)建速度比其他包括JavaScript和CSS的DOM元素的創(chuàng)建慢了1-2個數(shù)量級飒房。
避免404：HTTP請求時間消耗是很大的搁凸，因此使用HTTP請求來獲得一個沒有用處的響應(yīng)（例如404沒有找到頁面）是完全沒有必要的，它只會降低用戶體驗而不會有一點好處情屹。

2. 服務(wù)器優(yōu)化

使用內(nèi)容分發(fā)網(wǎng)絡(luò)（CDN）：把你的網(wǎng)站內(nèi)容分散到多個坪仇、處于不同地域位置的服務(wù)器上可以加快下載速度。
添加Expires或Cache-Control信息頭：對于靜態(tài)內(nèi)容垃你，可設(shè)置文件頭過期時間Expires的值為“Never expire（永不過期）”椅文；對于動態(tài)內(nèi)容，可使用恰當(dāng)?shù)腃ache-Control文件頭來幫助瀏覽器進行有條件的請求惜颇。
Gzip壓縮
設(shè)置ETag：ETags（Entity tags皆刺，實體標(biāo)簽）是web服務(wù)器和瀏覽器用于判斷瀏覽器緩存中的內(nèi)容和服務(wù)器中的原始內(nèi)容是否匹配的一種機制。
提前刷新緩沖區(qū)：當(dāng)用戶請求一個頁面時凌摄，服務(wù)器會花費200到500毫秒用于后臺組織HTML文件羡蛾。在這期間，瀏覽器會一直空閑等待數(shù)據(jù)返回锨亏。在PHP中痴怨，可以使用flush()方法，它允許你把已經(jīng)編譯的好的部分HTML響應(yīng)文件先發(fā)送給瀏覽器器予，這時瀏覽器就會可以下載文件中的內(nèi)容（腳本等）而后臺同時處理剩余的HTML頁面浪藻。
對Ajax請求使用GET方法：當(dāng)使用XMLHttpRequest時，瀏覽器中的POST方法會首先發(fā)送文件頭乾翔，然后才發(fā)送數(shù)據(jù)爱葵。因此使用GET最為恰當(dāng)。
避免空的圖像src

3. Cookie優(yōu)化

減小cookie大小：去除不必要的coockie，并使coockie體積盡量小以減少對用戶響應(yīng)的影響
針對Web組件使用域名無關(guān)的Cookie：對靜態(tài)組件的Cookie讀取是一種浪費萌丈，使用另一個無Cookie的域名來存放靜態(tài)組件是一個好方法赞哗，或者也可以在Cookie中只存放帶www的域名。

4. CSS優(yōu)化

將CSS代碼放在HTML頁面的頂部
避免使用CSS表達式：CSS表達式在執(zhí)行時候的運算量非常大辆雾，會對頁面性能產(chǎn)生大的影響
使用<link>來代替@import
避免使用Filters：IE獨有屬性AlphaImageLoader用于修正IE 7以下版本中PNG圖片的半透明效果肪笋，但它的問題在于瀏覽器加載圖片時它會終止內(nèi)容的呈現(xiàn)并且凍結(jié)瀏覽器。

5. JavaScript優(yōu)化

將JavaScript腳本放在頁面的底部
將JavaScript和CSS作為外部文件來引用：在實際應(yīng)用中使用外部文件可以提高頁面速度乾颁，因為JavaScript和CSS文件都能在瀏覽器中產(chǎn)生緩存涂乌。
縮小JavaScript和CSS
刪除重復(fù)的腳本
最小化DOM的訪問：使用JavaScript訪問DOM元素比較慢
開發(fā)智能的事件處理程序

6. 圖像優(yōu)化

優(yōu)化圖片大小
通過CSS Sprites優(yōu)化圖片
不要在HTML中使用縮放圖片
favicon.ico要小而且可緩存

7. 針對移動優(yōu)化

保持組件大小在25KB以下：主要是因為iPhone不能緩存大于25K的文件（注意這里指的是解壓縮后的大小）英岭。
將組件打包成為一個復(fù)合文檔：把頁面內(nèi)容打包成復(fù)合文本就如同帶有多附件的Email湾盒，它能夠使你在一個HTTP請求中獲取多個組件。

三诅妹、一些工具

1. Google PageSpeed

Google提供了 PageSpeed工具罚勾，這是一個瀏覽器插件，可以很好地應(yīng)用上文中Google所提到的Web優(yōu)化實踐——幫助你輕松對網(wǎng)站的性能瓶頸進行分析吭狡，并為你提供優(yōu)化建議尖殃。

在線分析你的網(wǎng)站
安裝瀏覽器插件（ Chrome、 Firefox）
通過 Insights API在應(yīng)用中嵌入PageSpeed功能

2. 雅虎 YSlow

YSlow是雅虎推出的一款瀏覽器插件划煮，可以幫助你對網(wǎng)站的頁面進行分析送丰，并為你提供一些優(yōu)化建議，以提高網(wǎng)站的性能弛秋。

Firefox插件
Chrome插件
YSlow for Mobile/Bookmarklet
源碼

3. 其他分析優(yōu)化工具

蜘蛛模擬器：這個工具可以分析你的頁面器躏，并提供一些優(yōu)化建議。
圖像SEO工具：這個工具可以檢查圖片的alt標(biāo)簽蟹略，并提供一些優(yōu)化建議登失。
請求檢查器：找出頁面中需要加載哪些資源和服務(wù)。
鏈接檢查器：檢查頁面中內(nèi)部挖炬、外部和無效鏈接揽浙。
HTTP頭檢查：顯示網(wǎng)頁或資源的HTTP響應(yīng)頭。
社交檢查器：檢查頁面中的社交組件意敛，比如Google+馅巷、Facebook、Twitter草姻、Linkedin和Pinterest令杈。
If modified檢查器：檢查頁面是否接受 If-Modified-Since HTTP頭。
Gzip檢查器：檢查頁面是否經(jīng)過了Gzip壓縮碴倾。
CSS delivery工具：檢查頁面中所使用的CSS文件。
面包屑工具：可根據(jù)你輸入的信息提供面包屑導(dǎo)航的代碼。
CSS壓縮工具：用于壓縮CSS代碼跌榔。

通過以上的優(yōu)化建議和優(yōu)化工具异雁，可以輕松找到影響你的Web頁面性能的瓶頸，輕松實現(xiàn)Web頁面性能的提升僧须。如果你也有Web優(yōu)化方面的經(jīng)驗纲刀，歡迎分享。

最后編輯于：2018.04.08 16:28:39

?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者

人面猴
序言：七十年代末担平，一起剝皮案震驚了整個濱河市示绊，隨后出現(xiàn)的幾起案子，更是在濱河造成了極大的恐慌暂论，老刑警劉巖面褐，帶你破解...
沈念sama閱讀 217,406評論 6贊 503
死咒
序言：濱河連續(xù)發(fā)生了三起死亡事件，死亡現(xiàn)場離奇詭異取胎，居然都是意外死亡展哭，警方通過查閱死者的電腦和手機，發(fā)現(xiàn)死者居然都...
沈念sama閱讀 92,732評論 3贊 393
救了他兩次的神仙讓他今天三更去死
文/潘曉璐我一進店門闻蛀，熙熙樓的掌柜王于貴愁眉苦臉地迎上來匪傍，“玉大人，你說我怎么就攤上這事觉痛∫酆猓” “怎么了？”我有些...
開封第一講書人閱讀 163,711評論 0贊 353
道士緝兇錄：失蹤的賣姜人
文/不壞的土叔我叫張陵薪棒，是天一觀的道長手蝎。經(jīng)常有香客問我，道長盗尸，這世上最難降的妖魔是什么柑船？我笑而不...
開封第一講書人閱讀 58,380評論 1贊 293
?港島之戀（遺憾婚禮）
正文為了忘掉前任，我火速辦了婚禮泼各，結(jié)果婚禮上鞍时，老公的妹妹穿的比我還像新娘。我一直安慰自己扣蜻，他們只是感情好逆巍，可當(dāng)我...
茶點故事閱讀 67,432評論 6贊 392
惡毒庶女頂嫁案：這布局不是一般人想出來的
文/花漫我一把揭開白布。她就那樣靜靜地躺著莽使，像睡著了一般锐极。火紅的嫁衣襯著肌膚如雪。梳的紋絲不亂的頭發(fā)上芳肌，一...
開封第一講書人閱讀 51,301評論 1贊 301
城市分裂傳說
那天灵再，我揣著相機與錄音肋层，去河邊找鬼。笑死翎迁，一個胖子當(dāng)著我的面吹牛栋猖，可吹牛的內(nèi)容都是我干的。我是一名探鬼主播汪榔，決...
沈念sama閱讀 40,145評論 3贊 418
雙鴛鴦連環(huán)套：你想象不到人心有多黑
文/蒼蘭香墨我猛地睜開眼蒲拉，長吁一口氣：“原來是場噩夢啊……” “哼！你這毒婦竟也來了痴腌？” 一聲冷哼從身側(cè)響起雌团，我...
開封第一講書人閱讀 39,008評論 0贊 276
萬榮殺人案實錄
序言：老撾萬榮一對情侶失蹤，失蹤者是張志新（化名）和其女友劉穎士聪，沒想到半個月后锦援，有當(dāng)?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體，經(jīng)...
沈念sama閱讀 45,443評論 1贊 314
?護林員之死
正文獨居荒郊野嶺守林人離奇死亡戚嗅，尸身上長有42處帶血的膿包…… 初始之章·張勛以下內(nèi)容為張勛視角年9月15日...
茶點故事閱讀 37,649評論 3贊 334
?白月光啟示錄
正文我和宋清朗相戀三年雨涛，在試婚紗的時候發(fā)現(xiàn)自己被綠了。大學(xué)時的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片懦胞。...
茶點故事閱讀 39,795評論 1贊 347
活死人
序言：一個原本活蹦亂跳的男人離奇死亡替久，死狀恐怖，靈堂內(nèi)的尸體忽然破棺而出躏尉，到底是詐尸還是另有隱情蚯根，我是刑警寧澤，帶...
沈念sama閱讀 35,501評論 5贊 345
?日本核電站爆炸內(nèi)幕
正文年R本政府宣布胀糜，位于F島的核電站颅拦，受9級特大地震影響，放射性物質(zhì)發(fā)生泄漏教藻。R本人自食惡果不足惜距帅，卻給世界環(huán)境...
茶點故事閱讀 41,119評論 3贊 328
男人毒藥：我在死后第九天來索命
文/蒙蒙一、第九天我趴在偏房一處隱蔽的房頂上張望括堤。院中可真熱鬧碌秸，春花似錦、人聲如沸悄窃。這莊子的主人今日做“春日...
開封第一講書人閱讀 31,731評論 0贊 22
一樁弒父案，背后竟有這般陰謀
文/蒼蘭香墨我抬頭看了看天上的太陽轧抗。三九已至恩敌，卻和暖如春，著一層夾襖步出監(jiān)牢的瞬間横媚，已是汗流浹背纠炮。一陣腳步聲響...
開封第一講書人閱讀 32,865評論 1贊 269
情欲美人皮
我被黑心中介騙來泰國打工月趟，沒想到剛下飛機就差點兒被人妖公主榨干…… 1. 我叫王不留，地道東北人抗碰。一個月前我還...
沈念sama閱讀 47,899評論 2贊 370
代替公主和親
正文我出身青樓狮斗，卻偏偏與公主長得像，于是被迫代替她去往敵國和親弧蝇。傳聞我的和親對象是個殘疾皇子，可洞房花燭夜當(dāng)晚...
茶點故事閱讀 44,724評論 2贊 354

Web前端優(yōu)化最佳實踐及工具集錦

一更胖、Google的Web優(yōu)化最佳實踐

二、雅虎的Web優(yōu)化最佳實踐

三、一些工具

一矩欠、Google的Web優(yōu)化最佳實踐

二嗽测、雅虎的Web優(yōu)化最佳實踐

三诅妹、一些工具

推薦閱讀更多精彩內(nèi)容