优搜网

Web前端性能优化攻略教程1:减少Http请求

Web前端性能优化攻略教程:减少Http请求

本文是Web前端 性能优化系列文章中的第一篇,主要讲述如何减少减少Http请求。完整教程可查看:Web性能优化Web前端优化前端性能优化

性能黄金法则

只有10%-20%的最终用户响应时间花在接收请求的HTML文档上,剩下的80%-90%时间花在HTML文档所引用的所有组件(图片,script,css,flash等等)进行的HTTP请求上。

前言

有关前端性能优化的资料参考于《高性能网站建设》这本书,这一系列的文章可以看作是对这本书的阅读笔记。

改善响应时间的最简单途径就是减少组件的数量,并由此减少HTTP请求的数量。接下来将探讨几个技术实现。

1. 图片地图

图片地图允许你在一个图片上关联多个URL。目标URL的选择取决于用户单击了图片上的哪个位置。

以导航栏为例,当点击图标的时候将打开一个新的窗口。要实现的效果如下图:

Web前端性能优化攻略教程:减少Http请求

我们可以通过使用五个分开的图片,然后让每个图片对应一个超链接。然而这样无疑就产生了5个Http请求,我们的目标是要减少HTTP请求,这里图片地图就可以派上用场了,通过将五个图片合并为一张图片,然后以位置信息定位超链接,这样就把HTTP请求减少为一个了,又可以保证设计的完整性和功能的齐全性,实现代码如下:

  • <img usemap=”#map1″ border=0 src=”">
  • <map name=”map1″>
  •     <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”>
  •     <area shape=”rect” coords=”141,0,171,31″ href=”javascript:alert(‘Help’)” title=”Help”>
  • </map>

2. CSS Sprites

CSS Sprites中文翻译为CSS精灵,通过使用合并图片,通过指定css的backgroud-image和backgroud-position来显示元素。

这里重点提一下backgroud-position属性。backgroud-position:x y; x和y可以写负值也可以写正值,我们可以想象图片的左上方为(0,0),以(0,0)坐标向右是为负数的x轴,以(0,0)坐标向下是为负数的y轴。正值 的情况则以图片左下方为(0,0),向右是为正数的x轴,向上是为正数的y轴。

来看一张来自豆瓣的翻页图片:

Web前端性能优化攻略教程:减少Http请求

可以明显地看到这里组合了4张图片,上面两个按钮是初始显示按钮样式,当鼠标移到上面的时候就变为下面两个按钮样式,实现代码如下:

  • <html>
  • <head>
  •     <title></title>
  •     <style type=”text/css”>
  •         .left{ background-image:url(2.png); background-position:0px 0px; width:18px; height:18px; }
  •         .right{ background-image:url(2.png); background-position:-18px 0px; width:18px; height:18px; }
  •         .left:hover{ background-position:0px -18px; }
  •         .right:hover{ background-position:-18px -18px; }
  •     </style>
  • </head>
  • <body>
  •     <div>
  •         <div></div>
  •         <div></div>
  •     </div>
  • </body>
  • </html>

通常情况下,前端切图得到的是一张张小图标,要将其合并为一张图,可以使用专门的工具,例如CSS Sprite Generator,这个工具不仅可以合并图片,同时还可以生成图片的css样式。

与图片地图做一个对比:图片地图是依赖于html实现,CSS精灵依赖于CSS实现,CSS精灵的实现方式更为灵活。

3. 合并脚本和样式表

适当地把多个脚本合并为一个脚本,把多个样式表合并为一个样式表。

注:相关SEO优化技巧阅读请移步到SEO技术频道。


优搜网-网站优化,从SEO到互联网营销,提供最优的网站优化解决方案
优搜网,从SEO到互联网营销,为您提供最优的网站优化解决方案。提供网站优化,百度优化,关键词排名,百度推广,服务器租用托管及高权重(pr)域名转让业务。
关于uiseo.cn

本文分类: SEO技术

发布时间: 2015年04月22日 17:47

本文链接: http://www.uiseo.cn/web-seo-http

继续查看有关:/ / / / 的文章

若无特别注明,文章皆为优搜网原创,转载请注明出处


文章评论
共收到 0 条评论
广告招租