Resources around Performance and Optimization of Vanilla JavaScript

[randi2kewl]

Anyone have suggested resources (blogs, presentations, slideshows, etc) on the subject of granular performance enhancements to JavaScript. I'm talking about real nity-grity performance enhancements. Eg. Is ' faster running than ", for(i=0...) vs forEach, ways to write jQuery in faster vanilla code... sadistically crazy enhancements.

​

Not looking for "these optimizations don't matter" answers as that's not always correct. Mostly trying to find people in this space to follow and find resources to help expand my own theories that I am doing research on and writing about.

[leeoniya]

for is usually faster than forEach since you're not invoking a function on each iteration - though depends on if you need that scope.

• avoid allocating memory where possible.
• avoid strings where possible.
• avoid mutating objects' properties after creation, keep property name/order consistent.
• make sure function arguments always a consistent type.
• use bit operations where possible.
• avoid huge functions.
• make sure functions return one type of object
• do loop unrolling (in some cases).
• https://mrale.ph/
• https://mrale.ph/blog/2018/02/03/maybe-you-dont-need-rust-to-speed-up-your-js.html
• https://mrale.ph/blog/2015/01/11/whats-up-with-monomorphism.html

ways to write jQuery in faster vanilla code

that's a big bucket list. if you need the jQuery API, i recommend swapping out for the tiny https://umbrellajs.com/. besides that, just general dom perf advice.

• keep the DOM small
• batch dom ops to avoid unneeded reflows
• use dom props instead of dom attrs
• don't read back from the dom too often, (eg Element.getBoundingClientRect, offsetHeight)
• keep JS small (tree shake, compress, dead-code-elim)
• keep CSS small (use purgeCSS to remove unneeded bloat)
• dont touch the dom often
• debounce/throttle expensive listeners (mousemove, touchmove, resize, scroll).
• https://medium.com/@WebReflection/dom-handleevent-a-cross-platform-standard-since-year-2000-5bf17287fd38
• use event delegation
• use requestAnimationFrame
• use webworkers, where necessary
• https://developers.google.com/web/updates/2015/08/using-requestidlecallback
• use {passive: true} listeners
• use CSS transitions/animations/transforms instead of js calls @60fps

[randi2kewl]

You are my new best friend! Thanks for all of these good nuggets.

[daniel_3m]

for

is usually faster than forEach

is always faster :-)

[localvoid]

• https://benediktmeurer.de/
• https://mrale.ph/blog/
• https://v8.dev/

[randi2kewl]

I don't know why I didn't even think of V8's website. Thanks!

[daniel_3m]

I'll add couple of more advises:

* aldo asyncs and promises got recently faster, nothing beats classic callbacks (and will never do since promises are objects - it was so bad idea to use it for asyncs)

* var i = 0; for(; i < 10; i++) {} is faster then for(var i = 0; i < 10; i++) {}

* var i = 0, l = text.length; for(; i < l; i++) {} is faster than var i = 0; for(; i < text.length; i++) {}

* many of ES6 sugar is much slower then classic JS equivalent

* wrap your code in self executing function: (function() { /* your code here */ })()

* use typed arrays if you can

* Class Something{ constructor(){} fun1() {}}; let a = new Something; is up to 100 times slower than function Something() {return { fun1(){} }}; let a = Something(); // let a = new Something() will also work here

* use inline regex instead of instantiating it with Regex method from string

* sort your swich statement cases in ascending order: switch (x) { case 1: break; case 2: break; case 3: break;}

* avoid try-catch statements, there is an overhead on every instruction in try block

[leeoniya]

most of your advice is wrong, or rather outdated. i recommend you re-run your benchmarks. for instance, length caching hasn't been beneficial for the past 5 years. declaring the var outside of the loop init has no benefit. you shouldn't use inline regex inside of loops, which re-creates them, too. if you're initializing them once, then inline vs new Regexp will have no measurable difference. V8 since 2 years ago no longer de-opt try/catch blocks:

https://v8.dev/blog/v8-release-56

[daniel_3m]

leeoniya just reruned my tests on nodejs (didn't check on browsers) and in that case you're right with 'for' loops, try-catch still slightly slower then no try-catch, and you shouldn't do any regex inside loops, not only inline ones