浅谈高性能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请求

‘