Monday, March 28, 2011

High Performance Javascript

Here are some tips on high perfomance Javascript I have picked up. Most of it comes from the books High Performance Javascript by Nicholas C. Zakas and High Performance Web Sites by Steve Souders.


Load files at the end of the HTML page

Load the Javascript files right before the body, this will allow the page to render without having to wait for all the Javascript files.

Group files together

With normal loading, the files are loaded sequentially. Each file will be loaded and parsed before the next file starts to load. Merge them together into one large file. While you are at it, you should also minimize it. Tools to help you with this are:

Load files asynchronously

If normal loading with grouped files is not good enough, it is also possible to load the files asynchronously. This will also allow you to load files on demand. Tools for this are:

Variable Access

Literal values and local variables can be accessed very quickly. Array access and member access take longer. If the prototype chain or scope chain needs to be traversed, it will take longer the further up the chain the access is. Global variables are always the slowest to access because they are always last in the scope chain.

You can improve the performance of JavaScript code by storing frequently used, object members, array items, and out-of-scope variables, in local variables.


All DOM manipulation is slow.

  • Minimize DOM access
  • Use local variables to store DOM references you'll access repeatedly.
  • HTML collections represent the live, underlying document, so:
    • Cache the collection length into a variable and use it when iterating
    • Make a copy of the collection into an array for heavy work on collections

Reflow and rendering

The browser contains two trees, the DOM tree and a render tree. Whenever the DOM layout or geometry is changed the view will have to be re-rendered. This is known as reflow.

Reflow happens when:

  • Visible DOM elements are added or removed
  • Elements change position
  • Elements change size (margin, padding, border thickness, width, height, etc.)
  • Content is changed, (text changes or an image is replaced with one of a different size)
  • The page renders initially
  • The browser window is resized

Combine multiple DOM and style changes into a batch and apply them once. This can be done with documentFragments or by cloning the node.

// Create a document fragment 
var fragment = document.createDocumentFragment(); 
// Do something with framgment 
// Append the fragments children to the DOM 
// Clone Node 
var old = document.getElementById('mylist'); 
var clone = old.cloneNode(true); 
// Do something with clone 
// Replace node with clone 
old.parentNode.replaceChild(clone, old); 

Algorithms and Flow

Use algortithms with better complexity performance for large collections.

  • for-in loops are slower than for, while and do-while loops. Avoid for-in unless you need to iterate over a number of unknown object properties.
  • Lookup-tables are faster than multiple conditionals.
  • Recursion can be re-written with iteration if you get stackoverflow errors.

Strings and Regexes

Strings concatenation is quite fast in most browsers. In IE, you may need to use Array.join.

Regular expression can be improved by:

  • Focus on failing faster.
  • Start regexes with simple, required tokens.
  • Make quantified patterns and their following pattern mutually exclusive /"[^"]*"/.
  • Use noncapturing groups. (?:) instead of ().
  • Capture text to reduce postprocessing.
  • Expose required tokens /^(ab|cd)/ instead of /(^ab|^cd)
  • Resue regexes by assigning them to variables.
  • Split complex regexes into simpler pieces.


The total amount of time that a single JavaScript operation should take is 100. If it takes longer it needs to be split up, this can be done using timers.

Two determining factors for whether a loop can be done asynchronously using timers:

  • Does the processing have to be done synchronously?
  • Does the data have to be processed sequentially?
