25种提高 页加载速度的方法和技巧

复制代码 代码如下:
read this!
This will cost you some valuable load time

留意细节似乎无关紧要。但是当您优化文件时，所有细微的细节都应考虑在内。

设置图像大小
与表格单元格、行和列一样，当您未明确设置图像大小时，浏览器需要执行计算来显示图像，这会降低处理速度。此外，在某些情形下，图像大小的计算结果可能不正确，因此图像会发生变形。

将 CSS 图像映射用于装饰功能

使用图像映射代替多个图像，这是另一种缩短加载时间的方式，因为同时下载图像的各个独立部分能够加快整个页面的下载进度。或者，您可以使用某种名为 CSS sprites 的工具（参见 参考资料）。CSS sprites 可帮助减少 HTTP 请求的数量。一个图像可以包含装饰或布置页面所需的所有图像元素。您使用 CSS 来选择（通过调用某些位置和维度）用于特定元素的映射。

尽可能延迟脚本加载

我 在前面 提到过，移除完全不需要的 JavaScript 代码能够加快加载和处理速度。但是如果代码已经非常精简并且必须在页面中包含 JavaScript 代码的话，该怎么办/p>

在这种情形下，一种提升页面下载速度的潜在方式是将脚本放在页面的底部，使页面加载更迅速。通常，浏览器只能（从同一个域）下载不超过两个并行对 象，如果一个对象是一段 JavaScript 代码，那么在该脚本下载完之前，其他页面组件的下载将会暂停。如果将 JavaScript 代码放在页面底部，（在大多数情况下）它将在最后下载，这时所有其他组件都已下载完。

使用 Firebug 扩展跟踪加载缓慢的文件，我敢打赌您的 JavaScript 文件是下载最慢的文件。压缩 JavaScript 文件会有所帮助，但是仅仅这样可能还不够。您可以使用以下代码片段延迟 JavaScript 的加载：

复制代码 代码如下:
var delay = 5; 
setTimeout(“heavy();”, delay * 1000);

这段代码将对 heavy() 方法的调用延迟了 5 秒。您可以将这段代码与下面的技巧结合使用来延迟整个 JavaScript 文件的加载。 

按需加载 JavaScript 文件 
要按需加载 JavaScript，使用 import() 函数，如 清单 3 所示。 

清单 3. import() 函数

复制代码 代码如下:
function $import(src){
var scriptElem = document.createElement(‘script’);
scriptElem.setAttribute(‘src’,src);
scriptElem.setAttribute(‘type’,’text/javascript’);
document.getElementsByTagName(‘head’)[0].appendChild(scriptElem);
}

// import with a random query parameter to avoid caching
function $importNoCache(src){
var ms = new Date().getTime().toString();
var seed = ” + ms; 
$import(src + seed);
}

验证函数加载
也可以验证一个函数是否被加载，如果没有，加载 JavaScript 文件。为此，使用 清单 4 中的代码。

清单 4. 验证函数是否被加载

