網站性能優化（一）

前段時間面試時，面試官問了一個問題：」網站性能優化有什麼方法」，我當時的第一反應就是減小圖片加載，把圖片直接轉成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