简介
快速的 Web 应用才是成功的 Web 应用。作为开发者，您只有同时优化应用的实际性能和用户体验，才能完成工作。这不仅仅是确保用户获得出色体验的正确做法，还有一些非常实用且重要的业务原因需要您进行优化。Amazon 测量发现，每增加 100 毫秒的网站延迟时间，销售额就会下降 1%；Google 测量发现，每增加 0.5 秒的延迟时间，流量就会下降 20%（参考文献）。这些数据是真实的，对您的业务和 Web 应用有实际意义。
网页速度非常重要，Google 甚至专门投入了大量精力来提高网页速度。如果您还需要其他理由来优化应用性能，不妨了解 Google 宣布已将网页速度纳入其排名算法。
有很多已发布的最佳实践可用于优化 Web 应用的性能，其中包括两本优秀的图书（高性能网站和更快的网站）。将服务器端（实现正确的缓存控制标头）和客户端（提供图片宽度和高度属性）的技术组合到端到端策略中，以优化性能。有这么多提示和技巧，有时很难评估它们在实际应用和真实 Web 应用中的适用性。
幸运的是，Chrome 开发者工具（包含在每个 Chrome 实例中）是一款出色的工具，可检查您的 Web 应用并提供量身定制的建议，以提升性能并缩短延迟时间。本文将介绍与广受欢迎的 YSlow 工具范围相似的“审核”面板，以及如何使用该面板加快网站速度、缩短延迟时间并提高用户满意度。
请注意，审核面板工具目前仅适用于 Chrome，但我们预计其他 WebKit 浏览器最终也会集成该工具。
使用入门
为了说明“审核”面板如何提供 Web 应用性能改进建议，我们将使用该工具对我们自己的 www.html5rocks.com 进行评估，以便利用审核面板来帮助我们网站更快地加载。
启动 DevTools 非常简单，只需使用 Chrome 图标（Chrome 窗口右上角）并依次选择“工具”>“开发者工具”即可。
如需详细了解如何开始使用 DevTools，请参阅官方文档。
“审核”面板位于主要工具按钮面板中。您会发现，选择该选项后，“审核”面板尚未完成对您的 Web 应用的分析。运行所有启发词语可能很慢，对于 Gmail 等大型 Web 应用尤其如此，因此该工具默认处于停用状态。
点击“Run”按钮，以便在启用性能启发词语的情况下重新加载 Web 应用，深入了解相关内容。页面重新加载后，您会看到一个推荐列表，类似于以下屏幕截图。
您会发现，“审核”面板会按严重程度对建议进行分类，最严重的建议会标记为红点，中度严重的建议会标记为黄点。这种颜色编码有助于您确定建议的优先级，先着重考虑最重要的建议（以及能带来最大的收益）。
建议后面的括号中的数字是审核工具检测到的违规实例数。例如，“利用浏览器缓存”有 12 个实例。这样，您就可以了解建议的应用频率。
速度策略
如前所述，有很多众所周知且经过大量测试的策略可用于优化 Web 应用性能。本文不会详细介绍所有这些功能，但您可以轻松找到更多信息和详细信息。如需详细了解 Web 应用优化的具体内容，请参阅“让网络变得更快捷”教程和高可伸缩性的延迟无处不在，会导致您失去销售机会。
“审核”面板会将建议分为两类：“网络利用率”和“网页性能”。
根据“审核”面板，为了提高网络利用率，我们应：
- 利用浏览器缓存
- 利用代理缓存
- 尽可能减小 Cookie 大小
- 从无 Cookie 的网域传送静态内容
- 指定图片尺寸
为了提升网页性能，我们应：
- 优化样式和脚本的顺序
- 移除未使用的 CSS 规则
我们来看看可以重点关注的提升 htmlrocks.com 性能的策略之一。
使用浏览器缓存
例如，我们先来详细了解有关利用浏览器缓存的建议。这具体意味着什么？在界面中打开该选项后，我们会看到以下详细信息：
- 以下资源缺少缓存过期时间。浏览器可能不会缓存未指定到期时间的资源。
- 以下可缓存资源的有效期较短。
- 以下资源明确不可缓存。请考虑尽可能将其设为可缓存。
缓存资源是一种非常有效的提高网络利用率的方法，可降低开发者的带宽费用并缩短用户的响应时间。很遗憾，该工具无法准确告知您需要执行哪些操作，因此我们需要深入了解这些建议，并利用我们对 Web 应用性能优化的知识来应用这些建议。
缓存
我们无需深入探究 HTTP 缓存，也可以介绍一些基本知识。HTTP 协议包含缓存指令，可让服务器和客户端减少需要通过网络传输的数据量。例如，服务器可以告知客户端将资源保存在本地一段时间，这样客户端就不必再次请求该资源。客户端还可以询问服务器的资源是否比本地存储的资源更新。理想情况下，如果资源是静态的，服务器应告知客户端将资源存储在本地，并避免日后向服务器请求资源。正如您所想，有关 HTTP 缓存的详细信息非常多，但总体主题是“通过在客户端本地存储资源来减少通过网络发送的数据量”。
修正不可缓存的资源
我们来深入了解一条建议，并了解如何将审核建议与 DevTools 中的其他工具相关联。具体来说，我们来看看如何解决“以下资源明确不可缓存”问题。
由于缓存是通过 HTTP 协议完成的，因此我们需要查看 http://www.html5rocks.com/ 资源的 HTTP 请求和响应。只需点击相应资源，即可查看原始请求和响应标头及详细信息。
然后，您会进入“广告网络”“资源”或“来源”面板（具体取决于点击的资源类型），其中包含更多信息。在本例中，我们将进入“网络”面板。
我们正在尝试确认服务器是否已告知客户端“请勿缓存 html5rocks.com 的首页”。为此，我们点击该资源以查看响应标头，因为这些是服务器发送的标头和说明。
Cache-Control 标头。果然，服务器向客户端发送了“Cache-Control: no-cache”标头。正如您所想，这会告知客户端始终请求资源，而不是将其缓存在本地。具体而言，“no-cache”的 HTTP 规范如下所示：
“如果 no-cache 指令未指定字段名称，则缓存不得在未成功通过源服务器重新验证的情况下使用响应来满足后续请求。这样，源服务器就可以阻止缓存，即使缓存已配置为对客户端请求返回过时响应也是如此。”
这正是审核面板建议启用缓存的原因，因为否则服务器和客户端会发送可能多余的信息。
现在，我们已经确认了审核建议的根本原因，接下来该如何解决呢？在这种情况下，解决方案涉及服务器端配置或代码。根据您的设置，您可以通过网络服务器的配置或通过 Web 应用框架中的配置启用缓存。具体而言，对于您希望缓存的任何资源，您都应添加 Expires 标头和 Cache-Control: private 标头，并附上 max-age 参数。
建议只是建议
请注意，审核面板会根据通用启发词语来提供改进建议。它会将多年来积累的最佳实践应用于您的特定 Web 应用。大多数情况下，这些建议非常准确，值得您牢记。
不过，在某些情况下，建议可能正确，但实际上可能不会带来任何改进。例如，如果您的网页只有一张大图片，则“审核”面板会建议您向 <img> 标记添加宽度和高度属性（以便渲染引擎知道图片尺寸，而无需下载和检查图片）。虽然这通常是一个很好的建议，但如果图片是页面上的唯一元素，则不会有太大帮助。
了解这些建议后，请务必加以应用。另外，别忘了在更改前后衡量效果，以确保效果确实有所提升。
摘要
审核面板是一款简单易用的出色工具，可快速向您展示如何优化 Web 应用的性能。速度是 Web 应用的一项关键属性，因为许多公司发现性能与收入或活动之间存在直接关联。优化应用性能不仅对用户有益，对您的业务盈利能力也有益。