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

性能黃金法則

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

前言

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

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

1. 圖片地圖

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

以導(dǎo)航欄為例，當(dāng)點(diǎn)擊圖標(biāo)的時(shí)候?qū)⒋蜷_一個(gè)新的窗口。要實(shí)現(xiàn)的效果如下圖：

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

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

2. CSS Sprites

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

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

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

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

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

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

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

3. 合并腳本和樣式表

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