Javascript优化，从哪里开始？

Question

我最近在一家新公司开始工作，他们现有的应用程序包含1000行Javascript代码。该基线包含数十个JS文件，可轻松超过10,000个自定义代码行，它们还使用多个第三方库，如Jquery，Livequery，JQTransform等。他们从用户那里得到的一个主要抱怨是网站客户端操作的缓慢。我的任务是优化和改进JS的性能。我的第一步显然是向前推进到最新的Jquery库，并将JSMin合并到构建过程中。除此之外，我想知道是否有人在如此庞大的代码库中有哪些优化开始优化？

Answer 1

您可以尝试安装DynaTrace Ajax Edition（free download here）并查看它告诉您的内容。我认为它只支持IE8，但这可能是一个很好的起点。在我看来，它比Firebug或Chrome有更全面和易懂的探查器界面。

对我而言，有一件事是“Livequery”，如果不使用非常，可能会导致巨大的性能问题。

请记住这一点：在一个代码库中，这个代码库很大，随着时间的推移而发展，可能没有最现代化的Javascript技术，你的真正问题将在你自己的代码中成为糟糕的算法。较新的库和缩小/优化方法是很好的想法，但您需要做的第一件事是找到看似迟缓的页面然后开始分析。根据我的经验，在这样一个庞大的旧代码库中，你会发现一些非常糟糕的真的。安装跟踪CPU利用率的桌面小工具。这是查看页面代码何时导致浏览器直接减速而不仅仅是网络延迟的好方法。任何大量时间内浏览器CPU使用量的任何大幅增长应该是一个大红旗。

Answer 2

说明该代码。如果你只是“感觉”它可以被优化，不要优化一些东西。记住80％20％的规则。 80％的时间用于20％的代码。

使用Google的Closure tools。他们可以优化和减少您的JS代码，这至少会使其在客户端的计算机上加载更快。

Answer 3

要走的路是找到瓶颈。如果您发现应用程序运行缓慢的实际情况，您可以使用 Firebug 来分析您的代码并告知每个功能花费的时间 多少次他们被召唤了。从这些信息中可以很容易地确定哪些方面需要改进。

通常，Web应用程序的瓶颈是：

• 广泛使用DOM（重绘，回流）
• 重型网络通信（AJAX）

Answer 4

你的配对前面有很长的路要走，我不羡慕你。

以下是一些 Performance Optimization Techniques for Javascript ，是我在与您最近一样的工作后写下来的。

根据它们的性能差异，它们分为5大类。

然而，鉴于您对代码库所说的话，我认为关于 管理并积极减少依赖性 的第二部分是最相关的，尤其是：

1. 修改代码以减少库依赖性，
2. 为库和模块使用后加载依赖项管理器

然而，其中列出的所有25种技术都有助于提高性能。

我希望你发现它们很有用。