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; | |
} |
This comment has been minimized.
This comment has been minimized.
Counting backward, it's not really more performant. It's just "better" because you can write it this way (remember 0 means false) :
Less character, only one variable and testing the value (not an expression). |
This comment has been minimized.
This comment has been minimized.
Assigning to the array of predefined length is much faster: https://jsperf.com/array-assignment-predefined |
This comment has been minimized.
This comment has been minimized.
Thanks, I'm adding it. |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
This comment has been minimized.
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