如何提高 AJAX 应用程序的性能？

Question

我们都知道过早优化是邪恶的。优化几乎总是涉及某种权衡——使系统更复杂、更难理解和调试等等。

过早的优化意味着（我认为）“在您知道问题是什么之前进行优化 - 甚至是否存在问题。”在这种情况下，您正在做出上述牺牲之一，却一无所获。因此，这是一个坏主意。

另一方面，我真的认为 Jeff Atwood 2006 年的帖子“Speed Still Matters”是永远适用的。用户满意度与速度有很大关系。

问题

考虑到这一点，在构建 AJAX 应用程序时，可以使用哪些工具来识别速度瓶颈？可以进行哪些常见、简单的改进？

一些初步的想法

我知道的一些基本想法（请随意扩展）：

• 请求更少。例如，如果您可以将多个 JS 或 CSS 文件捆绑为一个，那就是一个请求。
• 发送更少的数据。较小的文件大小（缩小的 JS、压缩的图像等）很有帮助。

我很好奇的一些事情：

• Google Chrome（我使用的）运行 JS 非常快。我的用户可能正在运行较慢的浏览器。 如何将慢速浏览器对我的应用的影响降到最低？

Answer 1

减少请求：

• 确保您的服务器为所有可缓存的文件发送缓存标头。
• 如果您根据用户交互发出请求，并且交互可能会频繁发生并且使之前的结果无效（例如自动完成输入），使用较短的计时器 在提出请求之前；如果发生其他交互，请取消操作。

发送更少的数据：

• 确保您的服务器压缩内容可以压缩。
• 通过 AJAX 重新加载 更小的块 HTML。 （本地化您的更改。）
• 注意您返回的响应；它尽可能小吗？有时，JSON 不是答案，当发送可以轻松解析的非常大的响应时。

对于处理速度较慢的浏览器，特别是在 Web 应用程序编程方面，您为改进快速浏览器所做的一切都会帮助较慢的浏览器。您可以将俗气的动画效果最小化只针对较慢的浏览器，但这并不属于“简单改进”的范畴，IMO。正确的答案是确定您的性能要求是什么，必须满足这些要求的最低机器/浏览器配置，并测试您的网站。

当您确实遇到速度太慢的情况时，分析您的网站。在 Firebug、Chrome/Safari 的开发人员工具和 IE8+ 的开发人员工具之间，开发人员有一些真正出色的方法来识别基于 JavaScript 的减速。找出真正的重头戏，然后重写或删除它们。

Answer 2

Google Chrome（我使用的）运行 JS 非常快。我的用户可能正在运行较慢的浏览器。如何将慢速浏览器对我的应用的影响降至最低？

我们必须让应用程序在 IE6 上运行，这简直是一场噩梦。尽量记住您可以在网上获取的一般 javascript 优化技巧。然后，当您的应用程序准备就绪时，抓住速度较慢的浏览器并尝试查看它在哪里慢到无法接受。然后回到 Firebug 并优化瓶颈。

为了记录，我们最终推出了 Firefox 3，因为 IE6 使我们的应用程序成为等待的噩梦（大量的 UI 元素）。我的结论是，如果您的用户使用旧浏览器，请先为他们设计您的应用程序（即不要使用太多的 Javascript，更基本的 HTML）。

Answer 3

您提到了捆绑和缩小 js 和 css 文件以使它们更小，我认为这非常重要，但我认为您不应该通过 ajax 请求发送太多。

我认为最好有一个更大的初始负载，其中所有 css/js 都被下载，然后只发出关于数据的 ajax 请求（可能是 json）。如果它只是 JSON 的一点点，它会快得多。

在客户端上，您还可以让您的代码更快。 Jquery 被证明是最快的库之一，因此在有意义的地方使用它是明智的，但您需要对其进行分析。

萤火虫，萤火虫，萤火虫。

在服务器端，Node.js（反应器服务器）速度惊人，值得研究。