Lucikly there is a website called jsperf.com which allows you to test & compare different blocks of code against each other, and see the results of each – recording how fast each block ran in which browser. Here are some simple but handy tips.

Document Ready

http://jsperf.com/ready/2

When calling for jQuery to fire when the whole page has loaded – aka on document ready – there are a few options available to initiate this. The test shows that the quickest, by quite a way is:

A better .each() loop

http://jsperf.com/jquery-each-vs-quickeach

Looping through X amount of the same element can be quite time intensive, especially if you’re doing manipulation in each loop. The built in .each method does a decent job, but James Padolsey at jsperf has taken advantage of object caching to create a faster loop extension, called .quickEach:

CSS3 Selector vs Jquery

http://jsperf.com/jquery-css3-not-vs-not

Ok, so this is a test for the latest browsers (which you should be on anyway) but this test shows that using a CSS3 selector to help jQuery navigate the code is quicker than relying on the library itself.

Switch vs If/Else

http://jsperf.com/switch-if-else

Quite an interesting one, this. It seems that an if/else conditional block is faster, in all browsers, than a switch/case block – remember this if you’ve got a switch/case block in a loop.

jQuery selector vs normal javascript

http://jsperf.com/getelementbyid-vs-jquery-id/5

This is a bit obvious this one, but one that is often forgotten. This test proves that, if you can, using standard javascript is always preferable if you’re optimizing as it doesn’t require the loading of a large library before firing. Although jQuery is very useful for pretty much all web JS development, there is absolutely no excuse for using jQuery to just select a canvas element.