Prototype Javascript optimization to get best performance

Although Prototype comes with very convenient and short cut methods to let you create ajax applications and other JavaScript that manipulates well of the DOM structure, but there will be some significant degradation in performance in some of these methods.

Some tips and those “NOT SUPPOSED TO DO” have been given by Thierry Schellenbach as listed below after he’s played with the functions console.profile() / console.profileEnd() in his Prototype applications.

* Avoid using $$ and event binding
* Some Prototype functions sucks , slow down a lot of the performance such as using element.innerHTML=’Hello World’ could be 60 times much faster in performance than using Prototype’s function: element.update(‘Hello World’) over large HTML document
* Similar to the above, Write to innerHTML instead of using document.createElement
* Use for loops instead of for in loops
* Use Array.join instead of += on a string
* Cache variables and functions
* Limit the usage of eval
* Limit the usage of Try Catch statements
* When manipulating the DOM copy the element out of DOM change it and stick it back in

We’ve told you before that it’s best to fully utilize the Prototype since it’s an over 100K file included in your web page. It’d be a waste if you don’t fully utilize them. But if it gives you poor performance, the best is not to use. Of course for the developers, if you fully utilize all the functions and short cuts in Prototype, you’ll end up with a beautiful and nicely organized piece of JavaScript code. But to the users of your web app, it simply sucks due to the poor performance. To me, use the native methods of the JavaScript instead of relying on a fancy library or framework such as Prototype.

Remember, your boss will only listen to the comments of the users and how marketable the app is to the end users. If it’s a slow performing app, no matter how nice that you’ve got the code organized and beautified, it won’t add points eventually!

Enter your email address to subscribe our newsletter or feed for FREE:

Delivered by FeedBurner

Bookmark with:

[Delicious]    [Digg]    [Reddit]    [Facebook]    [StumbleUpon]

0 Responses to “Prototype Javascript optimization to get best performance”

  1. No Comments

Leave a Reply

You must login to post a comment.