网站前端性能优化减少HTTP请求数

  次阅读 作者:智能小宝 来源:互联网 2016-03-25 16:27 我要评论(0)

HTTP请求数对于中小型网站来讲没什么要求了,因为你浏览就这么多了,如果像百度,新浪这类网站你会发现他们在css都会使用sprite来操作,下面我们一起来看看。

减少HTTP请求数对seo/seo.html" target="_blank">网站优化来说是非常重要的,过多的HTTP请求不仅会让用户等待时间变长,而且还会加重服务器的负担。减少HTTP请求主要有以下技术手段。

①图片映射,利用HTML的Map标签将一张图片对应不同链接。

②CSS sprite,国内又叫CSS精灵,或者融图。是将若干个图片融到一张大图中,以减少HTTP请求。

③静态资源合并,将css和javascript等静态资源合并到一个文件并进行压缩。

④静态资源缓存,用户访问一次后不再请求静态资源

1.图片映射

图片映射,就是HTML的热图,指带有可点击区域的一张图片。如下所示代码(来自w3school),将一幅图分割成三个不同的点击区域。

<img src="planets.jpg" border="0" usemap="#planetmap" alt="Planets" />

<map name="planetmap" id="planetmap">

<area shape="circle" coords="180,139,14" href ="venus.html" alt="Venus" />

<area shape="circle" coords="129,161,10" href ="mercur.html" alt="Mercury" />

<area shape="rect" coords="0,0,110,260" href ="sun.html" alt="Sun" />

</map>

图片映射的好处显而易见,如果不适用图片映射的话,你至少得切割成三张图,浏览器分三次请求。

2.CSS sprite

CSS sprite又叫css精灵,是将多张小图融合到一张大图,从而减少HTTP请求数量的方式,比如最常见的各种分享按钮(新浪微博、QQ空间、腾讯微博、人人网等),如果每个按钮都是一张单独的图片,那十几个SNS网站就得十几个小图标,而如果采用CSS sprite,则可以将这十几个图标融为一张图,仅需一次网络请求。这是CSS sprite最明显的好处。

CSS sprite的原理是利用CSS的background-image、background-repeat、background-position这几个属性的组合进行背景定位,background-position可以用x、y值精确的定位出背景图片的位置。

3.静态资源合并压缩

通常情况下我们会写很多css和js代码,而为了便于维护我们可能会将不同的功能模块写入不同的css/js文件,在发布之前我们可以将这些文件合并成一个css或js文件,并对这个文件压缩,这样浏览器请求只需要一次即可加载完所有的css/js文件。当然如果这些文件应用场景差异很大,你也就没必要将他们合并到一个文件。

合并压缩你可以使用Yahoo的YUI compressor或者Google的Closure Compiler。

4.对静态资源文件进行缓存

这个好处显而易见,就不用多说了,最好对静态资源采用不同的域名和HTTP服务器,并且对静态资源设置浏览器缓存为永久(足够长时间,比如淘宝图片CDN就是10年过期),设置方法为给HTTP头设置过期时间,比如nginx服务器可以这样设置:

location ~* .(ico|gif|bmp|jpg|jpeg|png|swf|js|css|mp3) {

root/data/www/static;

expires max;

}

当然,设置静态资源过期也要根据自身的情况,我一般的做法是全部设置为永久缓存。然后每次更新图片或动画都不会用原路径,而是重新生成新的路径。每次css和js更新后加入时间戳,比如http://xxcdn.cn/xx/xx/xx.js?t=20131209

先看百度实例,打开百度我们查看源码 大家会发现所有的css,js都写在了一个页面,如果我们使用站长工具查会发现百度图片,js缓存是永久的了,这个大家会明白为什么吗,还有我们发现在图片中百度这样定了

js代码如下全写在一起了

<script>setTimeout(function(){var s = document.createElement("script");s.charset="utf-8";s.src="http://s1.bdstatic.com/r/www/cache/static/global/js/popup_a3186328.js";document.body.appendChild(s);},0);</script></html><script>(function(){var C=G("lm").getElementsByTagName("A");for(var B=0,A=C.length;B<A;B++){var D=C[B];addEV(D,"mousedown",(function(E,F){return .....(window);</script>

本站文章信息来源于网络以及网友投稿,本站只负责对文章进行整理、排版、编辑,是出于传递更多信息之目的,并不意味着赞同其观点或证实其内容的真实性。如果您有什么意见或建议,请联系QQ28-1688-302!

人工智能实验室
相关文章相关文章
  • 未来两年人工智能要怎么走?看这篇就够了

    未来两年人工智能要怎么走?看这篇就够了

  • 英国研发“杀生”机器人 通过生命体获取能量

    英国研发“杀生”机器人 通过生命体获取能量

  • 韩春雨称已能重复实验结果 近期将有消息公布

    韩春雨称已能重复实验结果 近期将有消息公布

  • 无人驾驶汽车如何改变城市生活?听听他们怎么说

    无人驾驶汽车如何改变城市生活?听听他们怎么说

网友点评网友点评
阅读推荐阅读推荐

据国外媒体报道,在过去两年内,聊天机器人(chatbot)、人工智能以及机器学习的研发和采用取得了巨大进展。许多初创公司正利用人工智能和...

霍金 视觉中国 图 英国著名物理学家霍金(Stephen Hawking)再次就人工智能(AI)发声,他认为:对于人类来说,强大AI的出现可能是最美妙的...

文|郑娟娟 今年,人工智能(AI) 60岁了。在AI60岁的时候,笔者想要介绍一下AI100,一个刚刚2岁的研究项目,但它的预设寿命是100年,甚至更长...

AlphaGo与李世石的人机大战,为大众迅速普及了人工智能的概念。 但对谷歌而言,除了下围棋,现在的人工智能进展到哪一步了?未来,人工智能...