How to track JavaScript execution performance?

Question

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! =)

Please share the file as we cannot help you otherwise. However: are you listening to events that fire often (scroll, resize). Do you animate using Javascript? (if yes, do you use requestAnimationFrame?). Do you animate/transition using CSS? (if yes, do you animate/transition properties other than transform and opacity). — Phillip
– Phillip, Commented Oct 8, 2019 at 14:39
The developer tools in chrome can help --- see the "Performance" tab. That's short of debugging safari on an actual iPhone 5 This question can have many answers and is likely answered somewhere else. — Cody Geisler
– Cody Geisler, Commented Oct 8, 2019 at 14:43

yosh · Accepted Answer · 2019-10-08 15:18:23Z

1

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.

edited Oct 8, 2019 at 15:18

answered Oct 8, 2019 at 15:12

yosh

1781 silver badge15 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

How to track JavaScript execution performance?

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related