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