1. How to select your selector ?
There are various ways of selecting a DOM element in jQuery, but performance depend on how we select our selector.faster to slower-$(“#id”) - This is the fastest way of selecting a DOM element.because it uses native document.getElementId() method.
$(“tagName”) - Use of tag name for selector is also very fast, such as for better performance we can use $(“p”), because it uses native document.getElementsByTagname() method.
$(“.class”) - This also a fast selector but slow in older versions of IE.It uses native document.getElementByClassName() method. because all above methods have their respective native methods so they are very fast.
$(“[attribute=name]”) - Selection by using attribute is slow because it does not have any native method in JavaScript.
$(“:hidden”) - This is the most powerful but slowest selector in all of above so be careful when we use pseudo-selectors.
2. How to use jQuery Object for Chaining ?
An important fact about jQuery is that its almost all methods returns a jQuery object, its mean we can use multiple methods in a single line.It will make our code slightly shorter and more faster.Example:$(“obj”).addClass(“try”);
$(“obj”).css(“color”,”red”);
$(“obj”).height(100);
by using chaining we can minimize our code as :
$(“obj”).addClass(“try”).css(“color”,”red”).height(100);
3. How to use Cache ?
If you are using a selector more than one times in your code then its better to use caching in your program.It will improve your program performance.$(“multiply”).find(“id”).addClass(“plus”);
$(“multiply”).find(“id”).removeClass(“plus”);
by using Cache:
var multi = $(“multiply”).find(“id”);
multi.addClass(“plus”);
multi.removeClass(“plus”);
by using cache and chaining both:
var multi = $(“multiply”).find(“id”);
multi.addClass(“plus”).removeClass(“plus”);
4. How to handle events in better way ?
“Event-listeners cost memory”Whenever we are writing a event-listener than always kept in mind the above statement.
Commonly in our code we uses hundreds of event-listener and jQuery provides us various method for that but how to use efficiently these methods is upto us.Example:
$(“table”).find(“td”).click(function(){
$(this).toggleClass(“active”); })
Here, we are binding an event to each “td” of table which will take more memory,instead of that we can use “on” method which wrap-up functionality of all jQuery’s previous event-listeners (.bind(),delegate(),.live()). additionally “on” support some other parameters also which helps in delegation.
$(“table”).find(“td”).on(“click”,function(){
$(this).toggleClass(“active”); })
but in above still we are binding our event with each “td” again wastage of memory, so we can use in such a manner.here we are binding event with our table not in a particular “td”,so here we reduced our memory uses.
$(“table”).on(“click”,”td”,function(){
$(this).toggleClass(“active”);})
5.How to separate “CSS” and “jQuery” ?
Instead of changing appearances by jQuery directly, we can use CSS classes for changing appearances.$(“table”).css(“color”,”red”);
Instead of that we should make a CSS class and then use jQuery methods to implement that class.Such as:
CSS class:
.red{
color:red;
}
jQuery:
$(“table”).addClass(“red”);
It will provide us more flexibility, we can easily remove that css whenever required.
6. How to store data in jQuery ?
.attr or .data - Many of us use .attr method for storing data, which is not a good practice.Instead of that we should use .data method for storage. .attr method is for manipulating the attribute.So:$(‘selector’).attr(‘alt’, ‘this is the data that I am storing’);
// then later getting that data with
$(‘selector’).attr(‘alt’);
Here we are storing data with HTML, which are not meant to be.Instead of that we store data in our javaScript code,which is a better idea.
Instead of that we should use:
$(‘selector’).data(‘meaningfullname’, ‘this is the data I am storing’);
// then later getting the data with
$(‘selector’).data(‘meaningfullname’);
Updation continue in this article @ click you can send your suggestion on java.ansh@gmail.com .
