Jquery optimization-tips
-
Upload
anubavam-techkt -
Category
Technology
-
view
2.093 -
download
0
description
Transcript of Jquery optimization-tips
$ will do everything for us
Naga HaRISHShareOurIdeas.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
DEMO
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()
DEMO
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});
DEMO
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
DEMO
Use Chaining
$ Take advantage of Chaining$ Apply multiple effects and DOM manipulation
@ a timeWithout Chaining$(document).ready(function () { $('#id').css('color', #143'); $('#id').html(' Request'); $('#id').click(function () { //something });});
With Chaining$(document).ready(function () { $('#id').css('color', #200').html(' Response') .click(function () { //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.
DEMO
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$(document).ready(function () { $('#id').css('color', #143');
:If(isOk) $('#id').html(' Request');
:If(isEnable) $('#id').click(function () { //something }); });
With Caching$(document).ready(function () {var id=$('#id');id.css('color', #143');
:If(isOk) id.html(' Request');
:If(isEnable) id.click(function () { //something }); });
DEMO
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.
$ Advantage of this is it will automatically bind click event for new(runtime add) element too.
Normal way$(document).ready(function () {$('ul li').click(function () {
$(this).toggleClass('highlight');}); });
Using Event delegation$(document).ready(function () {$('ul').delegate('click', 'li', function (e) { // if ($(e.target).is('li')) $(e.target).toggleClass('highlight'); });});
DEMO
Minimize DOM manipulation
$ We have to minimize DOM operations (.append() .prepend() .after() .wrap() and ..)
Without temp variable (full DOM):-var myNumbers = $('#Numbers'); for (i=0; i<1000; i++){ myNumbers.append('Number ' + i); }
Without temp variable :-var myNumbers = $('#Numbers'); var myString= ''; for (i = 0; i < 1000; i++) { mystring += '<li>Number ' + i + '</li>'; } 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/
DEMO
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);});});
DEMO
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");
DEMO
$(‘#Thanks’).show();
Thank you
By Naga HaRISHShareOurIdeas.comMore you share, more you gain