使用圖片地圖減少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請求，減少了一個請求了。如果導航很多的情況下，減少的請求數量就會很可觀。