复制代码 代码如下:
if (myfunction){
// The function has been loaded
}
else{ // Function has not been loaded yet, so load the javascript.
$import(‘http://www.yourfastsite.com/myfile.js’);
}

注意：可以使用 defer 属性，但不是所有浏览器（包括 Firefox）都支持它。

优化 CSS 文件
如果经过适当优化和维护，CSS 文件不一定很大。例如，具有很多独立类的 CSS 文件会影响下载速度。与 JavaScript 文件一样，您需要优化 CSS 文件，使其包含所需的所有内容，同时保持合理的大小。另外，使用外部文件代替内联定义来适应浏览器的缓存机制。

使用内容分布 络
内容分布 络（Content-distribution network，CDN）是另一种缩短下载时间的好方法。当您将静态图像放在 Internet 上的许多服务器上时，用户能够从离他们最近的服务器下载这些图像。此外，大多数 CDN 都在快速服务器上运行，因此无论服务器的加载速度如何，其响应速度都比小型的超载服务器快。

对资产使用多个域来增加连接
CDN 的另一个优势是它们是独立的域。因为您的浏览器将并发连接的数量限制到一个单一的域，因此无论何时加载一个页面，都很容易占满所有线程。因此，到其他资产 的连接被延迟了。然而，您的浏览器能够打开新线程或到其他域的连接，这样，从另一个域加载的任何资产都可以与其他所有资产同时加载。

在合适的时候使用 Google Gears

使用 Google Gears（参见 参考资料） 是避免用户反复下载同一内容的另一种好方法。Gears 允许用户离线访问 Web 应用程序，但是也允许将页面元素持久化到用户的计算机上。因此，频繁加载但未进行更新的内容可以存储在 Gears 数据库中，该数据库是一个 SQLite3 关系数据库管理系统。对同一内容的所有  请求都可以从数据库（而不是服务器）直接加载。

安装 Gears 之后，获取 gears_init.js 文件，以便轻松访问 Gears 工厂和应用程序编程接口（API），将其保存为 gears_init.js，通过以下方式在您的代码中引用它：

复制代码 代码如下:

要确定是否已安装 Gears，使用 清单 5 中的代码。

清单 5. 确定是否已安装 Gears

复制代码 代码如下:

如果未安装 Gears，代码将向您提供下载 Gears 的 URL。

当所有元素都通过验证并且 Gears 已安装之后，您可以测试 Gears 的极其有用的数据库功能，使用 清单 6 中的 JavaScript 代码。

清单 6. 测试数据库功能

复制代码 代码如下:

这段代码在您的计算机或服务器上创建一个本地数据库 db。如果表 Test 不存在，则创建一个，然后插入测试数据（Monkey! 和时间）。代码从数据库获取数据，并在浏览器中以警告的形式呈现出来。

想像一下可能发生的结果！

使用 PNG 格式的图像
Graphic Interchange Format (GIF) 和 Joint Photographic Experts Group (JPEG) 图像格式都已过时了：Portable Network Graphic (PNG) 是未来流行的格式。当然，您可以说 GIF 和 JPEG 已经消亡，或者 PNG 没有任何缺陷，但是所有事物都有各自的优缺点，PNG 以最佳的文件大小提供了出色的质量。因此，如果进行选择的话，应该尽可能使用 PNG 图像。

保持 Ajax 调用简短、准确
当统称为 Asynchronous JavaScript + XML (Ajax) 的技术在两年前出现时，这些技术为处理页面请求和响应提供了一种革命性方法。然而，拨 用户可能从来没机会体验其真正的优势，因为在许多情形下，Ajax 需要在浏览器与服务器之间大量通信。因此，如果您能够保持 Ajax 调用简短和准确，可以避免用户花费无止尽的时间来等待元素刷新或响应。

进行一次较大的 Ajax 调用并在本地处理客户机数据

如果不能进行简短的 Ajax 调用，或者如果这些调用不能提供期望的结果，可以考虑一种替代方法：进行一次大的 Ajax 调用来获取所需的一切内容，然后让客户机在本地处理数据。通过这种方式，客户机只需等待一次（获取传入的数据），但是在此之后（当浏览器与服务器之间没有 必要通信时），处理速度将更快。当然，还有大量 Ajax 优化技术，本教程无法一一列出。如果想要了解关于 Ajax 的更多信息，请查看 参考资料。

在沙箱中测试代码 
还有一个经常被遗忘的常用技巧。尽管清醒的 Web 开发人员通常会在启动应用程序之前对其进行测试，但是有时候测试会使他们不那么重视维护任务，或者新功能添加得太快，并且未经过充分考虑或测试。结果，余下的脚本减缓了应用程序的速度。 

如 果您添加一项新功能，可以首先在沙箱里（完全脱离了应用程序的其余部分）进行测试，查看它作为单个函数的行为。通过这种方式，您可以反复检查，并分析性能 和响应时间，无需考虑 Web 应用程序的其余部分。然后，当新功能的行为符合预期时，可以将其引入到应用程序的其余部分中，运行其他测试，保证功能本身的行为符合预期。 

分析站点代码

在许多场景中，自我反省是一个不错的建议。幸运的是，在开发过程中，我们可以使用工具来帮助反省，并尽可能客观地进行实践。像 JSLint（参见 参考资源）这样的工具的价值是无法衡量的，尽管其站点宣称它 “可能令您备受挫折”，因为它向您提供了所有的潜在代码缺陷，这些缺陷不但使调试更加困难，而且可能导致更长的响应时间。

使用 JSLint 检查 JavaScript 代码中的错误或糟糕的编码实践

您不需要像完美主义者那样追求完美无缺的 JavaScript 代码。但是，许多开发人员没有认真对待代码分析，通常在开发过程中跳过了这个步骤。不幸的是，错误和糟糕的编码实践不仅不太专业，而且可能减缓应用程序的 速度。当浏览器忙于应付错误和糟糕的编码实践时，加载不仅需要更多时间，还会导致难以调试的错误。

因此，如果想要获得良好的代码，可以考虑使用代码分析工具。有许多不同的工具可供使用，但是最适合 JavaScript 语言的工具非 JavaScript Lint 莫属，它也叫做 JSLint（参见 参考资料）。也可以使用 Firebug，但是 JSLint 更加正式，它包含在 YSlow 中。

检查孤立的文件和丢失的图像 
检查孤立的文件和丢失的图像是一种明智之举。大部分 Web 开发人员都会检查错误的文件引用，但是这里仍然需要说明一下。丢失的文件容易引起各种问题，因为它们会导致 “The image/page cannot be displayed” 之类的错误消息。但是在 页速度优化方面，它们具有更大的缺陷：当浏览器寻找丢失的或孤立的文件时，它会消耗资源，这不可避免地会导致页面处理速度变慢。 因此，请检查孤立或丢失的文件，包括拼写错误的文件名。 

YSlow 扩展 
YSlow Firebug 扩展使主观的 页分析日渐被淘汰。YSlow 使用 Yahoo! 起草的面向高性能 站的权威规则，分析 页并告诉您它们变慢的原因。 

使用 YSlow 分析 页 
YSlow 是一个相对较小但非常有用的 Firefox 扩展。当启动 YSlow 时，该扩展在浏览器的下半部分中打开，如 图 4 所示。 

图 4. Firefox 中的 YSlow 扩展

从 Stats 视图的名称可以猜测到，它（如 图 6 所示）显示与当前页面有关的统计数据。这些数据包括空的和主要的缓存和 cookie。 

图 6. Firefox 中的 YSlow Stats 视图 

YSlow 是一个较小的、有用的扩展，可以在提高页面加载速度方面为您提供许多帮助。如果您以前未使用过它，那么现在应该使用了。 

文章知识点与官方知识档案匹配，可进一步学习相关知识MySQL入门技能树数据库组成表32049 人正在系统学习中 相关资源：软件测试管理中软件项目需求分析总结_需求分析小结-其它代码类…