Javascript micro-optimizations

js-micro.js

NOTE: This document is OLD - and most of the tips here are probably outdated, since newer versions of Javascript have been
released over the years - with newer optimizations and more emphasis on optimizing newly supported syntax.


// 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;
}

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

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.

// 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

// 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.