互聯(lián)網(wǎng)上的網(wǎng)站越來越多，筆者也訪問過不少網(wǎng)站，有的網(wǎng)站秒開，有的網(wǎng)站需要3-5秒才能加載完畢，也有甚者需要6-10秒才能加載完畢，這大大的影響了用戶體驗(yàn)。

解決網(wǎng)站響應(yīng)速度需要注意的18個(gè)規(guī)則

下來主要介紹一下網(wǎng)站性能優(yōu)化的方法：

規(guī)則一：減少HTTP請求

1、圖片地圖：允許在一個(gè)圖片上關(guān)聯(lián)多個(gè)URL，目標(biāo)URL的選擇取決于用戶點(diǎn)擊了圖片上的哪個(gè)位置。

2、CSS Sprites（css精靈）：需要將多個(gè)圖片合并在一個(gè)單獨(dú)的圖片上，根據(jù)css的background屬性定位到對應(yīng)的圖標(biāo)上。圖片地圖中的圖片必須是連續(xù)的，而css Sprites則沒有這個(gè)限制。

3、內(nèi)聯(lián)圖片：通過使用data:URL模式可以在WEB頁面中包含圖片但無需任何額外的HTTP請求。Data：URL模式的主要缺陷在于不受IE的支持（包括7），另一個(gè)缺陷就是可能存在數(shù)據(jù)大小上的限制。

將內(nèi)聯(lián)圖片放置在外部，可以從緩存中得到額外收獲。

4、 合并腳本和樣式表:多個(gè)腳本合并為一個(gè)腳本，多個(gè)樣式表合并為一個(gè)樣式表。

規(guī)則二：使用內(nèi)容發(fā)布網(wǎng)絡(luò)

如果應(yīng)用程序Web服務(wù)器離用戶更近，則一個(gè)HTTP請求的響應(yīng)時(shí)間將縮短。

內(nèi)部發(fā)布網(wǎng)絡(luò)（cdn）是一組分布在多個(gè)不同地理位置的Web服務(wù)器，用于更加**地向用戶發(fā)布內(nèi)容。除了縮短響應(yīng)時(shí)間之外，CDN還可以帶來其他優(yōu)勢。他們的服務(wù)包括備份，擴(kuò)展存儲(chǔ)能力和進(jìn)行緩存。

依賴CDN的一個(gè)缺點(diǎn)就是你的響應(yīng)時(shí)間可能會(huì)受到其他網(wǎng)站的流量的影響，第二就是無法直接控制組件服務(wù)器所帶來的特殊麻煩。例如：修改http響應(yīng)頭必須通過服務(wù)提供商而不是自己，而且如果CDN的服務(wù)性能下降，你的工作質(zhì)量也隨之下降。

CDN用于發(fā)布靜態(tài)內(nèi)容，如圖片，腳本，樣式表和Flash。

規(guī)則三：添加Expires頭

Web服務(wù)器使用Expires頭來告訴Web客戶端它可以使用一個(gè)組件的當(dāng)前副本，知道指定的時(shí)間為止。HTTP規(guī)范中簡要地稱該頭為“在這一日期/時(shí)間之后，響應(yīng)將被認(rèn)為是無效的”。

為了克服Expires的限制（因?yàn)镋xpires使用一個(gè)特定的事件，這要求服務(wù)器和客戶端的時(shí)鐘要嚴(yán)格同步，而且過期日期需要經(jīng)常檢查，若到期則需要服務(wù)器提供一個(gè)新日期。）HTTP1.1引入了Cache-Control頭，使用max-age指定指定組件被緩存多久。它以秒為單位定義。

雖然Cache-Control解決了Expires的限制，但對于不支持HTTP1.1的瀏覽器，你可能仍然希望提供Expires頭。

Expires和Cache-Control的max-age同時(shí)存在時(shí)，Cache-Control具有優(yōu)先權(quán)并且明確指出了相對于請求時(shí)間所經(jīng)過的秒數(shù)。

Expires不僅僅應(yīng)用于圖片，而應(yīng)該包含任何不經(jīng)常變化的組件，如腳本，樣式白哦和flash組件。

如果想在Expires過期前更新所緩存的組件，則只需要修改文件名即可，一般講版本號嵌入組件的文件名內(nèi)，修改版本號即可自動(dòng)更新。

