Posts Tagged "提升网页速度"

20 种提升网页速度的技巧(转载收藏)

八月 13th, 2009 Charlie

引言

不是所有人都能够使用高速 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 视图
firebuginstalled



回页首

安装 YSlow

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

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

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

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

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

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



回页首

常识：牢记设计规则

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

使用良好的结构

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

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

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
    "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 中使用，例如：

  • <center>
  • <font>
  • <iframe>
  • <strike>
  • <u>

回页首

不要使布局超载

在博客（和新的站点）流行起来之前，让页面水平滚动甚至垂直滚动被认为是糟糕的实践。页面越小，越难以（但并不是不可能）完好地填充屏幕。现在，对于博客和内容驱动的网站，不时可以看到几百 Kb 大小的长页面。是的，您需要填充更多空间，但是这并不意味着您必须使用大的背景图像、大量表格或者许多内容来填充。坚持简约原则：少即是多。页面中充斥着各种类型的图像、视频、广告等，这大大违背实用性原则，因此，在增加页面的内容时请三思。

不要使用图像来表示文本

我们很少会控制字体在不同浏览器中的显示方式，与字体不同的是，图像总是精确地按照其设计方式来显示。但这不能当作使用图像来表示文本的借口。

使用图像表示文本的最常见示例就是在导航栏中。美观的按钮更加具有吸引力，但是它们的加载速度很慢。此外，图像仍然不能由搜索引擎直接索引，因此，使用图像进行导航不利于搜索引擎优化（search engine optimization，SEO）。当无需图像就可以通过大量 CSS 技巧创建漂亮的按钮时，绝不使用图像来表示文本。

一种适用于 CSS 样式的特定导航类型就是选项卡式导航，如 图 3 所示。

图 3. 选项卡式导航

tabs

除了体积较小之外，这种实现导航的方式也更加符合 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-position:100% -42px;
	  }

清单 2. 基于选项卡导航的 HTML 代码

<div id="nav">
  <ul>
    <li><a href="#" title="Link 1"><span>Link 1</span></a></li>
    <li><a href="#" title="Link 2"><span>Link 2</span></a></li>
    <li><a href="#" title="Link 3"><span>Link 3</span></a></li>
    <li><a href="#" title="Longer Link Text"><span>Longer Link Text</span></a></li>
    <li><a href="#" title="Link 5"><span>Link 5</span></a></li>
  </ul>
</div>

回页首

检查 cookie 使用情况

cookie 可能是很小的文件，但是浏览器仍然需要下载它们。较大的 cookie 所需的下载时间更长，进而增加了浏览器加载网页的时间。正因为如此，尽可能缩小 cookie 来最小化对浏览器响应时间的影响非常重要。

此外，设置一个较早的 expire 日期或者根本不设置 expire 日期，会缩短响应时间。要在 PHP 语言中设置 cookie 的 expire 日期，使用以下代码： 

<?php
 $expire = 2592000 + time();
 // Add 30 day’s to the current time
 setcookie(userid, “123rrw3”, $expire);
?>

这段代码设置 cookie userid，并将 expire 日期设置为自当前日期之后 30 天。

回页首

不要包含不必要的 JavaScript 代码，尽可能将其外部化

与 cookie 类似，JavaScript 文件的下载也需要时间，这不可避免地会降低整个页面的加载速度。因此，明智地使用 JavaScript（仅在真%

 

Posted in Web 2.0
Tags:
Comments Closed