Hi Vijitha, thanks for the welcome words and the question. Funny thing, my daily job at Yahoo! is in the Exceptional Performance team and web optimization is
what we do In the book, there are scattered hints and best practices about optimization, but there's no section specifically dedicated to this topic.
I would put the javascript optimizations into three categories:
deliveryDOM manipulationslow-level micro optimziations The
delivery is how the JavaScript code is served to the browser, this is high impact, low effort optimization. All you need to do is:
merge all scripts into one fileminify the scriptsenable gzip compressionimplement "never expires" policy - add a far future Expires headerput scripts at the bottom of the HTML or use an alternative loading technique These are easy wins that give an instant result. Our team has documented these as
performance best practices.
Then you have
DOM manipulations, these tend to be the most expensive things you can do in the browser with javascript. You can cache references to DOM elements, update the part of the DOM tree that you need "offline" before you stick it back to the main tree and so on. A really nice resource is
this talk here, slides are available too. Responding to browser events is also something I consider in this category.
Finally there are
micro optimizations which are high effort, relatively low impact activities, such as optimizing loops or
string concatenations. These will rarely give a noticeable result, unless there are some extremities in the code
. Also browsers tend to improve their engines (Firefox just
added a JIT compiler to 3.1, IE8 fixed string concatenation
among others), so these improvements get even less important with time and may even become counter-optimizations. And if they come at the price of readability and maintainability, they should definitely be avoided.