“我觉得需要……需要速度！” 皮特中尉“特立独行”米切尔在壮志凌云

很容易说我们想要一个表现好的网站。说我们已经做出了改变，并坚持认为我们的网站现在“更快”也同样容易。真正的问题是你如何测量性能的提高。要表明你改进了什么，你首先需要能够衡量它。对于桌面应用程序，有几种方法可以做到这一点，但对于移动设备就没有那么多了。但是，有几个选项可以很好地测量移动设备的性能。

一个很棒的工具是很多网络开发者都很熟悉的:YSlow。除了可以作为浏览器扩展添加的普通桌面版本之外，还有一个可用的移动版本。本版本位于http://developer.yahoo.com/yslow/mobile。这个网址会把你重定向到一个很长的网址，最后有很多 JavaScript。要将 YSlow 用于 Mobile，您必须首先从这个结果 URL 创建一个书签，如下所示:

      http://yslow.org/mobile/#javascript:(function(y,p,o){p=y.body.append...

创建书签后，编辑它并删除“#”符号之前的所有内容，以便您的书签实际上是一段 JavaScript 代码，而不是通常称为书签小程序的 URL。一旦你有了书签，返回并加载你的网站，点击书签，然后你会看到 YSlow 应用程序出现在你屏幕的下半部分。它会重新加载网站并为你分析，给你一个 0 到 100 之间的分数，以及你的整个网站和每个区域的字母等级。

有时候你对它暗示的东西无能为力。当分析一个 MVC 站点时，它会建议缩小的 JavaScript 和 CSS 也应该被 gzip 压缩，但是这个选项在 MVC 4 RC 包中是不可用的。当你查看网站的每个区域时，这个工具会给你建议如何提高你在那个区域的分数。

一个非常简单的方法是在脚本、样式表和图像上启用内容缓存，这样可以大大加快网站的速度。要做到这一点，您只需要将这个非常简单的 Web.config 包含在内容和脚本文件夹中:

      <?xml version="1.0" encoding="UTF-8"?>
      <configuration>
        <system.webServer>
          <staticContent>
            <clientCache cacheControlMode="UseMaxAge"
              cacheControlMaxAge="30.00:00:00" />
          </staticContent>
        </system.webServer>
      </configuration>

请注意，这是您的子文件夹中的 Web.config，而不是站点根目录中的 Web.config！

您可能认为不需要这样做，因为您的浏览器会自动为您缓存图像和其他内容文件。但是，如果您使用 Fiddler 这样的工具查看幕后，您会发现即使您的浏览器缓存中有一个文件，对于页面上的每个文件，浏览器都会向服务器进行 HTTP 查询，以查看浏览器缓存中的文件是否比服务器上的文件旧。

此 Web.config 设置将自动对从该文件夹下载的所有内容设置 30 天的内容到期日期。下一次客户端浏览器从该文件夹请求这些图像、脚本或两者时，它将看到缓存中有该文件，并且到期日期尚未过去，因此它不会访问服务器来检查是否需要该文件。尽管这是一个很小的请求，但是您已经为缓存页面上的每个图像消除了到服务器的一次往返。说说轻松升级吧！

这种方法有一个小缺点，你必须意识到。如果您想更改该文件夹中的脚本、样式表或图像，您有一个小问题。在接下来的三十天里，任何已经在缓存中保存了您的脚本或图像的客户端都不会费心检查您的服务器来查看文件是否已经更改。三十天后，它会再次检查，你的网站会更新。

幸运的是，有一个简单的解决方案:当您更改文件时，您还必须更改文件的名称。如果您更改名为站点的样式表。Mobile.css ，做一个全局搜索，替换为网站。Mobile2.css 。新文件名不在客户端的缓存中，因此它将从服务器中获取。

另一种可以轻松提高网站性能的方法是使用内容交付网络(CDN)为您分散负载。即使您从站点提供的 CDN 中提取完全相同的文件，CDN 也会显著提高站点的性能。秘密在于浏览器如何检索文件。大多数浏览器会从任何给定的域下载多达六个并发文件。当您从域中请求第七个资源时，它将排队等待，直到前六个资源中的一个完成。如果你从 CDN 下载一些文件，你会得到另外六个可以同时使用的下载流。

另一个很大的好处是，这些文件是从其他网站缓存在你的浏览器缓存中的，所以很有可能它们已经在那里了，你甚至不需要下载它们。

你可能认为你没有权限访问，但你有。您可以轻松地为项目中包含的共享文件使用 CDN。以下是一些例子:

      <link
      href="http://code.jquery.com/mobile/1.1.0/jQueryMobile-1.1.0.min.css" rel="stylesheet" />
      <link
      href="http://code.jquery.com/mobile/1.1.0/jQueryMobile.structure-1.1.0.min.css" rel="stylesheet" />

      <script
      src="http://code.jquery.com/mobile/1.1.0/jQueryMobile-1.1.0.min.js" type="text/javascript"></script>
      <script src="http://code.jquery.com/jquery-1.6.4.min.js"
      type="text/javascript"></script>
      <script
      src="http://ajax.aspnetcdn.com/ajax/mvc/3.0/jquery.unobtrusive-ajax.min.js" type="text/javascript"></script>
      <script src="http://ajax.microsoft.com/ajax/jQuery.Validate/1.6/jQuery.Validate.min.js" type="text/javascript"></script>
      <script src="http://ajax.aspnetcdn.com/ajax/mvc/3.0/jquery.validate.unobtrusive.min.js" type="text/javascript"></script>

如果您正在使用 MVC 4 的捆绑功能，这可能适用于您，也可能不适用于您，但它值得一看，至少对于没有捆绑和缩小的图像是如此。

在您知道将会使用的链接上(比如指向图库中下一张图片的链接)，您可以添加一个额外的标签，这会导致 jQuery。手机预加载内容:

      <a href="mypage" data-prefetch>Load Page</a>

data-prefetch标签提示 jQuery。一旦当前页面被加载，Mobile 将继续前进并获取下一页，这样当您实际单击链接时，文档将几乎立即加载，因为页面已经在缓存中。

以类似的方式，jQueryMobile 在加载页面时会将其加载到 DOM 中的内存中，然后在超出范围时移除该页面，从而在任何给定时间将这三个页面保留在内存中。如果你想确保你的页面保留在内存中，你可以在页面元素上添加一个data-dom-cache="true"，它不会被卸载，所以加载会更快。

如果你想自己管理页面负载和内存，这两个技巧都有很大的潜在缺点，所以如果你打算使用这些技巧，你会希望确保它很重要。