本文是Web前端机能SEO系列文章中的第一篇,次要报告怎样削减削减Http恳求。完好教程可检察:Web前端机能优化
机能黄金法例
只要10%-20%的终极用户呼应工夫花正在领受恳求的HTML文档上,剩下的80%-90%工夫花正在HTML文档所援用的一切组件(图片,script,css,flash等等)停止的HTTP恳求上。
媒介
有闭前端机能优化的材料参考于《下机能网站建立》那本书,那一系列的文章能够看做是对那本书的浏览条记。
改进呼应工夫的最简朴路子便是削减组件的数目,并由此削减HTTP恳求的数目。接下去将讨论几个手艺真现。
1. 图片舆图
图片舆图许可您正在一个图片上联系关系多个URL。目的URL的挑选与决于用户单击了图片上的哪个位置。
以导航栏为例,当面击图标的时分将翻开一个新的窗心。要真现的结果以下图:
我们能够经由过程利用五个分隔的图片,然后让每一个图片对应一个超链接。但是那样无疑便发生了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轴。
去看一张去自豆瓣的翻页图片:
能够较着天看到那里组开了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 class="left"></div>
- <div class="right"></div>
- </div>
- </body>
- </html>
凡是状况下,前端切图获得的是一张张小图标,要将其兼并为一张图,能够利用专门的东西,比方CSS Sprite Generator,那个东西不只能够兼并图片,同时借能够死成图片的css款式。
取图片舆图做一个比照:图片舆图是依靠于html真现,CSS粗灵依靠于CSS真现,CSS粗灵的真现方法更加灵敏。
3. 兼并剧本战款式表
恰当天把多个剧本兼并为一个剧本,把多个款式表兼并为一个款式表。