Menu
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!
750
A JS profiler is an efficient tool to help you understand your code better – effectively finding, pinpointing and optimizing bottlenecks in your code. They're simple to run once you get used to the interface and it's likely you even have one built into your browser.
Rather than forking for every incoming request, or using a pool of processes, node typically uses a single process. This process then calls a 'handler' function every time a web request comes in. This design allows extremely fast responses, and low overhead per-request.
Profiler: It will check for the repeating code that can be optimized. As soon as, it gets the repeating code, it basically moves the code into compiler.
To profile a page load, click Record Page Load. DevTools automatically starts the recording and then automatically stops when it detects that the page has finished loading. To profile a running page, click Record, perform the actions that you want to profile, and then click Stop when you're finished.
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.
82
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.
31
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
