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

javascript标记

本文是Microsoft的Web开发技术系列的一部分。 感谢您支持使SitePoint成为可能的合作伙伴。

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

等不及要看本文的内容了？ 观看此视频 。

如果您想讨论这篇文章，请随时在Twitter上对我进行ping操作 ！

需要探查器吗？

想到的就是集成的探查器，您可以使用Internet Explorer F12开发工具的新更新找到这些增强的探查器，这些增强功能也可用于Project Spartan 。 当然，您可以在开发框中使用喜欢的任何类似工具。 如果要在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做的Babylon.js ：

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

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

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

尽管此功能不是标准功能，但浏览器兼容性非常好，Chrome，Firefox，IE，Opera和Safari均支持该功能。

性能对象

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

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

免费学习PHP！

全面介绍PHP和MySQL，从而实现服务器端编程的飞跃。

原价$ 11.95 您的完全免费

免费获得这本书

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

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

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

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

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

这里的主要问题是，不容易理解事件期间如何分配代码。

这是用户标记进入游戏的地方 。 我们可以添加自己的标记 ，然后能够分解框架并查看哪个功能最昂贵，依此类推。

performance.mark("Begin 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 layer让babylon.js为您发出用户标记和度量值：

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

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

这样就很容易确定例如渲染目标和主渲染阶段是最昂贵的。

babylon.js用于允许用户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主题上有很多免费的课程，并且我们的使命是随着Project Spartan的到来创建更多的课程。 看看我自己的：

• WebGL 3D和HTML5及Babylon.JS简介

• 使用ASP.NET和AngularJS构建单页应用程序

• HTML中的尖端图形

或我们团队的学习系列：

• 使您HTML / JavaScript更快的实用性能提示 （从响应设计到休闲游戏到性能优化的七部分系列）

• 现代Web平台JumpStart （HTML，CSS和JS的基础知识）

• 使用HTML和JavaScript JumpStart开发通用Windows应用程序 （使用已经创建的JS来构建应用程序）

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

本文是Microsoft的Web开发技术系列的一部分。 我们很高兴与您分享Project Spartan及其新的渲染引擎 。 获取免费的虚拟机或者在你的Mac，iOS设备，Android或Windows设备上远程测试modern.IE 。

翻译自: https://www.sitepoint.com/improve-javascript-performance-analysis-results-user-marks/

javascript标记