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

ShevaKuilin 发布于2019-08-29 15:19 / 3387人阅读

摘要：小白如何轻松写出高性能前端页面一从减少请求开始下面分别从以下几点开篇图片地图，，内联图片，样式表合并，脚本文件合并。操作原理通过合并图片减少请求，并且比图片地图更灵活，降低下载量，合并后图片比分离的图片总和要小。

小白如何轻松写出高性能web前端页面 一.从减少HTTP请求开始

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

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

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

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

‘

GPU云服务器云服务器 web前端技术 web前端技术论坛 web前端技术有哪些 web前端新技术

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/113239.html

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

摘要：小白如何轻松写出高性能前端页面一从减少请求开始下面分别从以下几点开篇图片地图，，内联图片，样式表合并，脚本文件合并。操作原理通过合并图片减少请求，并且比图片地图更灵活，降低下载量，合并后图片比分离的图片总和要小。小白如何轻松写出高性能web前端页面一.从减少HTTP请求开始下面分别从以下几点开篇：图片地图，CSS Sprites，内联图片，样式表合并，脚本文件合并。 1.图片地图...

jayzou 2019-08-22 17:03 评论0 收藏0
浅谈网页基本性能优化规则小结

摘要：雪碧图内联图片将站内小图标合并成一张图，使用定位截取对应图标适当使用内联图片。浏览器缓存合理设置浏览器缓存是网页优化的重要手段之一。为什么要减少请求在性能优化中减少请求的措施占了很大部分，比如使用雪碧这篇文章主要介绍了浅谈网页基本性能优化规则小结的相关资料，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧针对浏览器网页的一些优化规则页面优化静态资源压缩...

Aomine 2019-08-23 13:51 评论0 收藏0
浅谈网页基本性能优化规则小结

摘要：雪碧图内联图片将站内小图标合并成一张图，使用定位截取对应图标适当使用内联图片。浏览器缓存合理设置浏览器缓存是网页优化的重要手段之一。为什么要减少请求在性能优化中减少请求的措施占了很大部分，比如使用雪碧这篇文章主要介绍了浅谈网页基本性能优化规则小结的相关资料，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧针对浏览器网页的一些优化规则页面优化静态资源压缩...

luffyZh 2019-06-28 16:52 评论0 收藏0