小白怎樣輕鬆寫出高性能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要求

‘