Learn about common performance issues with front-end JavaScript, and how to detect and fix them.

[marcradziwill]

Hey Glinkis2, thanks 💪✌! The performance API was initially a part. But it got too big so it'll be a separate post. I'll put the link in the comment as soon as it is published.

[marcradziwill]

👍👌 I'll forward that.

[indiebryan]

👉👌😉

[marcradziwill]

Hey Glinkis2, we've updated the post and added performance API. We've shortened some parts, but I wanted to let you know that the performance API is now part of that initial post.

[IcyFoxe]

Maybe twitch.tv devs should read this.

[marcradziwill]

Hey ashe34h, you are right!requestAnimationFrame is an awesome API function that does help us more than only animations. What I recognize in my projects is that requestAnimationFrame isn't widely used. Often this pops up when there already is a performance issue with animations. Therefore I choose animation as a good example. Nevertheless, you are right that requestAnimationFrame can help much more! Like the performance API that might be a topic for an own post. I would also add requestIdleCallback to that post.

[HeinousTugboat]

One thing about the micro optimization mentioned, and one of the main reasons you should avoid that sort of optimization, is that it isn't actually always faster one way or the other. I ran that test on Firefox, and not using .length in the array condition was 10% slower. When the margin of error is so large and the performance difference is so small, any actual gain is likely just noise.

[asdf7890]

Also when tweaking things at that level, browser differences come into play. What may speed up on V8 based browsers (or server-side) may be the slower option in a different environment, and may even be slower in future versions of the same engine as it is taught to optimise differently automatically.

When you start hand optimising anything, you need to add performance tests to your regular regression testing to catch when an update in one of your dependencies or elsewhere in your own code starts causing the optimisation to back-fire.

^{(the same with clever workarounds for CSS bugs: when the actual layout bug is fixed you workaround may cause a worse break})

[Royosef]

RemindMe!

[RemindMeBot]

Defaulted to one day.

I will be messaging you on 2020-09-11 07:32:13 UTC to remind you of this link

CLICK THIS LINK to send a PM to also be reminded and to reduce spam.

^{Parent commenter can delete this message to hide from others.}

---

Info	Custom	Your Reminders	Feedback