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