Web前端性能優(yōu)化教程01：減少Http請(qǐng)求
2019-03-26 來源：teroy博客園
本文是Web前端性能優(yōu)化系列文章中的第一篇，主要講述如何減少減少Http請(qǐng)求。完整教程可查看：Web前端性能優(yōu)化
性能黃金法則
只有10%-20%的最終用戶響應(yīng)時(shí)間花在接收請(qǐng)求的HTML文檔上，剩下的80%-90%時(shí)間花在HTML文檔所引用的所有組件(圖片，script，css，flash等等)進(jìn)行的HTTP請(qǐng)求上。
前言
有關(guān)前端性能優(yōu)化的資料參考于《高性能網(wǎng)站建設(shè)》這本書，這一系列的文章可以看作是對(duì)這本書的閱讀筆記。
改善響應(yīng)時(shí)間的最簡(jiǎn)單途徑就是減少組件的數(shù)量，并由此減少HTTP請(qǐng)求的數(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)的效果如下圖：
我們可以通過使用五個(gè)分開的圖片，然后讓每個(gè)圖片對(duì)應(yīng)一個(gè)超鏈接。然而這樣無疑就產(chǎn)生了5個(gè)Http請(qǐng)求，我們的目標(biāo)是要減少HTTP請(qǐng)求，這里圖片地圖就可以派上用場(chǎng)了，通過將五個(gè)圖片合并為一張圖片，然后以位置信息定位超鏈接，這樣就把HTTP請(qǐng)求減少為一個(gè)了，又可以保證設(shè)計(jì)的完整性和功能的齊全性，實(shí)現(xiàn)代碼如下：
- <img usemap="#map1" border=0 src="">
- <map name="map1">
- <area shape="rect" coords="0,0,31,31" href="javascript:alert('Home')" title="Home">
- <area shape="rect" coords="36,0,66,31" href="javascript:alert('Gifts')" title="Gifts">
- <area shape="rect" coords="71,0,101,31" href="javascript:alert('Cart')" title="Cart">
- <area shape="rect" coords="106,0,136,31" href="javascript:alert('Settings')" title="Settings">
- <area shape="rect" coords="141,0,171,31" href="javascript:alert('Help')" title="Help">
- </map>
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軸。
來看一張來自豆瓣的翻頁圖片：
可以明顯地看到這里組合了4張圖片，上面兩個(gè)按鈕是初始顯示按鈕樣式，當(dāng)鼠標(biāo)移到上面的時(shí)候就變?yōu)橄旅鎯蓚�(gè)按鈕樣式，實(shí)現(xiàn)代碼如下：
- <html>
- <head>
- <title></title>
- <style type="text/css">
- .left{ background-image:url(2.png); background-position:0px 0px; width:18px; height:18px; }
- .right{ background-image:url(2.png); background-position:-18px 0px; width:18px; height:18px; }
- .left:hover{ background-position:0px -18px; }
- .right:hover{ background-position:-18px -18px; }
- </style>
- </head>
- <body>
- <div>
- <div class="left"></div>
- <div class="right"></div>
- </div>
- </body>
- </html>
通常情況下，前端切圖得到的是一張張小圖標(biāo)，要將其合并為一張圖，可以使用專門的工具，例如CSS Sprite Generator，這個(gè)工具不僅可以合并圖片，同時(shí)還可以生成圖片的css樣式。
與圖片地圖做一個(gè)對(duì)比：圖片地圖是依賴于html實(shí)現(xiàn)，CSS精靈依賴于CSS實(shí)現(xiàn)，CSS精靈的實(shí)現(xiàn)方式更為靈活。
3. 合并腳本和樣式表
適當(dāng)?shù)匕讯鄠�(gè)腳本合并為一個(gè)腳本，把多個(gè)樣式表合并為一個(gè)樣式表。
標(biāo)簽： Web前端性能優(yōu)化 Web前端優(yōu)化 HTTP請(qǐng)求
版權(quán)申明：本站文章部分自網(wǎng)絡(luò)，如有侵權(quán)，請(qǐng)聯(lián)系：west999com@outlook.com
特別注意：本站所有轉(zhuǎn)載文章言論不代表本站觀點(diǎn)！
本站所提供的圖片等素材，版權(quán)歸原作者所有，如需使用，請(qǐng)與原作者聯(lián)系。
