Client-Side Optimization in JavaScript

Compressors

First thing we must do to optimize client-size loading is compress files with our code. There are three JavaScript code compressors today:

1. Microsoft AJAX Minifier (http://ajaxmin.codeplex.com/)

2. Google Closure Compiler (http://code.google.com/closure/compiler/)

3. UglifyJS (https://github.com/mishoo/UglifyJS)

Each of these compressors has its own futures. When you decide what compressor you will use you must read futures of each compressor.

CDN

Earlier I didn’t use CND (content delivery network) for my project. But now I think using CDN will make faster loading for users.

For instance I will use jQuery library in my project and I can load this library from http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js. It can increase loading speed for user if user has already been in other site which used the same library. This library has already been loaded to user’s cache and when user will come to our page his browser just get this library from cache and won’t load it from our server.

documentFragment

When you have to add big piece of code in DOM then you’d better use documentFragment object.c

var fragment = document.createDocumentFragment();

var heading = fragment.appendChild(document.createElement('h1'));

heading.appendChild(document.createTextNode('Quotes by Yoda'));

var blockquote = fragment.appendChild(document.createElement('blockquote'));

var p = blockquote.appendChild(document.createElement('p'));

p.appendChild(document.createTextNode('Always two there are'));

document.getElementsByTagName('body').item(0).appendChild(fragment);

The example above creates a document fragment, adds some HTML to it, then appends the entire sub-tree to the <body> of the main document. The DocumentFragment interface inherits from Node, and is a lightweight version of the Document interface, intended for temporary storage of DOM structures. For example, it can be used as temporary canvas for building a group of nodes or to store a group of nodes while moving it from one part of a document to another.

Pavel, .NET developer

Binary Studio

We are more than happy to hear from you