果一個(gè)組件沒有長久的Expires頭，它仍然會(huì)存儲(chǔ)在瀏覽器的緩存中。但在后續(xù)的請求中，瀏覽器會(huì)檢查緩存并發(fā)現(xiàn)組件已經(jīng)過期，就會(huì)向服務(wù)器發(fā)送一個(gè)條件GET請求來檢查，若未改變則接收到304狀態(tài)碼。而通過使用Expires頭則可以避免額外的HTTP請求，對應(yīng)減少響應(yīng)時(shí)間。

規(guī)則四：壓縮組件

從HTTP1.1開始，Web客戶端可以通過HTTP請求中的Accept-Encoding頭來表示對壓縮的支持。（Accept-Encoding：gzip，deflate）而如果Web服務(wù)器看到請求有這個(gè)頭，就會(huì)使用客戶端列出來的方法中的一種來壓縮響應(yīng)，Web服務(wù)器通過響應(yīng)中的Content-Encoding頭來通知Web客戶端采用了何種壓縮。（Content-Encoding：gzip）

壓縮的成本有：服務(wù)器端會(huì)花費(fèi)額外的CPU周期來完成壓縮，客戶端要對壓縮文件進(jìn)行解壓縮。

代理緩存：為了避免不同的瀏覽器請求相同的代理時(shí)出現(xiàn)差異（一個(gè)瀏覽器支持gzip，另一個(gè)瀏覽器不支持gzip），而導(dǎo)致獲取不到正確的數(shù)據(jù)。可以在服務(wù)器的Vary響應(yīng)頭中包含Accept-Encoding來解決。（Vary：Accept-Encoding），這樣代理就會(huì)緩存每個(gè)響應(yīng)的兩個(gè)版本——Accept-Encoding為gzip的壓縮內(nèi)容和沒有指定Accept-Encoding時(shí)的非壓縮內(nèi)容。

規(guī)則五：將樣式表放在頂部

當(dāng)樣式表放在文檔底部會(huì)導(dǎo)致在瀏覽器中阻止內(nèi)容逐步呈現(xiàn)，瀏覽器會(huì)延遲顯示任何可視化組件，這種現(xiàn)象稱為白屏。

使用LINK標(biāo)簽將樣式表放在文檔HEAD中，可以解決白屏和無樣式內(nèi)容的閃爍。

規(guī)則六：將腳本放在底部

使用腳本時(shí)，對于所有位于腳本以下的內(nèi)容，逐步呈現(xiàn)都被阻塞了，也阻塞了并行下載。腳本會(huì)阻塞其后內(nèi)容的呈現(xiàn)，還會(huì)阻塞其后面組件的下載。

HTTP1.1規(guī)范建議瀏覽器從每個(gè)主機(jī)名并行地下載兩個(gè)組件，而HTTP1.0,Firefox的默認(rèn)值是每個(gè)主機(jī)名并行下載8個(gè)組件。

研究表明：使用兩個(gè)主機(jī)名比使用1,4或10個(gè)主機(jī)名能帶來更好的性能。

在下載腳本時(shí)瀏覽器阻塞并行下載的另外一個(gè)原因是為了保證腳本能夠按照正確的順序執(zhí)行。

規(guī)則七：避免CSS表達(dá)式

CSS表達(dá)式很容易導(dǎo)致頻繁求值，從而導(dǎo)致性能低下。

避開問題： 1）、用一次性的表達(dá)式

2）、使用事件處理器代替。

規(guī)則八：使用外部的JS和CSS

純粹而言，內(nèi)聯(lián)快一些。但是外部的js和css文件有機(jī)會(huì)被瀏覽器緩存起來，而且可維護(hù)性也高得多。

兩全其美的方法是加載后下載，即JS和css被加載到頁面中兩次（先是內(nèi)聯(lián)的，然后是外部的）。為主頁內(nèi)聯(lián)css和js，但又能為后續(xù)頁面瀏覽量提供外部文件。可以通過在主頁加載完成后動(dòng)態(tài)下載外部組件來實(shí)現(xiàn)。（通過onload時(shí)間）要使其能夠工作，必須處理雙重定義。（在onload函數(shù)內(nèi)，添加外部的css和js，新增link和script標(biāo)簽到頁面）

還可以利用cookie指示器來實(shí)現(xiàn)動(dòng)態(tài)內(nèi)聯(lián)。用戶**個(gè)訪問頁面時(shí)，服務(wù)器發(fā)現(xiàn)沒有cookie，則生成一個(gè)內(nèi)聯(lián)了組件的頁面。然后服務(wù)器添加js來在頁面加載后動(dòng)態(tài)下載外部文件（并設(shè)置了cookie）。下一次訪問頁面，服務(wù)器看到了cookie，則會(huì)生成一個(gè)使用外部文件的頁面。

