顶部右侧 | 自行修改 顶部左侧内容
当前位置:网站首页 > SEO技术 > 正文

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

seo秀 2019-05-25 19 浏览 0 评论

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

 

本文是Web前端性能优化系列文章中的第一篇,主要讲述如何减少减少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. 合并脚本和样式表

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

,

本文是Web前端性能优化系列文章中的第一篇,主要讲述如何减少减少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. 合并脚本和样式表

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

相关推荐

目前西安SEO网站优化还有发展前景吗?
目前西安SEO网站优化还有发展前景吗?

我们都知道,做SEO网站优化其实是一种思维,不能能仅仅局限于技术上,而是要突破自己的固定思维的束缚,可以跟别的SEO优化师进行交流,这样会获取更多的优化心得,同...

2周前 (09-04) seo秀

SEO教程:网站内容、内链、外链、友情链接套路圈子

SEO套路教程:网站内容、内链、外链、友情链接就是一些网站优化扎实的基础套路SEO教程大家好,我是高兴,很高兴今天来给大家讲解SEO套路教程,网站内容、内链、外链、友情链接。PS:其实这篇文章我在去年...

老网站比新网站真的更容易优化吗?

很多人错误的以为,老网站一定比新网站更容易优化排名,其实未必,要看网站历史的状态变化,在某些情况下,确实是老网站更容易优化,毕竞,在时间轴上,老网站是会累积权重的,我们要以以下几个情况具体分析:没有进...

SEO基本功:站内优化的一些基本手段
SEO基本功:站内优化的一些基本手段

1、三要素在该做的地方都要做好,不管你的站是新站还是很牛逼的站,只要你打算依靠搜索引擎。那就不要懒了,别说什么没用的话。你去浏览器搜一搜,看看没有这些的站点乱七...

2周前 (09-01) seo秀

会SEO网站排名优化有什么用途?

SEO优化网站,提高网站关键词在搜索引擎排名的技术。是每一位做网络营销都绕不过去的基础技能。SEO发展经历了很多阶段,SEO已经成为了传统行业,就像冰箱、电灯等,曾是伟大发明,现在已经成为生活中必不可...

做SEO多久才能看到效果?
  • 做SEO多久才能看到效果?
  • 做SEO多久才能看到效果?
  • 做SEO多久才能看到效果?
  • 做SEO多久才能看到效果?
什么是SEO网络推广,每天都需要做那些事?
  • 什么是SEO网络推广,每天都需要做那些事?
  • 什么是SEO网络推广,每天都需要做那些事?
  • 什么是SEO网络推广,每天都需要做那些事?
  • 什么是SEO网络推广,每天都需要做那些事?
SEO全揭秘,这里独一份,适合各阶段人群
  • SEO全揭秘,这里独一份,适合各阶段人群
  • SEO全揭秘,这里独一份,适合各阶段人群
  • SEO全揭秘,这里独一份,适合各阶段人群
  • SEO全揭秘,这里独一份,适合各阶段人群
今日头条seo如何优化?如何做搜索靠前呢?
今日头条seo如何优化?如何做搜索靠前呢?

一、“头条seo”是什么?头条seo指的是在今日头条app上用关键词搜索结果排名靠前。做百度有所谓的“百度seo”,做谷歌有所谓的“谷歌seo”,那么作为头条这...

1个月前 (08-13) seo秀

如何判断一个要优化的关键词能否SEO上百度首页?
  • 如何判断一个要优化的关键词能否SEO上百度首页?
  • 如何判断一个要优化的关键词能否SEO上百度首页?
  • 如何判断一个要优化的关键词能否SEO上百度首页?
  • 如何判断一个要优化的关键词能否SEO上百度首页?

欢迎 发表评论: