Question

我面临着一个非常奇怪的行为 - 如果我启动了探查器（必须是JS探查器），代码的工作速度几乎快了两倍。

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

事情是，这仅在具有旧图形卡的机器上重现。我已经设法在具有 AMD Radeon HD 6450 图形卡的计算机上重现它。在较新的机器上，这不再重现。

为什么探查器会让代码运行得更快？几乎快两倍！

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

我通过javascript与for (var i = 0; i < 1000000; i++) { box.style.top = getRandomInt(0, 100) + '%'; box.style.left = getRandomInt(0, 100) + '%'; };和console.profile启动和停止探查器。 为了重现它，必须在运行时打开DevTools。

谢谢！

Answer 1

无法在我的机器上重新启动。
但我很好奇你是否将DevTools打开的跑步与使用探查者跑步的跑步进行比较？如果是这样，解释可能是DevTools禁用内部通知，例如在分析处于活动状态时更新“元素”面板。
如果您将运行与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配置文件”。

希望它有用，

梅纳赫姆

JS代码启用时，JavaScript代码的工作速度更快？什么？

3 个答案: