20种提升网页速度的方法
引言
不是所有人都能够使用高速 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) 报告将宽带
幸运的是,这些可怜的人们现在已经能够获得一些帮助。您可以通过缩短加载页面的时间来改善他们的体验。但是,拨号连 接并不是降低加载和响应速度的惟一原因。许多 Web 设计人员错误地认为高速 Internet 连接的到来会使网站性能优化变得没有必要。这种观点是不对的。例如,过去使用桌面软件执行的许多任务现在可以在线执行。在 Web 应用程序中获得像桌面软件那样的高速响应体验非常困难,因此性能优化非常重要。幸运的是,一些工具和最佳实践可用于缩短响应和加载时间,提供更加流畅的体 验。
根据 Birds-Eye 的 2007 宽带统计显示,美国境内 25% 的人没有 Internet 连接,53% 的人拥有宽带,21% 的人仍然在使用拨号连接。
基本工具
对于所有与优化相关的任务,您必须使用工具来诊断瓶颈和识别问题。现在在 Web 开发中使用最广泛的两个工具是 Firebug 和 YSlow,它们都是开源、免费的 Firefox 插件。
Firebug
Firebug(参见
- JavaScript 调试
- JavaScript 命令行
- 监视 JavaScript 性能和跟踪
XmlHttpRequests - 登录 Firebug 控制台
- 跟踪
- 检查 HTML 元素和动态编辑 HTML 代码
- 动态编辑 CSS 文档
YSlow
YSlow(参见
安装 Firebug
两个 Firefox 扩展的安装过程都非常简单。要安装 Firebug,执行以下步骤:
- 打开 Firefox,转到
Firebug 主页 。 - 安装最新版的 Firebug。
- 如果 Firefox 配置为阻止弹出窗口,单击
Allow 允许打开安装窗口。否则,单击 Install Now 。 - 重启 Firefox。
您现在可以从 Tools 菜单访问 Firebug。可以在新窗口或现有窗口中打开 Firebug(参见
图 1. Firefox 起始页的 Firebug HTML 和 Style 视图

回页首
安装 YSlow
安装 Firebug 之后,接下来安装 YSlow。为此,执行以下步骤:
- 打开 Firefox,然后转到
YSlow 主页 。 - 安装插件,然后重启 Firefox。
注意:
与许多其他 Firefox 扩展不同,YSlow 不会自动启动。必须首先激活它。 - 要激活 YSlow,在状态栏右键单击其图标,然后单击
Autorun 。
图 2
图 2. Firefox 起始页的 YSlow 性能分析

回页首
常识:牢记设计规则
令人惊讶的是简单的设计规则通常会被忽视,最终产生未经优化的、下载缓慢的网页。牢记以下规则,页面的加载速度将会更快。
使用良好的结构
可扩展 HTML (XHTML) 具有许多优势,但是其缺点也很明显。XHTML 可能使您的页面更加符合标准,但是它大量使用标记(强制性的
如果您确实不得不使用 XHTML,试着尽可能对它进行优化。例如,删除空格并采用严格的 XHTML 编码实践,提高下载和解析速度。要严格执行 XHTML Strict 规则,向文档中添加以下 doctype
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> |
本文来自互联网用户投稿,文章观点仅代表作者本人,不代表本站立场,不承担相关法律责任。如若转载,请注明出处。 如若内容造成侵权/违法违规/事实不符,请点击【内容举报】进行投诉反馈!
