10 JavaScript Performance Tips
If you develop web sites which are used by millions of users, JavaScript performance is critical. A JavaScript intensive web site that takes a long time to load can be annoying and frustrating . Here are ten simple strategies I typically use to improve JavaScript performance.
1. Keep it linear.
It is important to avoid nested for/while loops. Remember JavaScript is an interpreted language and the browser has to work hard behind the scenes to process the code. If you do need to use nested loops ensure you are not iterating through thousands of objects. This may seem like common sense but you would be surprised how often this is done, especially when there’s a strict deadline.
Avoid using
{
for(var j=0; j < m; j++)
{
// some code here
}
}
2. Use object-oriented JavaScript.
JavaScript is not a true object-oriented language. There are no classes or inheritance. However there are efficient ways to mimic such behavior. By using OOP design your code will be easier to follow, read, debug and modify. It will even be easier to reuse the code in other applications. See John Resig Simple JavaScript Inheritance or search for “JavaScript Inheritance” for details.
3. Cache objects
Cache objects if you are using it multiple times. For example if you are using a global array in a loop JavaScript has to search for the variable outside of the function. Consider the code below which initializes an array of events. The events array has been declared elsewhere in the code.
For instance, instead of using
initializeEvents: function()
{
for (var i=0, n = events.length; i < n; i++ )
{
events[i].initialize();
}
},
Use this
initializeEvents: function()
{
// cache the events array
var _events = events;
for (var i=0, n = _events.length; i < n; i++ )
{
_events[i].initialize();
}
},
4. Declare local variables with var
It is important to declare local variables with var in functions and loops. This helps JavaScript to find variables faster.
Instead of using
// … some code here
var myFunction : function()
{
for (i=0; i < n; i++)
{
// some code here
}
}
Use this
{
// some code here
}
5. Combine JavaScript files
Combine all of your JavaScript files into a single file. This will reduce the number of requests the browser needs to make when loading your web page. It is good practice to create a script that will do this for you automatically when deploying your code. This way you can still keep your code organized in separate files for development purposes.
6. Minify your code.
Minifying your code removes unnecessary characters for your JavaScript code, such as line breaks, comments, whitespace, etc. The minified code will have a much smaller file size. This will reduce bandwidth and the file will take less time to download for users The JavaScript code should be minified before it is put on your production server. I typically use a script to minify development code but always keep both versions in the repository. Minifying JavaScript code is safe and should not break any existing code. See the Minify! project for PHP on Google Code for more information.
7. Enabled GZip on your server.
GZip compresses the web content or rendered web page which is sent to the user. The includes both HTML and JavaScript content. The browser will automatically decompress the data and display the web page. GZIP is an easy feature to enable on most web servers and will help make your pages load faster. However the feature might not be enabled by default. After enabling GZip you will notice a considerable difference in performance.
8. Move JavaScript to the bottom
Place your JavaScript code near the bottom on your page when possible. This will make your web pages load faster. Often it is not possible to do this and code which is used within your page should still be loaded at the top.
9. Use a Framework
Instead of writing all of your JavaScript code from scratch use a framework such as jQuery. The jQuery framework is used by millions of web sites around the world. It is an efficient and light-weight framework with many available plugins.
10. Use Array Hashing
Array hashes provide fast look up and storage for objects.
For instance say we have a collection of cars
var length = collection.length;
collection[collection.length] = car;
cars[car.getId()] = length;
// Now say we want to find the car with Id five we would use
var myCar = collection[cars[5]];
Array hashing can be extended to multi-dimensional arrays as well.