1、圖片地圖
圖片地圖允許在一個圖片上關(guān)聯(lián)多個URL，目標URL取決于用戶單擊的圖片上的位置。
1) 優(yōu)點：
把多張圖片整合到一張圖片中，雖然文件的總體大小不變，但可以減少HTTP請求數(shù)。
2) 使用條件：
只有在圖片的所有組成部分在頁面中是緊挨在一起時才能使用，如導航欄。
3) 缺點：
確定圖片的坐標比較繁瑣且易出錯，同時使用圖片地圖導航也不具有可讀性，因此不推薦使用圖片地圖。
4) 實例：
導航往往使用多個分開的圖片，讓每個圖片對應一個超鏈接，這會產(chǎn)生多個HTTP請求。
圖片地圖將多個圖片合并為一張圖片，以位置定位超鏈接，把HTTP請求減少為一個。
- <!DOCTYPE html>
- <html>
- <head>
- <title></title>
- </head>
- <body>
- <img src="images/img.jpg" usemap="#myMap"/>
- <map name="myMap">
- <area shape="rect" coords="50,50,100,100" href="#" onclick="return show('Rect!')">
- <area shape="circle" coords="240,240,40" href="#" onclick="return show('Circle!')">
- </map>
- <script>
- function show(shape){
- alert(shape);
- return false;
- }
- </script>
- </body>
- </html>
2、CSS Sprites
CSS Sprites，CSS精靈，合并圖片，通過指定CSS的backgroud-image和backgroud-position來顯示元素。
工具：CSS Sprite Generator，可以合并圖片，還可以生成圖片的CSS樣式。
- <!DOCTYPE html>
- <html>
- <head>
- <title></title>
- <style>
- .last{ background-image:url(images/img.png); background-position:0px 0px; width:20px; height:20px; }
- .next{ background-image:url(images/img.png); background-position:-20px 0px; width:20px; height:20px; }
- .last:hover{ background-position:0px -20px; }
- .next:hover{ background-position:-20px -20px; }
- </style>
- </head>
- <body>
- <div>
- <div class="last"></div>
- <div class="next"></div>
- </div>
- </body>
- </html>
3、合并JS腳本和CSS樣式表
適當?shù)匕讯鄠€JS腳本合并為一個腳本，把多個CSS樣式表合并為一個樣式表。
4、使用外部JS和CSS文件
在用戶不帶緩存訪問頁面的時候，內(nèi)聯(lián)所有的js和css的效率更快，原因是外置js和css帶來額外的http請求開銷，1個http請求相對于3個http請求要更快一些。
其實，使用外部JS和CSS文件會產(chǎn)生更快的訪問速度，這是由于外部JS和CSS文件能被瀏覽器緩存，當下次再請求相同的JS和CSS時，瀏覽器將不會再發(fā)出HTTP請求，而是使用緩存的JS和CSS文件，減少了HTTP請求數(shù)。
本站僅提供存儲服務(wù)，所有內(nèi)容均由用戶發(fā)布，如發(fā)現(xiàn)有害或侵權(quán)內(nèi)容，請
點擊舉報。
