最新中文字幕免费看影视,在线观看国产一区二区三区,在线欧美日韩制服国产,中文字幕,亚洲一区,制服欧美激情丝袜综合色

性能黃金法則

只有10%-20%的最終用戶響應(yīng)時間花在接收請求的HTML文檔上，剩下的80%-90%時間花在HTML文檔所引用的所有組件(圖片，script，css，flash等等)進行的HTTP請求上。

前言

有關(guān)前端性能優(yōu)化的資料參考于《高性能網(wǎng)站建設(shè)》這本書，這一系列的文章可以看作是對這本書的閱讀筆記。

改善響應(yīng)時間的最簡單途徑就是減少組件的數(shù)量，并由此減少HTTP請求的數(shù)量。接下來將探討幾個技術(shù)實現(xiàn)。

1. 圖片地圖

圖片地圖允許你在一個圖片上關(guān)聯(lián)多個URL。目標URL的選擇取決于用戶單擊了圖片上的哪個位置。

以導航欄為例，當點擊圖標的時候?qū)⒋蜷_一個新的窗口。要實現(xiàn)的效果如下圖：

Web前端性能優(yōu)化 Web前端優(yōu)化 HTTP請求

我們可以通過使用五個分開的圖片，然后讓每個圖片對應(yīng)一個超鏈接。然而這樣無疑就產(chǎn)生了5個Http請求，我們的目標是要減少HTTP請求，這里圖片地圖就可以派上用場了，通過將五個圖片合并為一張圖片，然后以位置信息定位超鏈接，這樣就把HTTP請求減少為一個了，又可以保證設(shè)計的完整性和功能的齊全性，實現(xiàn)代碼如下：

2. CSS Sprites

CSS Sprites中文翻譯為CSS精靈，通過使用合并圖片，通過指定css的backgroud-image和backgroud-position來顯示元素。

這里重點提一下backgroud-position屬性。backgroud-position:x y; x和y可以寫負值也可以寫正值，我們可以想象圖片的左上方為(0,0)，以(0,0)坐標向右是為負數(shù)的x軸，以(0,0)坐標向下是為負數(shù)的y軸。正值的情況則以圖片左下方為(0,0)，向右是為正數(shù)的x軸，向上是為正數(shù)的y軸。

來看一張來自豆瓣的翻頁圖片：

Web前端性能優(yōu)化 Web前端優(yōu)化 HTTP請求

可以明顯地看到這里組合了4張圖片，上面兩個按鈕是初始顯示按鈕樣式，當鼠標移到上面的時候就變?yōu)橄旅鎯蓚€按鈕樣式，實現(xiàn)代碼如下：

通常情況下，前端切圖得到的是一張張小圖標，要將其合并為一張圖，可以使用專門的工具，例如CSS Sprite Generator，這個工具不僅可以合并圖片，同時還可以生成圖片的css樣式。

與圖片地圖做一個對比：圖片地圖是依賴于html實現(xiàn)，CSS精靈依賴于CSS實現(xiàn)，CSS精靈的實現(xiàn)方式更為靈活。

3. 合并腳本和樣式表

適當?shù)匕讯鄠€腳本合并為一個腳本，把多個樣式表合并為一個樣式表。