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

Content Delivery Network

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 workedon instantly. So we use it right away to set the other properties like click eventhandler.

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 HaRISHShareOurIdeas.comMore you share, more you gain

Jquery optimization-tips

by anubavam-techkt on Jan 23, 2012

Accessibility

Categories

Tags

Upload Details

Usage Rights

Statistics

Jquery optimization-tips — Presentation Transcript