CODEWITHSUNDEEP
javascriptperformancegoogle-chromegoogle-chrome-devtools
Shay Friedman
Shay Friedman

Reputation: 4868

JavaScript Code Works Faster when JS Profiling is on? What?

I'm facing a very strange behaviour with my application - if I start the profiler (must be JS profiler), the code works almost twice as fast.

I've reproduced it with a very simple code which can be found on this fiddle: https://jsfiddle.net/zagrwk44/

The thing is that this reproduces only on machines with old graphic cards. I've managed to reproduce it on a machine with AMD Radeon HD 6450 graphic card. On a newer machine this does not reproduce anymore.

How come the profiler makes the code run faster?? almost twice as fast!

The code that takes the time here is just changing the position of a div on the screen:

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

I'm starting and stopping the profiler via javascript with console.profile and console.profileEnd. In order to reproduce it, DevTools must be opened when running.

Thanks!

Upvotes: 24

Views: 2007

Answers (3)

Chris Conlan
Chris Conlan

Reputation: 2962

I experienced the same issue and I can reproduce this on any machine.

DevTools itself is slowing down your code execution, and this only affects JS code that modifies the DOM. This issue doesn't affect JS code that doesn't touch the DOM.

If you look at the "Elements" tab in DevTools while rapidly modifying the DOM, it flickers and highlights modified elements every time an HTML element is modified. I further confirmed this by testing on SVG charts with tons of elements.

The Chrome profiler clearly disables this DOM-modification visualization feature when it is on. In other words, the speed of the profiler should be the same as the speed when DevTools is closed.

So, sadly, I have to close DevTools to keep playing with my big SVG charts.

Upvotes: 10

alph
alph

Reputation: 676

Can't repro on my machine.
But I'm curious do you compare a run with DevTools open vs a run with profiler? If so, the explanation could be that DevTools disables internal notifications, like updates to the Elements panel when profiling is active.
If you're comparing a run with DevTools closed, then it really looks strange.

Upvotes: 12

Menachem
Menachem

Reputation: 21

I found this strange behavior which only happen to me on "Windows server 2008 R2 enterprise" OS.

your tester is not correct indication since it test the performance with a random function which could lead to a different results for every sample, more than that you are not exclude the console.profile() and console.profileEnd() from the time sampling which mean you never got a real native results.

To get a better and realistic result the code should look like this:

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();
        }
   });

here is a tester which could trace it in more depth: http://embed.plnkr.co/bdreL4UVFyyWtDoNTXRs/

i remove the starting profiler by code, cause i found this strange behavior restore better by starting the profiles manualy.

to restore it select the "Collect Javascript CPU Profile" from the profiles from DevTools on Chrome.

Hope it was useful,

Menachem

Upvotes: 0

Related Questions