leminsky
leminsky

20 种提升网页速度的技巧

http://www.ibm.com/developerworks/cn/web/wa-speedweb/

 

级别： 中级

Marco Kotrotsos , 创始人和开发人员, Incredicorp

2009 年 4 月 09 日

您希望加快网页的加载速度吗？了解如何通过缩短加载时间来改善拨号上网用户的浏览体验，在某些情形下，加载时间最多可缩短 80%。

引言

不 是所有人都能够使用高速 Internet 连接。即使每个人都能够使用高速网络，也会因为各种各样的原因使您的 Web 应用程序看起来运行缓慢。在这个宽带速度不断提高的时代，您应当关注一下页面加载时间。将珍贵的页面加载时间缩短几秒，将更加珍贵的请求和响应时间缩短几 毫秒。您将为访问者创造一种更好的体验。

阅读完本文之后，您将能够较好地了解网页加载时间优化的基本知识。您还能够使用工具和知识更好地识别和判断加载缓慢的页面部分和瓶颈。

先决条件

在 理想情况下，您应该安装了 Mozilla Firefox。您还应该大体了解 Web 开发。本文涉及的主题并不复杂，但是如果您了解超文本标记语言（Hypertext Markup Language，HTML）、层叠样式表（Cascading Style Sheet，CSS）以及 ™ 编程语言等主题，那么在学习本文时将更加得心应手。不需要使用集成开发环境（IDE），只需使用您喜爱的编辑器。

您必须在浏览器中启用了 JavaScript。另外，要学习与 Firebug 和 YSlow 相关的内容，您需要安装 Firefox Web 浏览器。

假设您没有宽带

许多人通过某种形式的宽带连接访问 Internet，这些形式可能是 DSL、网线、光纤或其他方法。但是，无法使用这类技术的用户不得不使用拨号连接。您一定已经忘记拨号上网是什么感觉了，但您可以试着回想一下网页逐行加载时的情形。

2006 Organization for Economic Cooperation and Development (OECD) 报告将宽带 定义为数据下载速率大于 256 kbit/s 的连接。美国 Federal Communications Commission (FCC) 目前将宽带定义为大于 768 kbit/s 速率的所有连接方式。

幸 运的是，这些可怜的人们现在已经能够获得一些帮助。您可以通过缩短加载页面的时间来改善他们的体验。但是，拨号连接并不是降低加载和响应速度的惟一原因。 许多 Web 设计人员错误地认为高速 Internet 连接的到来会使网站性能优化变得没有必要。这种观点是不对的。例如，过去使用桌面软件执行的许多任务现在可以在线执行。在 Web 应用程序中获得像桌面软件那样的高速响应体验非常困难，因此性能优化非常重要。幸运的是，一些工具和最佳实践可用于缩短响应和加载时间，提供更加流畅的体 验。

根据 Birds-Eye 的 2007 宽带统计显示，美国境内 25% 的人没有 Internet 连接，53% 的人拥有宽带，21% 的人仍然在使用拨号连接。

基本工具

对于所有与优化相关的任务，您必须使用工具来诊断瓶颈和识别问题。现在在 Web 开发中使用最广泛的两个工具是 Firebug 和 YSlow，它们都是开源、免费的 Firefox 插件。

Firebug

Firebug（参见 参考资料 ）是最流行的 Firefox 扩展之一，该应用程序能够使 Web 开发人员的工作更加轻松。它包含许多非常有用的功能，比如：

  • JavaScript 调试
  • JavaScript 命令行
  • 监视 JavaScript 性能和跟踪 XmlHttpRequests
  • 登录 Firebug 控制台
  • 跟踪
  • 检查 HTML 元素和动态编辑 HTML 代码
  • 动态编辑 CSS 文档

YSlow

YSlow（参见 参考资料 ）分析网页，并根据 Yahoo! 起草的高性能网站规则（参见 参考 ），告诉您网页加载缓慢的原因。YSlow 是一个与 Firebug 集成的 Firefox 插件，因此您需要首先安装 Firebug，然后才能安装和使用 YSlow。

安装 Firebug

两个 Firefox 扩展的安装过程都非常简单。要安装 Firebug，执行以下步骤：

  1. 打开 Firefox，转到 Firebug 主页 。
  2. 安装最新版的 Firebug。
  3. 如果 Firefox 配置为阻止弹出窗口，单击 Allow 允许打开安装窗口。否则，单击 Install Now 。
  4. 重启 Firefox。

您现在可以从 Tools 菜单访问 Firebug。可以在新窗口或现有窗口中打开 Firebug（参见 图 1 ）。


图 1. Firefox 起始页的 Firebug HTML 和 Style 视图




回页首


安装 YSlow

安装 Firebug 之后，接下来安装 YSlow。为此，执行以下步骤：

  1. 打开 Firefox，然后转到 YSlow 主页 。
  2. 安装插件，然后重启 Firefox。

    注意： 与许多其他 Firefox 扩展不同，YSlow 不会自动启动。必须首先激活它。

  3. 要激活 YSlow，在状态栏右键单击其图标，然后单击 Autorun 。

图 2 显示了 YSlow 性能分析的结果。


图 2. Firefox 起始页的 YSlow 性能分析




回页首


常识：牢记设计规则

令人惊讶的是简单的设计规则通常会被忽视，最终产生未经优化的、下载缓慢的网页。牢记以下规则，页面的加载速度将会更快。

使用良好的结构

可扩展 HTML (XHTML) 具有许多优势，但是其缺点也很明显。XHTML 可能使您的页面更加符合标准，但是它大量使用标记（强制性的 和 标记），这意味着浏览器要下载更多代码。所以，事情都有两面性，尝试在您的网页中使用较少的 XHTML 代码，以减小页面大小。

如果您确实不得不使用 XHTML，试着尽可能对它进行优化。例如，删除空格并采用严格的 XHTML 编码实践，提高下载和解析速度。要严格执行 XHTML Strict 规则，向文档中添加以下 doctype 语句： 


    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

 

XHTML 1.0 Strict 与 Strict HTML 4.01 是等效的，包含的属性和元素没有出现在 HTML 4.01 规范的反对内容中。记住，有两个标记能够在 XHTML Transitional 中使用，但不能在 XHTML Strict 中使用，例如：