Faster JavaScript

JavaScript is a very important language for now and the future. Nowadays, there is no page that does not include some JavaScript code in it. Moreover, code written in JavaScript increases day by day. The more JavaScript code we have in our web pages, the worse performance we observe. This occurs because of some tricks in JavaScript as a language. In this writing, I will try to explain what are the problems and what possible solution we can have. Before going into detail, let me explain what I am going to talk about. The first one will be about scoping, second will be libraries and last one is DOM manipulation and properties.

JavaScript is a language that uses dynamic scoping. In each function, we have default scope variables (window, navigator, document) that are pushed onto our stack. After those, each local variable is pushed onto stack with a separate block. Using local scope variables is faster than the global scope variables. At that point, we prefer using local variables. Note that when creating a new variable, we should always use var, otherwise it becomes global.

function begin() {
  document.getElementById("div1");
  document.getElementById("div2");
  document.getElementById("div3");
}

function begin() {
  var doc = document;
  doc.getElementById("div1");
  doc.getElementById("div2");
  doc.getElementById("div3");
}

Furthermore, JavaScript provides closures where we can pass a variable to another function that is dynamically created. The variable comes from another scope, which may result in performance issues. Therefore, we should bind it to a local variable.

function addClick() {
  var div = document.getElementById("div1");
  div.addEventListener("click", function () {
    div.style.marginTop = "32px";
    div.style.color = "blue";
  }, false);
}

function addClick() {
  var div = document.getElementById("div1");
  div.addEventListener("click", function () {
    var localDiv = div;
    localDiv.style.marginTop = "32px";
    localDiv.style.color = "blue";
  }, false);
}

Our second point is JavaScript libraries. While libraries are helpful, they can become a bottleneck when performance matters. Iteration helpers such as each or foreach often create unnecessary function calls and stack frames compared to native loops.

Last but very important is DOM manipulation. Accessing deep properties such as element.style.color repeatedly slows execution. DOM access is expensive and should be minimized by caching references locally.

HTML collections such as those returned by getElementsByTagName are live and heavy. Repeated access to them is costly.

function updateDivs() {
  var divs = document.getElementsByTagName("div");
  for (var i = 0; i < divs.length; i++) {
    update(divs[i]);
  }
}

function updateDivs() {
  var divs = document.getElementsByTagName("div");
  for (var i = 0, length = divs.length; i < length; i++) {
    update(divs[i]);
  }
}

HTML updates are dynamic but costly. Creating and appending elements repeatedly forces layout recalculations. Instead, we can batch DOM changes using document fragments.

function appendDivs(element) {
  for (var i = 0; i < 10; i++) {
    var div = document.createElement("div");
    element.appendChild(div);
  }
}

function appendDivs(element) {
  var fragment = document.createDocumentFragment();
  for (var i = 0; i < 10; i++) {
    var div = document.createElement("div");
    fragment.appendChild(div);
  }
  element.appendChild(fragment);
}

The general idea is simple: use local variables, rely less on libraries when performance matters, and manipulate the DOM carefully.