網站效能最佳化（一）

標籤：響應   關聯   map   style   examples   顯示   cpe   伺服器   alt   

前段時間面試時，面試官問了一個問題：”網站效能最佳化有什麼方法”，我當時的第一反應就是減少圖片載入，把圖片直接轉成base64，然後直接寫到css中，這樣能減少從後台拿資料的次數，然後我直接說出了我的想法。面試官問還有沒有其他方法，我就一臉茫然了。回來之後我趕快看了《高效能網站最佳化指南》，裡面介紹了不少有用的方法，有前端的也有後端，有些我們平時開發的時候一直在用，但是沒有覺得能提高網站的效能，有些就從來沒有想到過。下面我主要介紹一下這本書裡面的前端效能最佳化方法吧~

1.減少http請求

steve在書中說，網站載入時，很大的一部分時間都在載入各種資源，載入一個資源就要發一次http請求，這麼多個請求一起發出，伺服器端處理這麼多請求，效能自然就慢下來了。所以要提高網站效能，自然是要減少http請求的，如何減少http請求，有下面幾種方法。

（1）減少圖片資源的http請求

如果一張圖片就要發一次請求，那麼網頁片一多，請求的次數自然就增加了，如果把所有圖片集中在一塊，然後發送一次請求把所有的圖片都拿過來，這樣效能不就提高了嗎。書中介紹了三種減少方法。

a.圖片地圖

一般一張圖片會關聯一個超連結。圖片地圖可以在一個圖片上關聯多個URL，目標URL的選擇取決與使用者單擊了圖片的哪個位置。

例如，在一個地方有5個圖片，單擊一個圖片可以跳轉到相應的連結。這個可以通過5個分開的連結，使用5個分開的圖片來實現。也可以通過圖片地圖來實現，因為5個http請求減少為一個http請求，響應的時間會減少。

可以通過以下兩個例子來體驗一下效果：

無圖片地圖樣本：

http://stevesouders.com/hpws/imagemap-no.php 

有圖片地圖樣本：

http://stevesouders.com/hpws/imagemap.php

b. css sprites

css sprites和圖片地圖類似，只不過會更靈活。圖片地圖需要將圖片按順序排好在傳過來。而css sprites是把多個圖片合并到一個的單獨的圖片中， 就像一個充滿小圖片的顯示板，每個圖片都有自己對應的座標。所以不需要將圖片按順序排好，只需要將圖片加進去，然後找到圖片對應的座標就可以找到該圖片了。

css sprites 樣本：

http://stevesouders.com/examples/sprites.php 

c.內聯圖片

內聯圖片就是我面試是回答的那種方式，將圖片轉成base64，通過 data: URL嵌在css中，像下面這樣：

<IMG ALT="Red Star" src="data:image/gif;base64,f fBiYvww IvrKy/FvcPews09Wfaj0+w60/ AAsALAAAAAAMAAw?AAQzcEIZyrYTEHYTugknHd9XGV+qKSYirKkwDYiKDBia tt2HIKBLQRFIJAIKywRgmhw?11">

內聯樣式樣本：

http://stevesouders.com/examples/inline-css-images.php 

內聯圖片樣本：

http://stevesouders.com/examples/inline-images.php 

 

網站效能最佳化（一）