Develop Reference

How to track JavaScript execution performance?

So I have this vanilla JavaScript code that is running very slow when on certain older mobile devices (like iPhone 5) but runs flawless on newer devices (like iPhone 7). And I'm not talking about load speed, but the actual JavaScript functionality. I'm using a few addEventListener to handle basic stuff like showing and hiding divs, including an overlay div with transparent opacity. When I click the button which has the addEventListener linked to it, it takes sometimes up to two seconds to show and/or hide the divs. Sometimes it won't even do it and I'll have to click the button again. I won't share the entire JS file here, but I can assure it's pretty basic. What I want to know is if there's someway to track the execution speed of the JavaScript code... Like, I'm not sure if it's something in the actual JS code, or it's slow because the brownser is taking a long time to rendering it. Any help is welcome! =)

2 ways that are available:
The developer tools in Chrome, but Firefox is more useful for tracking performance:
Also, try performance.now(), never used it but heard about it. Maybe that will help.
EDIT: You could also check how it runs via breakpointing. You can breakpoint in Chrome and Firefox I believe.

Running cycles in JavaScript application

I have a large JavaScript application using only vanilla, jQuery, jQuery-UI and a WYSIWYG library which has performance issues and I'm suspecting it having infinite cycles running in the background. Is there a way to find what is really being done on the background from the developer console in the browser or is there some other way?
For example there are functions which do reverse tree traversing which are done with a while condition. If it's not met it obviously runs infinite without the user knowing. Other problems might be unterminated intervals, etc..

Chrome has a "timeline" tab in the web inspector, which can be used to record which JavaScript events are firing.
Press F12 to open it, then go to the "timeline" tab and begin a recording. Once you stop the recording, you can inspect closely which events are being fired and when.
This can help you spot things like an infinite loop in the code.
See also: the documentation for this tool.

I believe you could use the Timeline in the chrome inspector to see which functions are running at what time and for how long. I've found it easiest to always name my functions so I can inspect in the functions performance.
https://developers.google.com/web/tools/chrome-devtools/profile/evaluate-performance/timeline-tool?hl=en#profile-js

ContentVeil.js and Forced Synchronous Layout Issue

I have a php page that hangs for 3-10 seconds after the page loads, you can't even scroll up or down, or close the tab when this happens. (the chrome loading gif still loops tho) Happens in Chrome and IE.
Chrome Timeline: http://imgur.com/wF5Pioz,KRbnxIm#0
Shows ContentVeil.js repeating over and over. I think it is client side(?), I did a grepWIN to search for ContentVeil, with no luck, and it doesn't show up in Chrome Network tab.
Chrome Profile: Second image, from above link.
I think this shows the issue at the anonymous function from meta-boxes.min.js, ln 1.
meta-boxes.min.js: http://pastebin.com/yqtJyqB1
Unfortunately line one is a function that encapsulates the whole script. I don't know js very well, I tried to just remove each function one by one but that just created more errors.
Any ideas on how I could find the source of the problem would be much appreciated.

It's part of the Evernote web clipping extension, and it's hooks DOM events, causing massive slowdowns if you are doing large amount of dom changes.

javascript performance functionality

I'm not sure if such tool exists but if it does, please point me to it.
It works like this: you play with the UI of you page for a few minutes and then you can see how many times the browser spent executing each javascript function and how much time does each function take to execute on average.
So for instance, we could say function X is used a lot and takes a long time to execute.
I use chrome so may be other browsers do this. Let me know.

chrome's developer tools has what you call "Timeline".
load your page then CTRL + SHIFT + I
go to Timeline tab
hit the record button (found on the lower left, it's a circle).
then it will record your actions, page events, etc.

1) JSLitmus is a lightweight tool for creating ad-hoc JavaScript benchmark tests
http://www.broofa.com/Tools/JSLitmus/
is best and calculates for all browsers
2) Firebug, Chrome will also help.
3) JSPerf (dont have the link) will also help you check performance online
4)
and if you are not happy with any ofthose..do it urself...
write the function call between these
console.time('timerName');
// Your javascript function here
console.timeEnd('timerName');
This one will work only in developer tools like firebug and chrome console but very easy to deal with it.

In Chrome
CTRL + SHIFT + I
Timeline tab
Hit the circle on the bottom left that says record
Mess with your site
Stop recording

jquery animate, set interval and inactive window issue

So I have this weird issue that i am hitting, i have a slide show in which set interval fires up jquery animate method. all works great.
Until i switch tabs. If i switch back to tab with slideshow in some time, all of the sudden animation is fired repeatedly, with out any inteval in place. Like it is playing catch up.
I kind of figured that it has something to do with RequestAnimationFrame and jQuery's animate method. And how animation rendering is suppressed while tab is inactive. While interval is kept on firing up every so often, even when window is inactive.
Could any one elaborate more on this, would much appreciate it.
Here is the core code that does that:
function animate(setCurrent){
animationDistance = opt.cSlideWidth * (opt.cCurrentSlide - 1);
carousel.animate({left: '-' + animationDistance}, opt.cTransitionSpeed});
}
opt.cSetUpIntervalMethod = function(action){
if (action === 'start') {
clearInterval(opt.cSlideTimer);
opt.cSlideTimer = setInterval(function(){animate();},opt.cSlideDelay);
}
}
opt.cSetUpIntervalMethod('start');

This was a bug in older versions of JQuery which has since been fixed as of 1.6.3. Update your version.
"We had high hopes for the browser’s requestAnimationFrame API when we
added support into version 1.6. However, one of the highest-volume
complaints we’ve received since then relates to the way
requestAnimationFrame acts when a tab is not visible. All the
animations initiated when the tab is invisible “stack” and are not
executed until the tab is brought back into focus. Then they all
animate at warp speed! We’ve removed support for this API (which has
no impact on the way you call jQuery’s animation features) and plan to
incorporate it into a future version of jQuery."
http://blog.jquery.com/2011/09/01/jquery-1-6-3-released/

Chrome and Firefox slow down interval timers when a page goes to the background to preserve CPU and battery. When you bring it back to the foreground, they try to "make up" for some of the lost timers. See this post in the Chromium blog for a brief description of what they implemented.
The best way to solve the issue is to stop your animation when your window goes out of view and start it again when it comes back into view.
Chrome has an experimental API for doing just this. If that is not available, fallback methods involve using focus detection to see if focus is anywhere in your window.

do not use setinterval() for animations that can lose focus. you accomplish the same effect with .delay(milliseconds) and a recursive javascript method call.