減少HTTP請求的四種方式

由於HTTP1.1協議規定請求只能串行發送，也就是說一百個請求必須一次逐個發送，前面的一個請求完成才能發送下一個請求。

所以我們在開發的時候應該儘量減少HTTP請求，如下有4種方式：

1、使用圖片地圖

圖片地圖允許你在一個圖片上關聯多個URL，目標URL的選擇取決於用戶單擊了圖片上的哪個位置

使用<map><area></area></map>標籤，如：

<img usemap="#map1" border=0 src="/images/imagemap.gif?t=1517842951">
<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精靈，通過使用合併圖片，通過指定CSS的background-image和background-position來顯示元素，如：

<div id="navbar" style="background-color: #F4F5EB; border: 2px ridge #333; width: 180px; height: 32px; padding: 4px 0 4px 0;">
  <a href="javascript:alert('Home')" title="Home"><span class="home"></span></a>
  <a href="javascript:alert('Gifts')" title="Gifts"><span class="gifts"></span></a>
  <a href="javascript:alert('Cart')" title="Cart"><span class="cart"></span></a>
  <a href="javascript:alert('Settings')" title="Settings"><span class="settings"></span></a>
  <a href="javascript:alert('Help')" title="Help"><span class="help"></span></a>
</div>

#navbar span {
  width:31px;
  height:31px;
  display:inline;
  float:left;
  background-image:url(/images/spritebg.gif?t=1517843093);
}
.home     { background-position:0 0; margin-right:4px; margin-left: 4px;}
.gifts    { background-position:-32px 0; margin-right:4px;}
.cart     { background-position:-64px 0; margin-right:4px;}
.settings { background-position:-96px 0; margin-right:4px;}
.help     { background-position:-128px 0; margin-right:0px;}

3、合併腳本和樣式表

把多個腳本合併爲一個腳本，多個樣式表合併爲一個樣式表

4、使用Base64編碼來減少頁面請求數，如：

<a href="javascript:alert('Home')" title="Home"><img border=0 src="data:image/gif;base64,R0lGODlhHwAfAPcAAAAAAIxKAKVjCLW1tb29tcbGvc7OxtZ7ANbWztbW1tbe1t7e1uelMefn1ufn3ufn5+fv3u+MAO/v5+/v7/fGCPf35/f37//nY////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////yH5BAEAAAAALAAAAAAfAB8AAAj+AAEIHEhQAoICAxImLIBAAsGHEAc6KEDAgAIJGCU4UGCgooOIESUYYJjxgQSTGE0eNOAQpMCJBhycnGmyJs2RH0E6INAQpc2ZNDEiIJDzoQSSP5MCrXmwJUEDMWs6eCDTQYQDWKdOPTkV6sOdD8KKFRvhAlYKBx4IOCBA7M6iRxE4mEt3btkDDBgcQLtWQN2hLd8uWOBgcOG7DChQ0IuWrYLChAk8AGCwwODLgxErVsyYrYMEl0nGVUC6tObNnPceSFBaQVMJAxC4lo3gNOrUaFnTHoAxNm3XVxPfRq139e8BEGAjWD5bgIALw287T8AcAXLly2kjOACdc17higXSIKDO/Lpv7Qq4bw7APgBq8eOzX69InrZ6xe3dbxZffyTGkb8tdx8F+b0Xn2sFsCSBAgTM5lp63RHYnoHUudZgRgkGOGCB+43nGk4OGcQTabKx5dyJKJ7ImoUNCaRRAZYN1ppsrT3Y2gIwyjSQBAtUpABml/0IJGYd6VjQUDH9uBFkGxGm5I8dPQaRUAQUMBdhhBV25ZYUJZBcSAtSJBddWZZ5UAGPOTXlgkNVOSZdBxEwIkYu7VhYnAol5GaadRqF0Uaz0TgXnX2umVFyGakJUUAAADs="></a>