先决条件
在理想情况下，您应该安装了 Mozilla Firefox。您还应该大体了解 Web 开发。本文涉及的主题并不复杂，但是如果您了解超文本标记语言（Hypertext Markup Language，HTML）、层叠样式表（Cascading Style Sheet，CSS）以及 ? 编程语言等主题，那么在学习本文时将更加得心应手。不需要使用集成开发环境（IDE），只需使用您喜爱的编辑器。
您必须在浏览器中启用了 javacript：：。另外，要学习与 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 开发人员的工作更加轻松。它包含许多非常有用的功能，比如：
- javacript：： 调试
- javacript：： 命令行
- 监视 javacript：： 性能和跟踪
XmlHttpRequests
- 登录 Firebug 控制台
- 跟踪
- 检查 HTML 元素和动态编辑 HTML 代码
- 动态编辑 CSS 文档
YSlow
YSlow（参见 参考资料）分析网页，并根据 Yahoo! 起草的高性能网站规则（参见 参考），告诉您网页加载缓慢的原因。YSlow 是一个与 Firebug 集成的 Firefox 插件，因此您需要首先安装 Firebug，然后才能安装和使用 YSlow。
安装 Firebug
两个 Firefox 扩展的安装过程都非常简单。要安装 Firebug，执行以下步骤：
- 打开 Firefox，转到 Firebug 主页。
- 安装最新版的 Firebug。
- 如果 Firefox 配置为阻止弹出窗口，单击 Allow 允许打开安装窗口。否则，单击 Install Now。
- 重启 Firefox。
您现在可以从 Tools 菜单访问 Firebug。可以在新窗口或现有窗口中打开 Firebug（参见 图 1）。
图 1. Firefox 起始页的 Firebug HTML 和 Style 视图
安装 YSlow
安装 Firebug 之后，接下来安装 YSlow。为此，执行以下步骤：
- 打开 Firefox，然后转到 YSlow 主页。
- 安装插件，然后重启 Firefox。
注意：与许多其他 Firefox 扩展不同，YSlow 不会自动启动。必须首先激活它。
- 要激活 YSlow，在状态栏右键单击其图标，然后单击 Autorun。
图 2 显示了 YSlow 性能分析的结果。
图 2. Firefox 起始页的 YSlow 性能分析
常识：牢记设计规则
令人惊讶的是简单的设计规则通常会被忽视，最终产生未经优化的、下载缓慢的网页。牢记以下规则，页面的加载速度将会更快。
使用良好的结构
可扩展 HTML (XHTML) 具有许多优势，但是其缺点也很明显。XHTML 可能使您的页面更加符合标准，但是它大量使用标记（强制性的
如果您确实不得不使用 XHTML，试着尽可能对它进行优化。例如，删除空格并采用严格的 XHTML 编码实践，提高下载和解析速度。要严格执行 XHTML cript： 规则，向文档中添加以下 doctype 语句：
XHTML 1.0 cript： 与 cript： HTML 4.01 是等效的，包含的属性
和元素没有出现在 HTML 4.01 规范的反对内容中。记住，有两个标记能够在 XHTML Transitional 中使用，但不能在 XHTML cript： 中使用，例如：
不要使布局超载
在博客（和新的站点）流行起来之前，让页面水平滚动甚至垂直滚动被认为是糟糕的实践。页面越小，越难以（但并不是不可能）完好地填充屏幕。现在，对于博客和内容驱动的网站，不时可以看到几百 Kb 大小的长页面。是的，您需要填充更多空间，但是这并不意味着您必须使用大的背景图像、大量表格或者许多内容来填充。坚持简约原则：少即是多。页面中充斥着各种类型的图像、视频、广告等，这大大违背实用性原则，因此，在增加页面的内容时请三思。
不要使用图像来表示文本
我们很少会控制字体在不同浏览器中的显示方式，与字体不同的是，图像总是精确地按照其设计方式来显示。但这不能当作使用图像来表示文本的借口。
使用图像表示文本的最常见示例就是在导航栏中。美观的按钮更加具有吸引力，但是它们的加载速度很慢。此外，图像仍然不能由搜索引擎直接索引，因此，使用图像进行导航不利于搜索引擎优化（search engine optimization，SEO）。当无需图像就可以通过大量 CSS 技巧创建漂亮的按钮时，绝不使用图像来表示文本。
一种适用于 CSS 样式的特定导航类型就是选项卡式导航，如 图 3 所示。
图 3. 选项卡式导航
除了体积较小之外，这种实现导航的方式也更加符合 Web 标准。
|
|
遵循统称为 Web 标准 的一组最佳实践的网站具有精简性、可访问性、搜索引擎友好性、适用性和基于 CSS 的特征。 | |
清单 1 和 清单 2 中的代码以纯 CSS/XHTML 的形式实现基于选项卡的导航功能。
清单 1. 基于选项卡导航的 CSS 文档
#nav {
float:left;
width:100%;
background:#E7E5E2;
font-size:95%;
line-height:normal;
border-bottom:1px solid #54545C;
}
#nav ul {
margin:0;
padding:10px 10px 0 50px;
list-style:none;
}
#nav li {
display:inline;
margin:0;
padding:0;
}
#nav a {
float:left;
background:url("tableftK.gif") no-repeat left top;
margin:0;
padding:0 0 0 4px;
text-decoration:none;
}
#nav a span {
float:left;
display:block;
background:url("tabrightK.gif") no-repeat right top;
padding:5px 15px 4px 6px;
color:#FFF;
}
/* Commented Backslash Hack hides rule from IE5-Mac \*/
#nav a span {float:none;}
/* End IE5-Mac hack */
#nav a:hover span {
color:#FFF;
background-position：:100% -42px;
}
#nav a:hover {
background-position：:0% -42px;
}
#nav a:hover span {
background |
