使用用户标记改善JavaScript性能分析结果

最新推荐文章于 2024-10-01 18:51:18 发布

cunjie3951

最新推荐文章于 2024-10-01 18:51:18 发布

阅读量110

点赞数

文章标签： java python javascript js 编程语言 ViewUI

在处理高级JavaScript代码（例如3D引擎）时，您可能会问自己可以做些什么来优化，以及应该花多少时间在某些特定的代码上。在本教程中，我将共享一些工具，这些工具可以深入了解您的代码如何执行，并向您展示如何在内存图中充分利用用户标记来分析性能。

等不及要看本教程的内容了吗？看这个视频：

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

需要探查器吗？

想到的一个探查器是集成探查器，您可以使用Internet Explorer F12开发工具的新更新找到这些探查器，这些增强功能也可用于Microsoft Edge 。当然，您也可以在开发框中使用喜欢的任何类似工具。

如果要在Android，iOS或Mac OS上进行尝试，还可以使用remote.IE获取在几分钟内运行的Windows 10技术预览实例。然后打开您一直在避开的Internet Explorer“ e”（这是配置了Project Spartan的新渲染引擎的临时客户端外壳），点击F12 ，现在您可以看到我要显示的内容：

请注意，使用Windows 10技术预览版附带的新F12工具，探查器现在是UI响应性窗口的一部分：

让我们看看其他选项，它们可以为您提供有关代码执行情况的更多见解。

控制台时间

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

这是非常基本的并且可以轻松模拟，但是我发现此函数非常易于使用。

更有趣的是，您可以指定一个字符串以获取用于测量的标签。

例如，这就是我为Babylon.js做的事情：

console.time("Active meshes evaluation");

this._evaluateActiveMeshes();

console.timeEnd("Active meshes evaluation");

可以在所有主要功能中找到这种代码，然后，在启用性能日志记录后，您可以获得非常有用的信息：

请注意，将文本呈现到控制台中会消耗CPU能力。

即使此功能本身不是标准功能，浏览器的兼容性也非常好。 Chrome，Firefox，IE，Opera和Safari支持它。

性能对象

如果您想获得更多视觉效果，也可以使用性能对象。在帮助您衡量网页性能的其他有趣功能中，您可以找到一个名为mark的函数，该函数可以发出用户标记。

用户标记是名称与时间值的关联。您可以使用此API测量部分代码，以获取精确值。您也可以在SitePoint上找到 Aurelio de Rosa撰写的有关此API的精彩文章。

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

该工具使您可以捕获会话并分析如何使用CPU：

然后，我们可以通过选择一个称为Animation frame callback的条目并在其上单击鼠标右键以选择event的过滤器来放大特定的帧。

选定的帧将被过滤，然后：

借助新的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”场景：

您可以通过使用Debug层让Babylon.js为您发出用户标记和措施：

然后，使用UI响应度分析器，您将获得以下屏幕：

您可以看到用户标记显示在事件本身的顶部（橙色三角形）以及每个小节的分段：

这样就很容易确定，例如[Render target]和[Main render]阶段是最昂贵的。

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进行更多操作

这可能会让您感到有些惊讶，但是Microsoft在许多开源JavaScript主题上有大量免费的学习知识，并且我们的使命是随着Microsoft Edge的到来创建更多内容。看看我自己的：

或我们团队的学习系列：

使您HTML / JavaScript更快的实用性能提示（从响应设计到休闲游戏到性能优化的7个系列文章）
现代网络平台快速入门（HTML，CSS和JavaScript的基础知识）
使用HTML和JavaScript快速入门开发通用Windows应用程序（使用已经创建的JS来构建应用程序）

还有一些免费工具： Visual Studio社区， Azure试用版以及适用于Mac，Linux或Windows的跨浏览器测试工具。

本文是Microsoft的Web开发技术系列的一部分。 我们很高兴与您分享 Microsoft Edge 和新的 EdgeHTML渲染引擎 。 获取免费的虚拟机或在Mac，iOS，Android或Windows设备上@ http://dev.modern.ie/ 进行远程测试 。