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

浏览量:651次    时间:2016-04-22 11:42:23

性能黄金法则

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

前言
有关前端性能优化的资料参考于《高性能网站建设》这本书,这一系列的文章可以看作是对这本书的阅读笔记。
改善响应时间的最简单途径就是减少组件的数量,并由此减少HTTP请求的数量。接下来将探讨几个技术实现。

1. 图片地图
图片地图允许你在一个图片上关联多个URL。目标URL的选择取决于用户单击了图片上的哪个位置。
以导航栏为例,当点击图标的时候将打开一个新的窗口。要实现的效果如下图:
1429258939171
我们可以通过使用五个分开的图片,然后让每个图片对应一个超链接。然而这样无疑就产生了5个Http请求,我们的目标是要减少HTTP请求,这里图片地图就可以派上用场了,通过将五个图片合并为一张图片,然后以位置信息定位超链接,这样就把HTTP请求减少为一个了,又可以保证设计的完整性和功能的齐全性。

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轴。
3. 合并脚本和样式表
适当地把多个脚本合并为一个脚本,把多个样式表合并为一个样式表。

更多阅读

云服务市场厂商大打价格战背后的...
小蓝车的今天会是云厂商的明天吗?
【原创】云趣大白话系列:虚拟主...
很多客户对网络不了解,尤其是只关注价格的客户,往往会忽略掉一个亘古不变的道理,那就是一分钱一分货。 在网站制作的完毕,进入网站部署的阶段里,这里会涉及到网站域名、网站空间(服务器)。 域名就不用多做解释...
云趣科技为您解说定时定量更新文...
针对文章更新,许多新手站长问到,除了坚持写原创文章之外,文章更新什么时间最好?下面云趣科技具体给大家说说更新文章虽然不需要做到定时定量,但还是固定一个时间段,且有规律的更新最好。 蜘蛛也是一种宠物的一种...

快速提交您的需求

或者发送商务咨询到邮箱:9029855@qq.com

您也可以通过以下方式联系我们

  • 邮箱:9029855@qq.com
  • 手机:13770023052
  • 座机:13770023052
  • Q Q:9029855 在线咨询
  • 地址:盐城市亭湖区法治广场

项目经理微信

dylanv

微信公众号

云趣微商城

 
在线咨询
QQ咨询
项目经理直线
13770023052