使用圖片地圖減少HTTP請求數量
阿新 • • 發佈:2017-11-02
點擊 有一個 str sha lan 映射 http請求 單位 圖片映射
前言
最近在看《高性能網站建設》,記錄一下所學。
現在很多網站都是圖片形式的導航,點擊圖片跳轉到對應的鏈接。如果導航項目很多的話,圖片的數量就會很多,每需要加載一張圖片就會多一個HTTP請求。優化的方式之一就是使用圖片地圖
標簽
圖片地圖要用到map和area標簽
map標簽用於客戶端的圖片映射;area標簽指定映射區域。兼容性良好,可放心使用
栗子
<aside class="container"> <img src="src/img_map.png" alt="導航圖片" usemap="#nav_test"> <map name="nav_test"> <area shape="rect" coords="0 0 300 110" href="https://www.so.com/" target="_blank" alt="360搜索"> <area shape="rect" coords="0 110 300 212" href="https://www.baidu.com/" target="_blank" alt="百度搜索"> </map> </aside>
img的usename可指定所使用的映射,對應map的name屬性
area的shape屬性規定形狀(default|rect|circle|poly);coords屬性規定區域,不同的shape時,coords的格式也不一樣(栗子中shape為矩形,coords就指定了矩形左上角和右下角的坐標,單位為px . ps:在html4的時候還可以是百分比,但是html5貌似只能是數值);href和target、alt就和a標簽的一樣
一張圖片就對應了兩個不同的鏈接,而只有一個http請求,減少了一個請求了。如果導航很多的情況下,減少的請求數量就會很可觀。
使用圖片地圖減少HTTP請求數量