on Jun 5th, 2007Suffer from bloat ? try these techniques to improve performance

All you javascript programmers, are you one of those people who are bitten by the RIA bug and write endless lines of JS code and include 200Kb header or bootstrap files. Then you suffer from bloat, a condition in which a content 3kb in size brings with it 300kb of javascript for presentation purposes. Bloat is exhibited by Gmail or any of the latest google applications , which while opening sometimes makes your browser really sluggish and non responsive.

Its not so bad in the real world. There are techniques being thought of to reduce the memory footprint of these mamoth js bootstraps. First step would definitely be to use the right library , if you use dojo make sure you use the right flavor of dojo like dojo for ajax or dojo for UI etc. There is no point in having functions bloating if they arent used at all. Next step would be use some brains and filter out unwanted functions in your bootstrap files. Its not that hard I guess, get your self Venkman or the recent firebug and you can be on and reducing in no time.

Now for the real deal:

1. use Dojo Shrink safe to reduce, compress and pack all your js files together. Most of the times your file reduces by almost a third using this. This utility doesnt obfuscate so you can call the same methods and not worry about changing function names.

2. Use Dean Edwards packer to further reduce the size by removing linebreaks and other unwanted characters. This usually reduces the file by another 20%

But make sure you always have a backup of the files. As most of these things are unreversible. These are just performance optimizers, they dont help your programming.

In the worst case, if you still a Kb or two short of your SLA then go ahead and obfuscate your code. Packer does a little bit but there are some really neat ones out there that can do a wonderful job. whats the advantage you ask ? a function OnWindowFocusAndDoubleClick() will get replaced by say g() , now thats improvement.

I found this utility which does reduction, try it out :  jsjuicer 

Trackback URI | Comments RSS

Leave a Reply