Skip to content

Instantly share code, notes, and snippets.

@dasdany
Forked from yuval-a/js-micro.js
Created January 25, 2018 08:36
Show Gist options
  • Save dasdany/dc5b259dfd5611ec37c350167988675f to your computer and use it in GitHub Desktop.
Save dasdany/dc5b259dfd5611ec37c350167988675f to your computer and use it in GitHub Desktop.
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"
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment