通过用户标记改进 JavaScript 性能分析结果

David Catuhe

5.00/5 (2投票s)

2015年6月1日

CPOL

5分钟阅读

11381

在本教程中，我将分享几个提供代码性能洞察力的工具，并向您展示如何在内存图中充分利用用户标记来分析您的性能。

在处理高级 JavaScript 代码（如 3D 引擎）时，您可能会问自己可以采取哪些优化措施，以及应该在某些特定代码段上花费多少时间。在本教程中，我将分享几个提供代码性能洞察力的工具，并向您展示如何在内存图中充分利用用户标记来分析您的性能。

迫不及待想知道这篇文章是关于什么的？观看此视频

<嵌入此 URL：http://www.catuhe.com/msdn/usermarks.mp4>

如果您想讨论这篇文章，请随时在 Twitter 上联系我（@deltakosh）！

需要性能分析器吗？

其中一个想到的就是集成性能分析器，您可以通过新的 Internet Explorer F12 开发人员工具更新来找到它——这些增强功能也将适用于 Microsoft Edge。当然，您也可以在开发机上使用任何您偏好的类似工具。如果您想在 Android、iOS 或 Mac OS 上尝试，您还可以使用 remote.IE 在几分钟内获得一个正在运行的 Windows 10 技术预览版实例。然后打开您一直回避的 Internet Explorer "e"（这是一个临时客户端外壳，已配置了 Microsoft Edge 的新渲染引擎），按下 "F12"，您就可以看到我将要展示的内容了。

请注意，使用我们随 Windows 10 技术预览版发布的新的 F12 工具，性能分析器现在是 UI 响应能力窗口的一部分。

让我们看看其他可以提供更多关于代码性能洞察力的选项。

console.time

您只需在要评估的代码段周围调用 console.time() 和 console.timeEnd()。结果将是一个在控制台中显示的字符串，显示 time 和 timeEnd 之间经过的时间。

这非常基础，并且可以轻松模拟，但我发现这个函数非常直接易用。

更有趣的是，您可以指定一个字符串为您的测量结果添加标签。

例如，我为 Babylon.js 所做的就是这样

console.time("Active meshes evaluation");
this._evaluateActiveMeshes();
console.timeEnd("Active meshes evaluation");

这类代码可以在所有主要功能周围找到，然后，当启用性能日志记录时，您可以获得非常有用的信息。

您必须注意，将文本渲染到控制台可能会消耗 CPU 资源。

尽管此函数本身不是标准函数，但浏览器兼容性相当好。Chrome、Firefox、IE、Opera 和 Safari 都支持它。

Performance 对象

如果您想要更直观的东西，您也可以使用 performance 对象。在其他有用的功能中，这些功能可以帮助您衡量网页性能，您可以找到一个名为 mark 的函数，它可以发出用户标记。

用户标记是将名称与时间值相关联。您可以使用此 API 来测量代码部分，以获得精确的值。您还可以在 SitePoint 上找到 Aurelio de Rosa 关于此 API 的精彩文章。

今天的想法是使用此 API 在 UI 响应能力屏幕上可视化特定的用户标记。

此工具允许您捕获一个会话并分析 CPU 的使用情况。

然后，我们可以通过选择一个名为“动画帧回调”的条目并右键单击它以选择“过滤到事件”来放大特定帧。

然后将选定的帧进行过滤。

借助新的 F12 工具，您可以切换到 JavaScript 调用堆栈以获取有关此事件期间发生的更多详细信息。

这里的主要问题是，很难了解代码在事件期间是如何分派的。

而这正是用户标记发挥作用的地方。我们可以添加自己的标记，然后能够分解帧并查看哪个功能最耗时等等。

performance.mark("Begin of something…just now!");

此外，当您创建自己的框架时，能够使用测量来检测您的代码会非常方便。

performance.mark("Active meshes evaluation-Begin");
this._evaluateActiveMeshes();
performance.mark("Active meshes evaluation-End");
performance.measure("Active meshes evaluation", "Active meshes evaluation-Begin", "Active meshes evaluation-End");

让我们以 babylon.js 为例，看看在使用 “V8” 场景时可以获得什么。

您可以通过使用 调试层 来让 babylon.js 发出用户标记和测量结果。

然后，使用 UI 响应能力分析器，您将获得此屏幕。

您可以看到，用户标记显示在事件本身（橙色三角形）的顶部，以及每个测量的段。

因此，很容易确定，例如，[渲染目标] 和 [主渲染] 阶段是最耗时的。

babylon.js 用于允许用户测量各种功能性能的完整代码如下：

Tools._StartUserMark = function (counterName, condition) {
    if (typeof condition === "undefined") { condition = true; }
    if (!condition || !Tools._performance.mark) {
        return;
    }
    Tools._performance.mark(counterName + "-Begin");
};

Tools._EndUserMark = function (counterName, condition) {
    if (typeof condition === "undefined") { condition = true; }
    if (!condition || !Tools._performance.mark) {
        return;
    }
    Tools._performance.mark(counterName + "-End");
    Tools._performance.measure(counterName, counterName + "-Begin", counterName + "-End");
};

Tools._StartPerformanceConsole = function (counterName, condition) {
    if (typeof condition === "undefined") { condition = true; }
    if (!condition) {
        return;
    }

    Tools._StartUserMark(counterName, condition);

    if (console.time) {
        console.time(counterName);
    }
};

Tools._EndPerformanceConsole = function (counterName, condition) {
    if (typeof condition === "undefined") { condition = true; }
    if (!condition) {
        return;
    }

    Tools._EndUserMark(counterName, condition);

    if (console.time) {
        console.timeEnd(counterName);
    }
};

借助 F12 工具和用户标记，您现在可以获得一个很棒的仪表板，了解代码的不同部分是如何协同工作的。

通过用户标记改进 JavaScript 性能分析结果

需要性能分析器吗？

console.time

Performance 对象

更多关于 JavaScript 的实践