衡量 Javascript 性能答案

【问题标题】：Measure Javascript performance衡量 Javascript 性能
【发布时间】：2013-01-04 09:07:58
【问题描述】：

我正在尝试对我们的前端进行全面分析，我想知道是否有任何工具可以自动测量 Javascript。

例如：

函数的执行（无需我手动将日期对象放在之前/之后来记录）
我页面上的哪个脚本最慢以及原因
找出我需要优化的功能
我可以做任何 jQuery 改进吗（除了通过 John Resig 的jquery-profile.js）
- 我可以使用更好的选择器
- 某些对象的记忆
- 使用更好的函数（例如：使用 find，因为它更快）

除了 Firebug、Chrome 开发工具、Yslow/Page speed 插件等之外，我非常想为我的 JS（以及也可以分析 jQuery 的东西）寻找一个分析器。我正在寻找更好的东西比 JSlint 或 jsPerf。

我在我的应用程序上运行了 New Relic，但它并没有告诉我我的脚本在哪里缺失。

我希望有一种比手动进行分析更简单的方法来分析我的 JS。我需要一个可以进行全面分析并为我提供包含指标的报告的解决方案。

【问题讨论】：

如果您使用的是 Chrome -> 右键单击 -> 检查元素 -> 网络选项卡，现在再次加载页面保持网络选项卡打开，它会在 JS 加载和其他内容时提供 U 报告，此外我强烈建议在 google 中查找“Page Speed”。
页面速度不会告诉您任何有关脚本性能的信息。但除此之外，它还是分析页面资产整体性能的绝佳工具。

【解决方案1】：

我认为您正在寻找这样的东西：

从文档介绍到此：

使用 Speed Tracer，您可以更好地了解时间正在您的应用程序中花费。这包括由 JavaScript 解析和执行、布局、CSS 样式重新计算和选择器匹配、DOM 事件处理、网络资源加载、定时器触发、XMLHttpRequest 回调、绘制等。

【讨论】：

【解决方案2】：

我最近遇到了这个问题，应该有助于衡量您的 javascript 代码性能 - http://www.html5rocks.com/en/tutorials/webperformance/usertiming/

【讨论】：

请注意，Chrome 和 IE 目前支持 User Timing API，但 Firefox 或 Safari 不支持：caniuse.com/#feat=user-timing

【解决方案3】：

您还可以查看 Yahoo Boomrang 提供的 javascript 库。它是在信标服务器上捕获用户体验并对其进行分类/分析的绝佳工具。

【讨论】：

【解决方案4】：

这是我创建的一个工具：http://yellowlab.tools

它使用 PhantomJS 加载页面并在页面加载时分析许多内容。启动测试，然后单击“JS Timeline”选项卡。您将找到与 DOM 交互的每个 JS 函数的日志，包括 jQuery 函数。

我用它来为我的客户审核 JS 代码，当您需要解开一些意大利面条式代码或了解一些缩小的第三方小部件时，它是最好的现有工具！

【讨论】：

【解决方案5】：

我真的怀疑您是否可以自动执行此操作，否则聘请高级开发人员来识别此类问题是没有意义的 :) 您可以做的是使用 Chrome 开发工具并使用 CPU 分析器和时间线工具手动检查您的页面查看运行缓慢或造成内存泄漏的原因。

祝你好运

【讨论】：