Yet Another Optimizing your Javascript

If you are javascript guru or you have been using javascript for a while, this post could be quite basic for you. But it could be a good review if you will.

First, let's talk about some techniques that without you writing any code.

1) Less is More

The more javascript file you have, the longer the download time for your users. The same goes for file size. So it is not good idea to include things that you don't really need. If you really need to include multiple javascript file, try to combine them together; or you can use third party tool to "bundle" it ( just another word for combine your file ). There are also tools that can minimize the file size for your javascript. Try googling words like "javascript minify" and give it a try. Just through minification and bundling, you should see a "significant" amount of performance increase for your site.

2) Where to place your "script" tag

It is usually preferable to place your "script" tag before the closing "body" tag. The reason is because javascript during its download will block the flow of your page. If you have a big javascript file and you place it at the "head" section, your page may show blank screen until your javascript file is downloaded. Unless your javascript code need to be run before the page loads, you should place them before the closing body tag . Btw, you don't really need to put "type" and "language" attributes in your script, because those are all implied.

3) Dynamic download or Loading on Demand

Another way of including javascript is using dymamic include (non-blocking ) or using a method call Lazy Loading (which is Loading on Demand ). This way, javascript only get called when it is needed. Try googling the terms "requireJS" and this is one of the tools doing this stuff. If you want to, you can roll out your own, it's just using javascript to create script tag on the fly.

4) Avoid using global variable

Make sure you use "var" when you declare a variable, or else it will become a global variable. And it is slow. The reason is because the interpreter needs to search for where your variable is declared in the code if it is global. Plus, a global variable have other potential problems besides speed, for example, namespace collision.

5) Cache your variable as needed

For example, if you need to access an array length in a loop, instead of calling "arrayX.length" everytime, you can cache that value in a variable, so there is no need to search for that value in every loop. In the same token, if you have a value or object needs to be accessed for multiple time, and if that value / object won't be changed, it is a good candidate to be cached.

6) Understand Delegation

For example, you have an unordered list of 100 links. Instead of binding each links a "click" event, you can just bind the click event to its parent, which is only 1 item. This way, it saves you coding time, and save the parse to search the DOM for 100 times. And that is what called Delegation.

7) Code Reusability

Understand how to reuse your code will definitely makes your code cleaner and you are writing less code. For starter, let's give you some keywords in this post. I will write another post on those later.

a) Inheritance - either Classical or Prototypal.

b) Borrowing other object method ( call, apply, bind )