淺談高性能web前端技術棧——小白輕鬆作到減小HTTP請求

小白如何輕鬆寫出高性能web前端頁面

一.從減小HTTP請求開始

下面分別從如下幾點開篇：圖片地圖，CSS Sprites，內聯圖片，樣式表合併，腳本文件合併。

1.圖片地圖：服務器端圖片地圖和客戶端圖片地圖。

操做原理：利用用戶點擊圖片的x,y座標，提交一個目標URL,或者映射一個操做。

> 舉個栗子：頁面的導航欄模塊，由四個圖片組成，用戶點擊每一個圖片會連接到不一樣的URL地址。
> 方式一：四個分開的圖片對應四個分開的超連接，須要四個HTTP請求（效率較低）；
> 方式二：一個圖片由四個導航組成，用<map>圖像映射實現，須要一個HTTP請求，響應時間下降（**效率提升**），**圖片地圖中的圖片必須是連續的**。

代碼實例:

方法一(效率低)
    <div>
        <a href="javascript:alert('Home')" title="Home">
            <img border="0" src="/images/home.gif?t=1525702714">
        </a>
        <a href="javascript:alert('Gift')" title="Gift">
            <img border="0" src="/images/gift.gif?t=1525702714">
        </a>
        <a href="javascript:alert('Cart')" title="Cart">
            <img border="0" src="/images/cart.gif?t=1525702714">
        </a>
        <a href="javascript:alert('Settings')" title="Settings">
            <img border="0" src="/images/settings.gif?t=1525702714">
        </a>
    </div>

方法二（**效率高**）
    <div>
        <img usemap="#navbar" border="0" src="/images/imagemap.gif?t=1525702507">
        <map name="navbar" id="navbar">
              <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">
        </map>
    </div>

2.CSS Sprites：更爲靈活的將多幅圖片合併爲一幅單獨圖片的方式。

操做原理：經過合併圖片減小http請求，而且比圖片地圖更靈活，下降下載量，合併後圖片比分離的圖片總和要小。
優勢：乾淨的標籤，不多的圖片，很短的響應時間

代碼實現：

<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>
     </div> 
     
    #navbar span {
        width: 31px;
        height: 31px;
        display: inline;
        float: left;
        background-image: url(/images/spritebg.gif?t=1526305412);
    }
    .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;
    }
    ......

3.內聯圖片：更爲靈活的將多幅圖片合併爲一幅單獨圖片的方式。

經過使用 data:URL模式 缺點：IE8如下不支持，受數據大小的限制，總體下載量會增長，不會被緩存
其格式以下：data:<mediatype>,<data>
data能夠用於內聯圖片，須要指定URL的地方SCRIPT和A標籤
使用是能夠用CSS將內聯圖片做爲背景，放在外部樣式表中，雖然增長一個HTTP請求，可是能夠實現額外的緩存

代碼實現

<div id="navbar" style="background-color: #F4F5EB; border: 2px ridge #333; width: 180px; height: 30px; padding: 4px 0 4px 0;">
    <a href="javascript:alert('Home')" title="Home"><span class="home"></span></a>
    <a href="javascript:alert('Gift')" title="Gift"><span class="gift"></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;
    margin-right: 4px;
}
.home {
    background-image: url(data:image/gif;base64,R0lGODlhHwAfAPcAAAAAAIxKAKVjCLW1tb29tcbGvc7OxtZ7ANbWz…ddWZZ5UAGPOTXlgkNVOSZdBxEwIkYu7VhYnAol5GaadRqF0Uaz0TgXnX2umVFyGakJUUAAADs=);
    margin-left: 4px;
}

4.合併腳本和樣式表：將腳本合併，樣式表合併，減小HTTP請求

‘