当 JS Profiling 开启时，JavaScript 代码运行得更快？ 什么？

Question

我的应用程序面临一个非常奇怪的行为 - 如果我启动分析器（必须是 JS 分析器），代码的运行速度几乎是原来的两倍。

我用一个非常简单的代码复制了它，可以在这个小提琴上找到： https : //jsfiddle.net/zagrwk44/

问题是这只能在带有旧显卡的机器上重现。 我设法在配备AMD Radeon HD 6450显卡的机器上重现它。 在较新的机器上，这不再重现。

探查器是如何让代码运行得更快的？？ 几乎快两倍！

这里花费时间的代码只是改变屏幕上 div 的位置：

for (var i = 0; i < 1000000; i++) {
    box.style.top = getRandomInt(0, 100) + '%';
    box.style.left = getRandomInt(0, 100) + '%';                
};

我正在通过带有console.profile和console.profileEnd javascript 启动和停止分析器。 为了重现它，运行时必须打开 DevTools。

谢谢！

Answer 1

无法在我的机器上重现。
但是我很好奇您是否比较了使用 DevTools 打开的运行与使用 Profiler 的运行？ 如果是这样，解释可能是 DevTools 禁用了内部通知，例如在分析处于活动状态时对 Elements 面板的更新。
如果您在关闭 DevTools 的情况下比较运行，那么它看起来真的很奇怪。

Answer 2

我遇到了同样的问题，我可以在任何机器上重现这个问题。

DevTools 本身会减慢您的代码执行速度，这只会影响修改 DOM 的 JS 代码。 这个问题不会影响不接触 DOM 的 JS 代码。

如果您在快速修改 DOM 的同时查看 DevTools 中的“元素”选项卡，则每次修改 HTML 元素时，它都会闪烁并突出显示修改后的元素。 我通过在包含大量元素的 SVG 图表上进行测试进一步证实了这一点。

Chrome 分析器在打开时会明确禁用此 DOM 修改可视化功能。 换句话说，分析器的速度应该与 DevTools 关闭时的速度相同。

因此，遗憾的是，我必须关闭 DevTools 才能继续使用我的大型 SVG 图表。

Answer 3

我发现这种奇怪的行为只发生在“Windows server 2008 R2 Enterprise”操作系统上。

您的测试仪不是正确的指示，因为它使用随机函数测试性能，这可能会导致每个样本的结果不同，更重要的是您没有从时间采样中排除console.profile()和console.profileEnd()意味着你永远不会得到真正的原生结果。

为了获得更好和现实的结果，代码应该如下所示：

var random = [80,90,15,5,70,50,60,25,36,45,62,58,76,23,93];

fbtn.addEventListener('click', function() {

    //START PROFILE BEFOR TIME START
    if (withProfiling.checked) {
      console.profile();
    }

    console.time('click handler'); 
    for (var i = 0, v =0; i < 1000000; i++, v++) {
      box.style.top = random[v] + '%'; //USE SAME NUMBERS FOR ALL TESTS
      box.style.left = random[v] + '%';//USE SAME NUMBERS FOR ALL TESTS 

      if(v >= 14){
        v= 0;
      }         
    };
    console.timeEnd('click handler');

    // STOP PROFILE AFTER TIME END
    if (withProfiling.checked) {
           console.profileEnd();
        }
   });

这是一个可以更深入地跟踪它的测试器： http : //embed.plnkr.co/bdreL4UVFyyWtDoNTXRs/

我通过代码删除了启动分析器，因为我发现通过手动启动配置文件可以更好地恢复这种奇怪的行为。

要恢复它，请从 Chrome 上 DevTools 的配置文件中选择“收集 Javascript CPU 配置文件”。

希望有用，

梅纳赫姆