如何在Chrome中调试性能怪异？

Question

我正在构建一个JavaScript应用程序，主要是在Chrome中测试它。该应用程序涉及DOM操纵和构建的公平份额。

我的问题：在某些情况下，应用程序会突然变慢几倍。它似乎是一个布尔的东西，并且是可预测的：每次我做某个动作时，它都会变慢，并保持这样，直到我做一个特定的其他动作，然后表演恢复正常。

令我感到困惑的是，我在代码中看不到任何可能表明其原因的内容。对不起，代码太复杂了，无法提供样本，特别是考虑到我无法找出导致此问题的原因。

加速备份的其中一项操作是点击文档;即使是空白区域，即使我没有注册任何相关的mousedown /点击处理程序，某种程度上点击会神奇地将应用程序恢复到健康状态。相比之下，以编程方式清除焦点$(document).find('*').blur()，也不将未聚焦元素与$('#some_button').focus()聚焦也无济于事。

我也在Firefox和Opera上测试过。我在Firefox中遇到了非常严重的性能问题（它的DOM操作速度要慢得多？Firebug说它大部分时间花在jQuery.attr()上 - 这里不相关），但似乎我没有因为这个特定的bug而减速;在触发Chrome减速的操作之前和之后的性能相同。歌剧也没有受到影响。

我还没有尝试过Safari，我无法测试IE（严重依赖SVG和其他问题）。

所以：有没有人有什么想法会影响我的表现？或者至少，一个想法，如果没有被处理程序捕获，点击有什么影响，并且程序化焦点变化不会做同样的事情？我已经没有调试这个东西了。

更新：我想我无论如何都可以隔离代码。 fileBrowser是form（后来进入jQuery UI模式对话框）。

  var fileBrowserSubmit = function(evt) {
    // trigger the big render - either ~300ms or ~3s
  }
  var chooseDocument = function(evt) {
    // set up variables pertaining to the selected tr,
    // style the tr as selected
  }
  var chooseDocumentAndSubmit = function(evt) {
    chooseDocument(evt);
    fileBrowserSubmit(evt);
  }
  fileBrowser.
    submit(fileBrowserSubmit);
  fileBrowser.find('tr').
    click(chooseDocument).
    dblclick(chooseDocumentAndSubmit);

如果我点击tr，然后点击OK（从而提交表单），不会减速：从fileBrowserSubmit调用的代码会在~300ms内执行

如果我双击tr，减速：渲染功能将运行~3s（在我正在测试的样本数据上）。

可以看出，两种情况下执行的代码几乎完全相同：chooseDocument后跟fileBrowserSubmit。

Answer 1

使用分析器。这是唯一确定的方法。

Chrome的开发人员工具内置了一个。

Answer 2

您必须从“个人档案”标签中收集新的Javascript CPU个人资料。

1. 选择“收集JavaScript CPU配置文件。
”
2. 点击开始。
3. 在您的文档中执行某些操作。
4. 点击停止。

将在侧栏中的“CPU配置文件”下创建新的配置文件。点击它。

Answer 3

虽然这个问题已经很老了，但我遇到了同样的问题。

我的应用程序也使用了很多SVG。点击一些（但不是全部）UI元素后，渲染只需要更长的时间。使用探查器和chrome调试器工具的时间轴只显示offsetWidth计算（在这种情况下用于异物的大小计算）比以前花费更长的时间。除了所有的统计数据（内存消耗，cpu等）与之前相同。

由于我已经遇到了类似的问题，这个问题是由一些CSS规则造成的，所以我粗暴地强迫我的CSS规则。导致问题的原则是（我的sass，使用twbs）：

.some-component-selector {
    * {
       @include user-select(text);
    }
}

对于最大的部分，应用程序不允许用户选择，但在此特定节点中它可以。在点击节点之前，看起来chrome就像对待所有其他节点一样对待节点，但是在你点击它之后，svg渲染速度非常慢。删除此规则为我解决了问题。

我在mac，windows和linux上的34.0.1847.116版本以及linux上的一些chrome版本上测试了这个，并且所有平台都存在这个问题。