联系我们

联系人:王经理

联系电话:18936095638

     0512-85889506

地址:苏州市国际科技园3期15楼A

电话/传真:0512-85889506

E-mail:kswz821@163.com   kswz821@126.com

http://www.kswz821.com

技术知识

企业网站建设减少http请求的方法

发布日期:2018-04-27 内容来源于:http://www.kswz821.com

更多 0

在效率至上的互联网时代,用户是不会花费太多的时间等待网站页面的响应。要提高网站响应速度,最重要的一点就是减少http请求,那么那么企业网站建设怎么做才能减少http请求呢?


  一般来说要减少http请求通常从两个方面下手:减少图片的请求、减少脚本文件与样式表的请求

减少图片的请求

  图片的减少通常有两种方式:csssprites、内联图片、IconFont。


  CSSSprites:将多张图片合并成一幅单独的图片,使用css的background-position属性,将html元素的背景图片放到sprites图片中的期望位置上。使用这项技术的附加优点是他降低了下载量,合并后的图片比分离的图片和更小,因为它降低了图片自身的开销(颜色表、格式信息等等)。实际项目中csssprites是一项体力活,因为开发过程中需要对这张大图进行维护(添加、减少图片),张鑫旭同学的文章中有介绍如何管理sprites图片可以作为参考(这里)。如果需要在页面中为背景、链接、导航栏提供大量的图片,csssprites绝对是一种优秀的解决方案(干净的标签、较少的图片、较短的响应时间)。


  内联图片:通过使用data:URL模式可以再页面中包含图片而无需任何额外的请求。缺点就是IE8以下的浏览器不支持这种方式,而IE8在数据大小上有限制,只能支持23kb以内的数据。对于较小的图片来说可以直接内联到web页面中,但对于大图片内联到页面里会导致页面变大,聪明的做法是使用css,将内联的图片作为背景使用,并放到外部样式表中,这意味着数据可以缓存在样式表内部。使用外部样式表虽然增加了一个http请求,但样式可以被浏览器缓存,得到额外的收获。另外一点需要注意:base64是有损压缩。


  IconFont:图标字体,这是近年来新流行的一种以字体代替图片的技术。它可以适应任何分辨率而不会出现图片模糊问题,与图片相比它具有更小的容量,更高的灵活性(像字体一样可以设置图标大小、颜色、透明度、hover状态、反转等),IE8以上的浏览器都支持该技术。在使用IconFont之前,你首先要确定你选则的字体库是否是收费。


  减少脚本与样式表的请求主要原则就是合并。在实际开发中我们遵循模块化的原则将代码分散到许多小文件中,按照软件开发的原则这是完全正确的,但对于上线页面来说,每一个文件都会产生一个http请求,严重影响性能。和csssprites一样,将这些小文件合并到一个文件中,可以减少http请求的数量并缩短最终用户响应时间。在合并过程中我们还需要使用工具精简(移除不必要的字符以减小文件大小缩减下载时间)和混淆(除了移除不必要字符外,还会改写源代码,比如函数和变量名使用更短的标量名)Javascript代码。对于采用AMD或CMD进行模块化开发的同学,在合并过程中通常会将依赖的其他模块打包到一个文件中,而模板html通常以字符串的方式内联到Javascript文件中。目前最常用的前端构建工具就是glup,这里有一篇初步应用的文章:前端|gulp打包require.js模块依赖。



相关标签:

相关案例:
相关评论:
暂无评论
在线评论:
在线客服