浅谈高性能web前端技术栈——小白轻松做到减少HTTP请求

小白如何轻松写出高性能web前端页面

一.从减少HTTP请求开始

下面分别从以下几点开篇：图片地图，CSS Sprites，内联图片，样式表合并，脚本文件合并。

1.图片地图：服务器端图片地图和客户端图片地图。

操作原理：利用用户点击图片的x,y坐标，提交一个目标URL,或者映射一个操作。

> 举个栗子：页面的导航栏模块，由四个图片组成，用户点击每个图片会链接到不同的URL地址。
> 方式一：四个分开的图片对应四个分开的超链接，需要四个HTTP请求（效率较低）；
> 方式二：一个图片由四个导航组成，用

代码实例:

 方法一(效率低)
    

        
            
        
        
            
        
        
            
        
        
            
        
    

方法二（**效率高**）
    

        
        
    

2.CSS Sprites：更为灵活的将多幅图片合并为一幅单独图片的方式。

操作原理：通过合并图片减少http请求，并且比图片地图更灵活，降低下载量，合并后图片比分离的图片总和要小。
优点：干净的标签，很少的图片，很短的响应时间

代码实现：

    

          
      
      
      
     
 
     
    #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:,
data可以用于内联图片，需要指定URL的地方SCRIPT和A标签
使用是可以用CSS将内联图片作为背景，放在外部样式表中，虽然增加一个HTTP请求，但是可以实现额外的缓存

代码实现

    
    
    
    
    


#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请求

‘