JS代码启用时,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) + '%';                
};

我开始和通过JavaScript与停止探查console.profile和console.profileEnd.为了重现它,必须在运行时打开DevTools.

谢谢!

Answer 1

无法在我的机器上进行复制。
但是我很好奇，您是否将DevTools open与profiler的运行进行了比较？如果是这样，则可能是由于DevTools禁用了内部通知，例如在激活分析时对Elements面板进行了更新。
如果您要比较DevTools关闭的运行，那么它看起来确实很奇怪。

Answer 2

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

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

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

当此 DOM 修改可视化功能打开时，Chrome 分析器会明确禁用该功能。换句话说，Profiler 的速度应该与 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 配置文件”。

希望有用，

梅纳赫姆