規(guī)則九：減少DNS查找

Keep-Alive可以通過重用現(xiàn)有連接而避免了重復(fù)的DNS查找，還能避免TCP/IP開銷來減少響應(yīng)時(shí)間。

減少**主機(jī)名的數(shù)量就可以減少DNS查找的數(shù)量，但也會(huì)潛在的減少頁面中并行下載的數(shù)量。

規(guī)則十：精簡和壓縮JS、CSS大小

精簡是從代碼中移除不必要的字符以減少其大小，進(jìn)而改善加載時(shí)間的實(shí)踐。

精簡js代碼的工具有JSMin，Compressor（已更名為ShrinkSafe）

Gzip壓縮產(chǎn)生的影響**，但精簡能夠進(jìn)一步減少文件大小，隨著js 的使用量和大小不斷增長，精簡js代碼能夠得到更多的節(jié)省。

CSS的精簡也很有必要，移除注釋和空白，合并相同的類，移除不適用的類以及進(jìn)行一些直觀的優(yōu)化，比如對顏色進(jìn)行縮寫和移除不必要的字符串（用0代替0px）

規(guī)則十一：避免重定向

HTML文檔的頭中包含的meta refresh標(biāo)簽可以在其content屬性所指定的秒數(shù)之后重定向用戶



對于內(nèi)部流量的跟蹤，可以通過建立Referer日志來避免重定向，以此節(jié)省最終用戶響應(yīng)時(shí)間。

對于跟蹤出站流量，可以使用信標(biāo)——一個(gè)HTTP請求，其URL中包含有跟蹤信息。比如在a標(biāo)簽上添加點(diǎn)擊事件，新建一個(gè)圖片對象，給它的src賦予鏈接來源和出處。

規(guī)則十二：刪除重復(fù)腳本

重復(fù)腳本損傷性能的方式有兩種：不必要的HTTP請求和執(zhí)行js所浪費(fèi)的事件。

規(guī)則十三：使ajax緩存

Ajax不是一個(gè)單獨(dú)的，需要許可證的技術(shù)，而且一組技術(shù)，包括js，css，dom和異步數(shù)據(jù)獲取，ajax 的目的是為了圖片Web本質(zhì)的開始-停止交互方式。

Ajax請求分被動(dòng)和主動(dòng)。被動(dòng)請求：為了將來使用而預(yù)先發(fā)起的，比如：預(yù)加載。主動(dòng)請求：基于用戶當(dāng)前的操作而發(fā)起的。

使ajax請求可緩存，可以使用一個(gè)長久的Expires頭來替換原來的HTTP頭，但還需要進(jìn)行更多的工作，使用查詢字符串參數(shù)，將用戶名以及該消息的ID都加入查詢字符串中。

要確保Ajax請求遵守性能知道，尤其應(yīng)具有長久的Expires頭。

規(guī)則十四：盡量少用iframe

眾所周知iframe對于SEO優(yōu)化，和網(wǎng)頁打開都有影響，應(yīng)該盡量減少使用。但是在實(shí)際應(yīng)用中可能會(huì)用iframe做一些廣告加載等，這個(gè)看具體需要進(jìn)行優(yōu)化。

規(guī)則十五：減少跨域訪問

跨域訪問相比較來說是個(gè)較耗時(shí)的過程，如非必要，盡量減少跨域請求的個(gè)數(shù)。

規(guī)則十六：精簡網(wǎng)站的DOM結(jié)構(gòu)

過于復(fù)雜和冗余的DOM結(jié)構(gòu)會(huì)增加瀏覽器解析的時(shí)長

規(guī)則十七：對Cookie和localstorage進(jìn)行**

減少站點(diǎn)對于Cookie和localstorage的使用，客戶端存取的環(huán)境比較復(fù)雜，不要往Cookie和localstorage中存儲(chǔ)敏感信息，也應(yīng)該限制存儲(chǔ)的數(shù)據(jù)大小。

規(guī)則十八：避免圖片src屬性為空

瀏覽器在渲染的時(shí)候，會(huì)對圖片的src路徑進(jìn)行請求，當(dāng)src的路徑不存在或者為空時(shí)，瀏覽器會(huì)進(jìn)行錯(cuò)誤顯示，或者再去請求圖片onerror事件里指定的操作，會(huì)增加瀏覽器的請求次數(shù)，

本文由甲爪日付廣告聯(lián)盟整理編輯！更多文章推薦閱讀 ：http://www.jiazhua.com


資訊來源：www.jiazhua.com