【问题标题】:Chrome profiler - Why do functions sometimes stop for a little time?Chrome profiler - 为什么函数有时会停止一段时间?
【发布时间】:2017-09-03 14:48:47
【问题描述】:

这是 Chrome Performance Devtools 捕获的我的 web 执行图片:

我注意到函数在执行过程中会多次停止,当我的 web 函数停止时,Chrome 会执行一些 RegExp 操作(如图所示)。我不明白这是什么,以及为什么会发生。请帮忙解释一下,谢谢。

更新:这是一个同样以相同方式执行的函数:

【问题讨论】:

  • 您是否使用了一些模板库(Polymer、Meteor、Angular 等),这些模板库使用双卷曲语法和操纵属性或 HTML? RegExp 似乎正在寻找数据绑定。
  • 是的,我正在使用带有 soma template 的 Backbone/Marionette 作为自定义模板
  • 乍一看,这个正则表达式似乎与模板有关 - 搜索 {{...}}

标签: javascript google-chrome profiling google-chrome-devtools profiler


【解决方案1】:

你所描述的

您描述问题的方式听起来像是您认为 JavaScript 虚拟机在函数执行时(即在它们返回之前)暂停(停止它们)以执行其他操作,然后恢复函数。

您显示的图像对我来说根本没有暗示。

我看到了什么

虚拟机执行:

  • callback,它调用
  • 一些名称被工具提示隐藏的函数,它调用:
  • fireWith,它调用:
  • fire,它调用:
  • 等等……

然后最深的函数返回,调用它的函数返回,依此类推,直到fire 返回,fireWith 返回,我们无法读取名称的函数返回,callback 返回。

然后VM运行一个RegExp函数,它再次调用了一个名为callback的函数,整个事情重新开始。 换句话说,带有callback 的第二列和其余的是函数的新调用。 函数不是“停止[ping] 一小会儿”:它们被多次调用。

我一直在响应事件的库中看到这一点。它们通常会遍历事件处理程序来调用它们。给定一个足够复杂的库,在调用处理程序的循环和您的自定义代码之间可能存在相当多的胶水代码,因此在分析中会出现大量重复调用。

【讨论】:

  • 感谢您的回答。您似乎是对的,但并非完全正确。我在callback 函数中放了一个console.log('callback') 命令来检查它被调用了多少次。我发现它确实被调用了很多次,但仍然少于它在分析器上出现的次数。还有另一个函数(不是回调)直接调用,这个函数只打印到控制台一次,但在分析器中出现多次。你怎么看?
  • 每次运行时callbacks 的计数是否相同?不确定这个“其他功能”能否请您也提供更多信息?
  • callback 的计数在 profiler 上不一样,但在控制台上的消息数是一样的。另一个函数是在页面首次加载后直接调用的普通函数。我将在问题的分析器中包含它的图片
  • 我不确定你是对的。我添加了一个控制台日志,发现一个函数只调用了一次,但在性能时间线中,我看到两个条形图由该函数的一个间隙隔开。也许问题的作者是对的,VM有时会中断执行。或者这可能是采样分析器的工件。