性能黄金法则

只有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前端性能优化教程01：减少Http请求的更多相关文章

  1. Web前端性能优化教程06：减少DNS查找、避免重定向

    本文是Web前端性能优化系列文章中的第六篇,主要讲述内容:减少DNS查找.避免重定向.完整教程可查看:  一.减少DNS查找 基础知识 DNS(Domain Name System): 负责将域名UR ...

  2. Web前端性能优化教程09：图像和Cookie优化

    本文是Web前端性能优化系列文章中的第九篇,主要讲述内容:图像和Cookie优化.完整教程可查看:  一. 图像优化 图像基础知识 gif: 适用于动画效果,例如提示的滚动条图案 jpg: 是一种使用 ...

  3. Web前端性能优化教程08：配置ETag

    本文是Web前端性能优化系列文章中的第五篇,主要讲述内容:配置ETag.完整教程可查看:Web前端性能优化 什么是ETag? 实体标签(EntityTag)是唯一标识了一个组件的一个特定版本的字符串, ...

  4. Web前端性能优化教程05：网站样式和脚本

    本文是Web前端性能优化系列文章中的第五篇,主要讲述内容:网站样式和脚本代码的放置位置.使用外部javascript和css.完整教程可查看:Web前端性能优化 一.将样式表放在顶部 可视性回馈的重要 ...

  5. Web前端性能优化教程03：添加Expires头

    本文是Web前端性能优化系列文章中的第三篇,主要讲述添内容:加Expires头.完整教程可查看:Web前端性能优化 什么是Expires头? Expires存储的是一个用来控制缓存失效的日期.当浏览器 ...

  6. Web前端性能优化教程04：压缩组件

    本文是Web前端性能优化系列文章中的第四篇,主要讲述内容:压缩组件.完整教程可查看:Web前端性能优化 基础知识 gzip编码:gzip是GUNzip的缩写,是使用无损压缩算法的一种,最早是用于Uni ...

  7. Web前端性能优化教程07：精简JS 移除重复脚本

    本文是Web前端性能优化系列文章中的第七篇,主要讲述内容:精简Javascript代码,以及移出重复脚本.完整教程可查看:  一.精简javascript 基础知识 精简:从javascript代码中 ...

  8. Web前端性能优化教程02：使用内容分发网络

    基础知识 服务器离用户越近,HTTP请求的响应时间将更短. CNAME:别名记录,当多个域名需要指向同一服务器IP,可以使用一个域名做A记录指向该服务器IP,然后让多个域名指向该A记录. ICP:In ...

  9. 阿里巴巴 web前端性能优化进阶路

    Web前端性能优化WPO,相信大多数前端同学都不会陌生,在各自所负责的站点页面中,也都会或多或少的有过一定的技术实践.可以说,这个领域并不缺乏成熟技术理论和技术牛人:例如Yahoo的web站点性能优化 ...

随机推荐

  1. [No000002]大学本科文凭贬值了多少?

    <大学本科文凭贬值了多少?> 朋友开网络公司,招应届毕业生.他们是小本经营,人手本就不多,面试的时候,忙不过来就会拉我过去,假装是公司的面试官.主管什么的,算是滥竽充数.我装模作样面试了几 ...

  2. android系统架构解析

    以上是我在这个课题下的一些参考博客或者网页链接.里面有对于android架构的一些较好的分析理解,接下来是楼主在阅读后自己的一些整理. Android采用层次化系统架构,官方公布的标准架构如下图所示. ...

  3. Oracle 游标使用全解

    -- 声明游标:CURSOR cursor_name IS select_statement --For 循环游标 --(1)定义游标 --(2)定义游标变量 --(3)使用for循环来使用这个游标 ...

  4. 线程 VS 进程

    线程是指进程内的一个执行单元,也是进程内的可调度实体. 与进程的区别: (1)地址空间:进程内的一个执行单元;进程至少有一个线程;它们共享进程的地址空间;而进程有自己独立的地址空间; (2)资源拥有: ...

  5. PL/SQL Developer 11 64bit 安装和配置

    安装后, 1. 解压 instant client 到plsql developer 的安装目录    注意, 此版本只支持 instantclient_11_x, 不支持 instantclient ...

  6. C#输出log信息

    在写程序的过程中,有时候我们需要添加一些log信息,这个时候,可以采用下面的方法来实现. public static void WriteLog(string ExtraMsg, Exception ...

  7. Visual Studio 2013编辑HTML文件无设计视图的解决方案

    在Visual Studio 2013中编辑HTML文件,会发现没有设计视图. 解决方法:点击Visual Studio 2013的”工具“菜单,再点击”选项“—>文本编辑器—>文件扩展名 ...

  8. Linux execve函数簇用法

    exec函数簇实现的功能都是用一个新程序替换原来的程序,替换的内容包括堆栈段,代码段,进程控制器PCD,但是原进程的PID保持不变 int execl(const char *path, const ...

  9. mac上如何卸载oracle jdk 1.7

    目前mac上有一些软件还不支持jdk1.7,只能卸载1.7,恢复到1.6,下面二个链接是官网给出的卸载方法: http://www.java.com/zh_CN/download/help/mac_u ...

  10. 多线程下HashMap的死循环问题

    多线程下[HashMap]的问题: 1.多线程put操作后,get操作导致死循环.2.多线程put非NULL元素后,get操作得到NULL值.3.多线程put操作,导致元素丢失. 本次主要关注[Has ...