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

相关推荐