// Function for processing an array in parallel 
function processArray(items, process, callback) { 
  var minTimeToStart = 25; 
  var copyOfItems = items.concat(); 
  setTimeout(function() { 
    if (copyOfItems.length > 0) 
      setTimeout(arguments.callee, minTimeToStart); 
  }, minTimeToStart); 
// Function for processing multiple tasks in parallel 
function processTasks(tasks, args, callback) { 
  var minTimeToStart = 25; 
  var copyOfTasks = steps.concat(); 
  setTimeout(function() { 
    var task = copyOfTasks.shift(); 
    task.apply(null, args || []); 
    if (copyOfTasks.length > 0) 
      setTimeout(arguments.callee, minTimeToStart); 
  }, minTimeToStart); 

You should limit the number of high-frequency repeating timers in your web application. It is better to create a single repeating timer that performs multiple operations with each execution.

It is not recommended to have minTimeToStart less than 25 milliseconds, because there is a risk that the timers will fill up the queue.

// Timed version of process array, where each version is able to 
// process items from the array for up to 50 milliseconds. 
function timedProcessArray(items, process, callback) { 
  var minTimeToStart = 25; 
  var copyOfItems = items.concat(); 
  setTimeout(function() { 
    // (+) converts the Date object into a numeric representation 
    var start = +new Date(); 
    do { 
    } while (copyOfItems.length > 0 && (+new Date() - start < 50)); 
    if (copyOfItems.length > 0) 
      setTimeout(arguments.callee, minTimeToStart); 
  }, minTimeToStart); 

Newer browsers support web workers. Web workers does not run in the UI-thread and does not affect responsiveness at all. Their environment is limited to allow this to work. It is limited to:

  • A navigator object, which contains only four properties: appName, appVersion, user Agent, and platform.
  • A location object (same as on window, except all properties are read-only)
  • A self object that points to the global worker object
  • An importScripts() method that is used to load external JavaScript for use in the worker
  • All ECMAScript objects, such as Object, Array, Date, etc.
  • The XMLHttpRequest constructor
  • The setTimeout() and setInterval() methods
  • A close() method that stops the worker immediately

It is not possible to create a WebWorker from code. It needs to be started with its own javascript file. You can however communicate with it through events.

// Application code 
var worker = new Worker("code.js"); 
worker.onmessage = function(event) { 
// Worker code (code.js) 
//inside code.js 
importScripts("file1.js", "file2.js"); // importing some files 
self.onmessage = function(event) { 
  self.postMessage("Hello, " + + "!"); 

Any code that takes longer than 100 milliseconds to run should be refactored to use webworkers to decrease the load on the UI-thread.


Favor lightweight formats in general; the best is JSON and a character-delimited custom format. If the data set is large and parse time becomes an issue, use one of these two techniques:

JSON-P data, fetched using dynamic script tag insertion. This treats the data as executable JavaScript, not a string, and allows for extremely fast parsing. This can be used across domains, but shouldn't be used with sensitive data.

A character-delimited custom format, fetched using either XHR or dynamic script tag insertion and parsed using split(). This technique parses extremely large datasets slightly faster than the JSON-P technique, and generally has a smaller file size.

XML has no place in high-performance Ajax.

Cache data! The fastest Ajax request is one that you don't have to make. There are two main ways of preventing an unnecessary request:

  • On the server side, set HTTP headers that ensure your response will be cached in the browser.
  • On the client side, store fetched data locally so that it doesn't have be requested again.

Multipart XHR can be used to reduce the number of requests, and can handle different file types in a single response, though it does not cache the resources received.

Some more guidelines that will help your Ajax appear to be faster:

  • Reduce the number of requests you make, either by concatenating JavaScript and CSS files, or by using MXHR.
  • Improve the perceived loading time of your page by using Ajax to fetch less important files after the rest of the page has loaded.
  • Ensure your code fails gracefully and can handle problems on the server side.
  • Know when to use a robust Ajax library and when to write your own low-level Ajax code.

Programming Practices

  • Avoid the use of eval() and the Function() constructor.
  • Pass functions into setTimeout() and setInterval() instead of strings.
  • Use object and array literals when creating new objects and arrays.
  • Avoid doing the same work repeatedly.
  • Use lazy loading or conditional advance loading when browser-detection logic is necessary.
  • When performing mathematical operations, consider using bitwise operators that work directly on the underlying representation of the number.
  • Native methods are always faster than anything you can write in JavaScript.

Building and Deploying

The build and deployment process can have a tremendous impact on the performance of a JavaScript-based application. The most important steps in this process are:

  • Combining JavaScript files to reduce the number of HTTP requests
  • Minifying JavaScript files using the YUI Compressor
  • Serving JavaScript files compressed (gzip encoding)
  • Making JavaScript files cacheable by setting the appropriate HTTP response headers
  • Work around caching issues by appending a timestamp to filenames
  • Using a Content Delivery Network to serve JavaScript files;
  • All these steps should be automated using build tools





  • Firebug
  • Internet Explorer Developer Tools
  • Safari Web Inspector
  • Chrome Developer Tools


Tuesday, March 01, 2011

Host Specific Routing Via the iPhone on OSX

If you are working as a consultant, it is sometimes not easy to get proper network access when you are using your customer's network. The easiest way to solve this problem is to connect via your mobile phone. But, the 3G network is not always the fastest and it would be nice to use the normal network for certain tasks and the 3G network for others.

The problem in my case was that I wanted to connect to Github but, SSH traffic was blocked on the network where I was working. So what to do? I quick mail to the Jayway tech mailing list, lets me know that in Linux there is a route command, that can solve this problem. (Un)Fortunately I am not using Linux on my development machine, but it turns out there is a route(8) command in BSD too, with slightly different syntax.

Find the IP-address of the host I wish to connect to

# Find the IP-address of the host I wish to connect to 
$ nslookup
Non-authoritative answer: 

Find out the gateway of the interface of the cell phone

# Find out the gateway of the interface of the cell phone 
$ ifconfig
lo0: flags=8049<UP,LOOPBACK,RUNNING,MULTICAST> mtu 16384 
 inet netmask 0xff000000 
 inet6 ::1 prefixlen 128 
 inet6 fe80::1%lo0 prefixlen 64 scopeid 0x1 
 ether 00:50:56:c0:00:08 
 inet netmask 0xffffff00 broadcast 
 ether 06:1e:64:00:34:1a 
 inet6 fe80::41e:64ff:fe00:341a%en3 prefixlen 64 scopeid 0xa 
 inet netmask 0xfffffff0 broadcast 
 media: 10baseT/UTP
 status: active

In my case the interface I want to use is the last one, en3 with inet but if you are unsure, you can open the network preference pane and look it up there.

Now I need to find out what the gateway for this interface is. I can do this with netstat -r.

# Show the routing table 
$ netstat -r
Routing tables
Destination        Gateway            Flags        Refs      Use   Netif Expire
default         UGSc           10        0     en1
default          UGScI           0        0     en3
10.67.10/24        link#5             UCS             3        0     en1        localhost          UHS             1      811     lo0       0:14:4f:69:da:13   UHLWI          10       41     en1    661       link#5             UHLWbI          1       78     en1 
127                localhost          UCS             0        0     lo0
Destination        Gateway            Flags         Netif Expire
localhost          localhost          UH              lo0
fe80::%lo0         localhost          Uc              lo0
localhost          link#1             UHL             lo0 

Close to the top we find the entry for our interface en3.

default          UGScI           0        0     en3

Now we have the ip to the gateway that we wanted. So now the last step is to make sure that access to is routed via this gateway.

#route command -host destination gateway 
$ sudo route add -host 
add host gateway 

That's it, I'm done. To make sure the routing is changed I check the routing table with netstat -r again, to make sure the new entry is in it.

$ netstat -r
Routing tables
Destination        Gateway            Flags        Refs      Use   Netif Expire
default         UGSc           30        0     en1
default          UGScI           0        0     en3
10.67.10/24        link#5             UCS             4        0     en1        localhost          UHS             0      973     lo0       0:14:4f:69:da:13   UHLWI          27       11     en1    708       ff:ff:ff:ff:ff:ff  UHLWbI          1       14     en1
127                localhost          UCS             0        0     lo0
...        UGHS            0       43     en3
Destination        Gateway            Flags         Netif Expire
localhost          localhost          UH              lo0
fe80::%lo0         localhost          Uc              lo0
localhost          link#1             UHL             lo0 
fe80::%en0         link#4             UC              en0 

Sure enough, there it is, Finally I can now git pull and everything works :).

If I want to remove the entry, when I'm working elsewhere, I do that with

$ sudo route delete -host