jQuery - Doing it right

jQuery
Doing it right
Girish Gangadharan
@appoosa
girish@giri.sh
http://giri.sh

Tools for the trade
Proper tools = Enhanced productivity + Makes work fun
Firebug is your best friend (Can’t believe it’s free!)
Chrome Developer Tools
IE Web Developer Toolbar
Fiddler

Sizzle
Selector engine used by jQuery created by John Resig.
Now spun off to its own project – http://SizzleJS.com
Completely standalone (no library dependencies)
Only 4KB minified and gzipped
Highly extensible with easy-to-use API

Writing better selectors
Speed up performance with better queries
ID selector is the fastest
Use tag names in selectors
Be more specific on the right side query
Don’t overdo the selectors

Is the DOM ready?
Well, should you wait?
Not everything needs to be done in $(document).ready().
$(document).ready(function () {
//Do stuff here that can be done only after the DOM is loaded
});
$('#container a').click(function () {
//Do other stuff here
});

Cache is awesome
Use it as often and as much as you can
Limited DOM traversal = Better performance
var $h2s = $('#container h2');
$h2s.css('border', '1px solid #666666');
$h2s.click( function() {
$(this).next('div').slideToggle();
});

'Context' is fast. 'Find' is faster.
Try not to involve the Sizzle engine if you can
$('child', $('#parent'));
(internally calls)
$('#parent').find('child');

Chaining
Less code. Better readability.
$('p#elementId')
.css('border', '3px dashed yellow')
.css('background-color', 'orange')
.fadeIn('slow');

Bind() Vs Live() Vs Delegate()
Understand what each does. Use appropriately.
$('#sometable').each(function(){
$('td', this).bind('hover', function(){
$(this).toggleClass('hover');
});
});
$('#sometable').each(function(){
$('td', this).live('hover', function(){
});
});
$('#sometable').delegate('td', 'hover', function(){
});

Native calls Vs jQuery
Native calls are always faster even if a tad bit
For example,
$(this).attr('id'); // Fast
this.id; // Faster

Limit DOM manipulation
Create what you need in memory. Then update the DOM.
BAD
var $mylist = $('#mylist'); // <ul>
for (vari = 0; i < 100; i++) {
$mylist.append('<li>' + bestsellers[i] + '</li>');
}
GOOD
var $mylist = $('#mylist'); // <ul>
varconcatenatedList = “”;
for (vari = 0; i < 100; i++) {
concatenatedList += ('<li>' + bestsellers[i] + '</li>');
}
$mylist.append(concatenatedList);

Event delegation
Bind fewer events to the elements for better performance.
BAD
$('#myListli).bind('click', function() {
// do stuff
});
GOOD
$('#myList).bind('click', function(e){
var target = e.target;
if (target.nodeName === 'LI') {
// do stuff
}
});

Some more little tips
Some of these are clever. But may not apply in all the cases.
Lazy loading content
Use data() to store state
Take advantage of CDNs
Compress your source files

Wait a second…
How much performance improvement are you likely to see using these tips?
Probably not a lot, especially if you don’t have a complex multi-nested DOM
Always better to focus on the design & architecturerather.
For example, how to better structure your code.
Module Pattern
Revealing Module Pattern
Constructional Pattern
Creational Pattern
Factory Pattern
etc.
Fantastic book on JS patterns: http://addyosmani.com/blog/essentialjsdesignpatternsupdate1

Let’s play with Firebug a little.

Questions?

jQuery
Doing it right.
Thank you.
Girish Gangadharan
@appoosa
girish@giri.sh
http://giri.sh

jQuery - Doing it right

by girish82 on May 13, 2011

Accessibility

Categories

Tags

Upload Details

Usage Rights

2 Embeds 49

Statistics

jQuery - Doing it right — Presentation Transcript

http://giri.sh	48
http://feeds.feedburner.com	1