Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
Javascript micro-optimizations
// Array literal (= []) is faster than Array constructor (new Array())
// http://jsperf.com/new-array-vs-literal/15
var array = [];
// Object literal (={}) is faster than Object constructor (new Object())
// http://jsperf.com/new-array-vs-literal/26
var obj = {};
// property === undefined is faster than hasOwnProperty(property)
// Note: don't use this in cases where 'undefined' is a possible value for your properties
// http://jsperf.com/hasownproperty-vs-in-vs-undefined/17
if (obj.property === undefined) { ... }
// createElement('img') is faster than new Image()
// http://jsperf.com/new-image-vs-createelement-img/8
var img = createElement('img');
// fastest way to set *any* attribute on an element object is element[attribute] = value
// to set a data attribute, use setAttribute (see below).
// For getting data attributes you can use camelCase (e.g. elem['dataName']) - *but!
// only if the data-attribute was not created dynamically (i.e. it was already inside the html element),
// otherwise use getAttribute('data-x');
// http://jsperf.com/attribute-vs-setattribute/3
var elem = document.getElementById('bla');
elem['attribute'] = value;
// className = is faster than classList.add
// http://jsperf.com/classname-vs-classlist-showdown/5
var element.className = 'classa classb classc';
// textContent = is faster than appendChild(createTextNode)
// http://jsperf.com/textcontent-vs-createtextelement/49
element.textContent = 'text';
// setAttribute('data-x') is faster than dataset.x =
// http://jsperf.com/dataset-vs-setattribute-simple
element.setAttribute('data-x','x value');
// Array.isArray() is currently the fastest way to check if a variable is an Array (this is a 2017 update for the gist!)
// https://jsperf.com/array-isarray-vs-instanceof-array/5
Array.isArray(arr);
// Using substring and indexOf is *always* much faster than using RegEx
// http://jsperf.com/regex-vs-substring-one-way-data-binding
// If you need to dereference more than once - store in a var:
// http://jsperf.com/assign-first-vs-direct-reference
var n = o.one.two.three.four.name;
if (n !== undefined) var w = n;
// this || that, faster than if (!this) that:
// http://jsperf.com/false-vs-or
var yes = false;
var v = yes || 2;
// typeof faster than isNaN():
// http://jsperf.com/isnan-vs-typeof/9
typeof(n) === 'number'
// A short, fast way to do String.startsWith() check,
// taken from: http://stackoverflow.com/a/4579228/522169
haystack.lastIndexOf(needle, 0) === 0
// document.getElementById is faster than document.querySelector
document.getElementById('id');
// Use x | 0 instead of Math.floor
// from https://hacks.mozilla.org/2013/05/optimizing-your-javascript-game-for-firefox-os/
var x = 5.4563432 | 0; // x = 5;
// A list of comprehensive bitwise optimizations (using bitwise operations for common math functions
// instead of the native ones)
https://galacticmilk.com/journal/2011/11/bitwise-gems-and-other-optimizations/
// Array.filter() faster than filtering "manually" with a for loop:
// https://www.measurethat.net/Benchmarks/ShowResult/88
// Trim last character: slice is fastest
// https://jsperf.com/trim-last-char
var str = "Dollar$";
str = str.slice(0,-1); // str = "Dollar"
// if you have a function working on an array, the best place to check for the length of the array - is inside of the function in the
// beginning. It is FASTER than first checking for length outside and then calling - and it is FASTER than initializing a for loop
// for an empty array. Also tested and measured on NodeJS
// https://jsperf.com/where-to-check-length
function iterate(arr) {
if (arr.length === 0) return;
}
@fr0gs

This comment has been minimized.

Copy link

@fr0gs fr0gs commented Jun 3, 2016

I've seen somewhere that when doing a simple for loop, it is more performant
to count backwards, but I've always been to lazy to check.
for (let i=10; i>0; i--)

is more performant than

for (let i=0; i<10; i++)

Also, in very big arrays it is nice to cache the length of the array when looping over them.
I wrote a post a while ago if you are curious! http://estebansastre.com/blog/index.php?controller=post&action=view&id_post=25

@JustalK

This comment has been minimized.

Copy link

@JustalK JustalK commented Apr 25, 2018

Counting backward, it's not really more performant. It's just "better" because you can write it this way (remember 0 means false) :

for (let i=10; i--;)

Less character, only one variable and testing the value (not an expression).
By the way, since the last version of browser : let and var have the same performance.

@grundmanise

This comment has been minimized.

Copy link

@grundmanise grundmanise commented Jan 21, 2020

// Array literal (= []) is faster than Array constructor (new Array())
// http://jsperf.com/new-array-vs-literal/15
var array = [];

Assigning to the array of predefined length is much faster: https://jsperf.com/array-assignment-predefined

@yuval-a

This comment has been minimized.

Copy link
Owner Author

@yuval-a yuval-a commented Jan 29, 2020

// Array literal (= []) is faster than Array constructor (new Array())
// http://jsperf.com/new-array-vs-literal/15
var array = [];

Assigning to the array of predefined length is much faster: https://jsperf.com/array-assignment-predefined

Thanks, I'm adding it.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment