Part 5.10Optimising JavaScript delivery

This part of this tutorial talks about minification and is very similar to the CSS article that talks about the same thing.

What minification is

Minification is the process of removing unnecessary content from a JavaScript file with the sole intention of reducing the amount of content sent to a client. By reducing the amount of the content the file size will become smaller which in turn reduces both the download size and download time, which is particularly useful for users with data caps and/or slow connection.

There are several online minification tools that automate the process, as well as server side scripts that can actual make the whole process even simpler.

As part of making the file smaller, removing certain things is necessary and a general rule comes into place:

Smaller file = faster download + lower readability

Whitespace

Perhaps the most important change that can be applied to JavaScript is the removal of whitespace.

Whitespace characters include the tabs that are placed around CSS, the space in between elements and new lines.

Consider the following:

var math_calc = 5 + 5;
if(math_calc > 9){
  alert(math_calc);
}

This could be condensed down to:

var math_calc=5+5;if(math_calc>9){alert(math_calc);}

Comments

Internal comments are used to make code more reabable and are strongly encouraged, but when it comes to download speeds, comments hinder this considerably.

Removing comments from the code will increase download times:

//Calculate the value
var math_calc = 5 + 5;
if(math_calc > 9){
  alert(math_calc);
}

This could be condensed down to:

var math_calc = 5 + 5;
if(math_calc > 9){
  alert(math_calc);
}

Semi-colons

Semi-colons are necessary for terminating a line, but as they are not necessary before a } symbol, there is no need for them at the end of the last statement in a function, if statement, loop, switch statement etc. The following sample has semi-colons as normal:

var math_calc = 5 + 5;
if(math_calc > 9){
  alert(math_calc);
}

But in this version, the semi-colon in the if statement after the alert has been removed:

var math_calc = 5 + 5;
if(math_calc > 9){
  alert(math_calc)
}

Although this is only one semi-colon, with multiple functions, if statements, loops and so on, this will make a considerable saving.

Naming conventions

As with CSS, names for variables and functions can be condensed in JavaScript to make the file size smaller. For instance a variable that is used locally and not globally can only be accessed within a single function and therefore the name doesn't need to be understandable when it is minified. For example:

function main(){
  var math_calc = 5 + 5;
  if(math_calc > 9){
    alert(math_calc)
  }
}

This can be condensed to:

function main(){
  var m = 5 + 5;
  if(m > 9){
    alert(m)
  }
}

Evaluating expressions

As well as all of the above, this code sample has one major issue - there is a mathematical expression that has not been evaluated.

Evaluating mathematical expressions like this saves space, but it's not often that this would be actually needed:

var math_calc = 10;
if(math_calc > 9){
  alert(math_calc)
}

One such example where this could be useful is when working out how many milliseconds there are in a day:

var ms = 1000 * 60 * 60 * 24;

This value is constant and will always result in . So substituting this expression will save help minify this:

var ms = 86400000;

Merging JavaScript files

Multiple JavaScript files being loaded at once can be useful since it is possible to asynchronously load JavaScript files, but it also has draw backs.

The most significant drawback to the multiple JavaScript files is down to the way that files are requested using the HTTP protocol since it adds headers such as cookies, GET requests and much more to each request. This adds several kilobytes of download and upload to each file.

With a single file, only one set of headers is sent each way. By merging JavaScript, the multiple header issue becomes less of a problem.

A good way to do this is with a server side language such as PHP:

<?php
	function combineJS() {
		$combined = file_get_contents("library.js") . file_get_contents("script.js");
		file_put_contents("output.js", $combined);
	}
?>