2

在我的 Angular 应用程序中，在引入了更多 ngxs 的使用后，我看到我的应用程序在检查器打开时变得非常慢，但在分析器运行时却没有。

这使得弄清楚发生了什么有点困难，但是使用旧conosle.profile方法（向 Chrome 的旧分析器添加一个条目），我已经缩小了一点 - 但我现在并没有比我更了解情况是 - 只是更困惑。

所以在这里希望有人可以帮助我！

我有一些分析的截图要分享，但不幸的是没有太多其他的。

首先，来自配置文件图表的屏幕截图： 在此处输入图像描述 如您所见，有很长一段时间，显然没有真正发生任何事情。请注意，在控制台中，底部方法 ( startObserving) 只需要 0.12 毫秒（根据console.time）

沿着树向上走几步，我们发现Handsontable- 这就是函数的样子，以及一些相关的时间：

function Handsontable(rootElement, userSettings) {
  console.time('Handsontable total time');
  console.time('Handsontable create instance');
  var instance = new _core2.default(rootElement, userSettings || {}, _rootInstance.rootInstanceSymbol);
  console.timeEnd('Handsontable create instance');
  console.time('Handsontable init instance');
  instance.init();
  console.timeEnd('Handsontable init instance');
  console.timeEnd('Handsontable total time');
  return instance;
}

// Timer outputs:
// This looks OK
Handsontable create instance: 10.864990234375ms
// Also this
Handsontable init instance: 1462.807861328125ms
// Wow, what??
Handsontable total time: 52664.875ms

看起来Handsontable构造函数/函数中调用的 2 个方法的总运行时间 <1500 毫秒，但总执行时间超过 52秒。

在我看来，这大约 50 秒的空闲时间里会发生什么？

非常欢迎任何帮助，提示，建议，帮助更好地调试！

注意：在 Firefox 中，这不是问题。我也尝试过 Chromium 67、68 和 69 - 同样的问题。这是跨所有平台的 Chrome 的问题（在 Windows 10、Ubuntu 16,17 和 MacOS latest-1,latest 中测试）

4

0 回答 0