Javascript 优化，从哪里开始？答案

【问题标题】：Javascript Optimization, where to begin?Javascript 优化，从哪里开始？
【发布时间】：2011-05-09 20:17:49
【问题描述】：

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

【问题讨论】：

页面加载后感知到的页面加载速度或用户交互速度是否缓慢？ JS 是否创建了很多 HTML 客户端？用户所做的所有事情都会有大量的 AJAX 调用吗？
我们已经在服务器/网络级别进行了大量分析，速度缓慢似乎仅限于运行页面加载后的 Ajax/JQTransform 代码。

标签： javascript jquery optimization

【解决方案1】：

你还有很长的路要走，我不羡慕你。

这里有一些Performance Optimization Techniques for Javascript，是我最近在担任与您类似的角色后写下的。

按照它们产生的性能差异，它们分为 5 个大类。

但是鉴于您对代码库的看法，我认为关于管理和积极减少依赖项的第二部分是最相关的，特别是：

修改代码以减少库依赖，以及
为您的库和模块使用加载后依赖项管理器

但是，此处列出的所有 25 种技术都有助于提高性能。

我希望它们对你有用。

【讨论】：

【解决方案2】：

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

一般来说，一个网络应用程序的瓶颈是：

广泛使用 DOM（重绘、重排）
重度网络通信 (AJAX)

【讨论】：

【解决方案3】：

分析该代码。如果您只是“感觉”它可以优化，就不要优化它。记住 80% 20% 的规则。 80% 的时间花在 20% 的代码上。

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

【讨论】：

【解决方案4】：

您可以尝试安装 DynaTrace Ajax 版 (free download here) 看看它会告诉您什么。我认为它只支持 IE8，但这可能是一个很好的起点。在我看来，它的分析器界面比 Firebug 或 Chrome 更全面、更易于理解。

让我大吃一惊的是“Livequery”，如果不小心非常使用它会导致巨大的性能问题。

记住这一点：在一个庞大的代码库中，随着时间的推移而开发，并且可能没有使用最“现代”的 Javascript 技术，您的真正问题将是您自己的代码中的糟糕的算法。较新的库和缩小/优化方法是好主意，但您需要做的第一件事是找到看起来缓慢的页面，然后开始分析。根据我的经验，在这样的大型旧代码库中，您会很快发现一些可怕的东西真的。安装一个跟踪 CPU 利用率的桌面小工具。这是查看页面代码何时导致浏览器直接变慢的好方法，而不仅仅是网络延迟。任何长时间的浏览器 CPU 使用率大幅飙升都应该是一个很大的危险信号。

【讨论】：

谢谢，我今天试试 DynaTrace，看看效果如何。