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

13、尽可能延迟脚本加载

一种提升页面下载速度的潜在方式是将脚本放在页面的底部，使页面加载更迅速。

通常，浏览器只能（从同一个域）下载不超过两个并行对象，如果一个对象是一段 JavaScript 代码，那么在该脚本下载完之前，其他页面组件的下载将会暂停。

如果将 JavaScript 代码放在页面底部，（在大多数情况下）它将在最后下载，这时所有其他组件都已下载完。

14、按需加载 JavaScript 文件

要按需加载 JavaScript，使用 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);
}

15、验证函数加载

也可以验证一个函数是否被加载，如果没有，加载 JavaScript 文件。

验证函数是否被加载：

if (myfunction){
  // The function has been loaded
}
else{ // Function has not been loaded yet, so load the javascript.
  $import('');
}

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

16、优化 CSS 文件

DIV+CSS是现在流利的网页布局方式，DIV定义了元素，CSS控制显示效果，所以往往我们会把CSS写到另外一个或多个外部链接CSS文件中，并且CSS文件代码也有很多行，我们可以使用一些CSS压缩工具来删除CSS文件中不必要的多余内容，如重复定义样式、空格等来瘦身。

据马海祥的经验来说，如果经过适当优化和维护，CSS 文件不一定很大。例如，具有很多独立类的 CSS 文件会影响下载速度，与 JavaScript 文件一样，您需要优化 CSS 文件，使其包含所需的所有内容，同时保持合理的大小（更多的技巧可查看马海祥博客《网站CSS代码优化的7个原则》的相关介绍）。

另外，使用外部文件代替内联定义来适应浏览器的缓存机制。

17、使用内容分布网络

内容分布网络（Content-distribution network，CDN）是另一种缩短下载时间的好方法，当您将静态图像放在 Internet 上的许多服务器上时，用户能够从离他们最近的服务器下载这些图像。

此外，大多数 CDN 都在快速服务器上运行，因此无论服务器的加载速度如何，其响应速度都比小型的超载服务器快。

18、对资产使用多个域来增加连接

CDN 的另一个优势是它们是独立的域，因为您的浏览器将并发连接的数量限制到一个单一的域，因此无论何时加载一个页面，都很容易占满所有线程。因此，到其他资产的连接被延迟了。

然而，您的浏览器能够打开新线程或到其他域的连接，这样，从另一个域加载的任何资产都可以与其他所有资产同时加载。

19、在合适的时候使用 Google Gears

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

20、使用 PNG 格式的图像

Graphic Interchange Format (GIF) 和 Joint Photographic Experts Group (JPEG) 图像格式都已过时了：Portable Network Graphic (PNG) 是未来流行的格式。当然，您可以说 GIF 和 JPEG 已经消亡，或者 PNG 没有任何缺陷，但是所有事物都有各自的优缺点，PNG以最佳的文件大小提供了出色的质量，因此，如果进行选择的话，应该尽可能使用 PNG 图像（想用其他格式的站长，可查看马海祥博客《JPG、PNG和GIF图片的基本原理及优化方法》的相关介绍）。

21、保持 Ajax 调用简短、准确

当统称为 Asynchronous JavaScript + XML (Ajax) 的技术在两年前出现时，这些技术为处理页面请求和响应提供了一种革命性方法。

然而，拨号用户可能从来没机会体验其真正的优势，因为在许多情形下，Ajax 需要在浏览器与服务器之间大量通信，因此，如果您能够保持 Ajax 调用简短和准确，可以避免用户花费无止尽的时间来等待元素刷新或响应。

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

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

23、在沙箱中测试代码

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

如果您添加一项新功能，可以首先在沙箱里（完全脱离了应用程序的其余部分）进行测试，查看它作为单个函数的行为。通过这种方式，您可以反复检查，并分析性能和响应时间，无需考虑 Web 应用程序的其余部分。

然后，当新功能的行为符合预期时，可以将其引入到应用程序的其余部分中，运行其他测试，保证功能本身的行为符合预期。

24、分析站点代码