Sunday, January 11, 2015

Best ways to use jQuery and increase jQuery performance level?

1.load jquery compressed
 

<script type="text/javascript" src="http://www.google.com/jsapi"></script><br/>
<script type="text/javascript"><br/>
/* and load minified jQuery v1.10.2 this way */<br/>
google.load ("jquery", "1.10.2", {unompressed: false});<br/>
/* this is to display a message box when the page is loaded */<br/>
functiononLoad () {<br/>
alert ("jQuery + loaded");<br/>
}<br/>
google.setOnLoadCallback (onLoad);<br/>
</script>
2.Click event change to live events



i)compare to click event live much faster than click
ii).Its works as dynamic content .Each time reattaching events its works piece of content
3.Best ways to use css in jquery its working fastly

$('').appendTo('head');
4.Array // Selecting all details buttons: var btn= $('#detailsa'); // We can loop though the collection:

for(int i=0;i<=btn.length;i++)
{
alert(btn[i]);
}
In case of performance, using a simple for (or a while) 
loop instead of $.each(), can make your code several times faster
5.$.proxy


<div id="container"style="display:none">
<button>Cancel</button>
</div>
And if you execute this code:
$('#container').fadeIn(function(){
// this points to #container
$('#container button').click(function(){
// this points to the button
$(this).fadeOut();
});
});
button event will disappear With $.proxy, you can write it like this:


$('#container').fadeIn(function(){<br />
// Using $.proxy to bind this:<br />
$('# container button').click($.proxy(function(){<br />
// this points to #container<br />
$(this).fadeOut();<br />
},this));<br />
});
6.Determine the weight of the page:

You can get a quick count of the number of DOM 
elements on your page by running this in your console: console.log( $('*').length );
The smaller the number, the faster the website is rendered. You can optimize it
by removing redundant markup and unnecessary wrapping elements


No comments:

Post a Comment