JavaScript: Short Performance Tips

1. Use a document fragment to insert additional all at once.

• Each new addition to the DOM causes document "reflow", which can really hinder user experience.
• Fragments are invisible containers that hold multiple DOM elements without a node.

Bad Performance

let list = document.getElementById("kotwList");
let kotw = ["Simon","Alvin","Melvin","Shelman"];
for(let i=0, x=kotw.length; i < x; i++){
  var element=document.createElement("li");
  element.appendChild(document.createTextNode(kotw[i]));
  list.appendChild(element);
}

Good Performance

let list = document.getElementById("kotwList");
let kotw = ["Simon","Alvin","Melvin","Shelman"];
let fragment = document.createDocumentFragment();

for(let i=0, x=kotw.length; i < x; i++){
  var element=document.createElement("li");
  element.appendChild(document.createTextNode(kotw[i]));
  fragment.appendChild(element);
}

list.appendChild(fragment); // Only one DOM touch.

2. Declare variable as few times as possible. 

• Every var keyword adds a lookup for the JavaScript parses that can be avoided with common extension.

Bad Performance

var name;
var age;
var birthday;

Good Performance

var, name, age, birthday;