Jquery optimization-tips

$ will do everything for us

Naga HaRISH
ShareOurIdeas.com

Agenda
$ Few words about jQuery
$ Why we need it
$ Optimization tips
# Load jQuery
# Using Selectors
# And more

…more worth is waiting…!

$(jQuery)
$ this is a new kind of JavaScript Library.
$ It is a lightweight cross-browser (FF,GC,IE,OP,SF).
$ And it is the most popular JS library in use
today.
$ It was released in 2006 1st Half and current
version is 1.7.1

$.Next()

Each( features )
$ LESS CODE DO MORE
$ We can do Element Styling, Events Handling,
DOM manipulation, Animations and Ajax.
$ We can develop site rapidly. Because it was
ready with cool stuff.
$ It is most popular and many awesome plugins.
$ Having good Support and Documentation.

$(“.Tips”) - Load jQuery Script
$ Load minified file, because it small in size (31k
< 229k)
$ It is best to use Content Delivery
Network(CDN) URL
$ Let’s Google or Microsoft host jQuery file for U
# Google src http://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js
# Microsoft src http://ajax.microsoft.com/ajax/jquery/jquery-1.6.2.min.js
$ Forget About this if you work for local apps

jQuery.noConflict()
$ Use no conflict method when you using other
Libraries.
$ Eg:-
jQuery.noConflict()
jQuery(“#Slide6”).next()
(Or)
var $j=jQuery.noConflict()
$j(“#Slide6”).next()

Start method
$ Best to use jQuery ready method.
$ Because we can use it more times, where javascript
page onload is only once.
$(document).ready(function() {
//write your code here
}

(or)

$(function(){
//write your code here
});

Optimize performance, using selectors
$ Optimize selectors to descend from an ID, if
possible. E.g:- $(“#id ul li”).hide()
$ Use tag names when selecting classes E.g:-
$(“p.class”).show()

$ We can use comma(,) for multiple selectors
E.g:- $(“p, ul li,div).css(‘color’,’#000’)

More here http://api.jquery.com/?s=selector

Use Chaining
$ Take advantage of Chaining
$ Apply multiple effects and DOM manipulation
@ a time
Without Chaining With Chaining
$(document).ready(function () { $(document).ready(function () {
$('#id').css('color', #143'); $('#id').css('color',
$('#id').html(' Request'); #200').html(' Response')
$('#id').click(function () { .click(function () {
//something //something
}); });
}); });
“.css(), .html(…) and more” functions return a jQuery object that can be worked
on instantly. So we use it right away to set the other properties like click event
handler.

Use Caching
$ Caching is a great way to limit the number of
times we need to traverse the DOM to find
elements matched by the selectors.
Without Caching With Caching
$(document).ready(function () { $(document).ready(function () {
$('#id').css('color', #143'); var id=$('#id');
: id.css('color', #143');
If(isOk) :
$('#id').html(' Request'); If(isOk)
: id.html(' Request');
If(isEnable) :
$('#id').click(function () { If(isEnable)
//something id.click(function () {
}); }); //something
}); });

Click vs Bind vs Live
$ Click is to handle click event on element
$('#target').click(function() {
alert('Handler for .click() called.');
});
$ Bind is used to like same way, to add events.
But not only click event. We can create our
custom events too.
$('#foo').bind('click', function() { $(this).toggleClass('entered'); });
or
$('#foo').bind('valid', function() { //Todo}); and we can fire this
event like this $(‘#foo’).bind()

Click vs Bind vs Live
$ Live, will work same like Bind.
$ But, Bind can’t add event handler to run time
add elements.
$ Live will automatically adds handlers for new
elements.

Event delegation
$ Bind handler only once to the parent element
containing all the children meant to have
handlers.
Using Event delegation
Normal way $(document).ready(function () {
$(document).ready(function () { $('ul').delegate('click', 'li', function (e) {
$('ul li').click(function () { // if ($(e.target).is('li'))
$(this).toggleClass('hig $(e.target).toggleClass('highlight');
hlight'); });
}); }); });

$ Advantage of this is it will automatically bind
click event for new(runtime add) element too.

Minimize DOM manipulation
$ We have to minimize DOM operations (.append()
.prepend() .after() .wrap() and ..)

Without temp variable (full Without temp variable :-
DOM):- var myNumbers = $('#Numbers');
var myNumbers = var myString= '';
$('#Numbers');
for (i = 0; i < 1000; i++) {
for (i=0; i<1000; i++){ mystring += '<li>Number ' + i + '</li>';
myNumbers.append('Number }
' + i);
} myList.html(myNumbers);

Minimize DOM manipulation(cont..)
$ Use template for array items
$ !dea from Microsoft
$ jQuery add in documentation
$ More http://api.jquery.com/jQuery.template/
$ http://api.jquery.com/jquery.tmpl/

Use $(this) and this
$ $(this) is jQuery object
$ this is traditional HTML object

$(document).ready(function () {
$('ul li').click(function () {
$(this).toggleClass('highlight');
alert(this.innerHTML);
});
});

Use data
$ Useful. It allows you to bind data to DOM
elements without modifying the DOM.
$ For example:-
# $("div").data("message", "Done!");
# $("div").data("message");
OR
# <div data-error=“Error! :(“>…</div>
# $("div").data("error");

$(‘#Thanks’).show();

By Naga HaRISH
ShareOurIdeas.com
More you share, more you gain

Jquery optimization-tips

Recommended

More Related Content

What's hot (20)

Similar to Jquery optimization-tips (20)

Recently uploaded (20)

Jquery optimization-tips