25 steps to improve your jQuery and improve efficiency by a thousand times_jquery

1. Load jQuery from Google Code
Google Code has hosted a variety of JavaScript libraries. Loading jQuery from Google Code is better than loading it directly from your server. More advantages. It saves bandwidth on your server and can quickly load JS libraries from Google's Content Distribution Network (CDN). More importantly, if a user visits a site published on Google Code it will be cached.
This makes sense. How many sites use the same copy of jQuery that isn't cached, and this is easy to do, introduce:

2. Use the cheat sheet
Not only jQuery, many programming languages ​​also have similar cheat sheets, in an A4 It's easy to see how each function is used on paper. Fortunately, some kind people have already made a perfect jQuery cheat sheet:
http://www.gscottolson.com/weblog/2008/01/11/jquery-cheat -sheet/
http://colorcharge.com/jquery/

3. Consolidate all scripts and minify them
Yes, this is a common JavaScript trick. However, a large project that uses jQuery may use many related jQuery plug-ins (this site uses easing, localScroll, lightbox, preload), so it is usually applicable. Browsers cannot load JS scripts at the same time (in most cases), which means that if you load many scripts at the same time, it will slow down the loading speed of the page. Therefore, if these scripts are to be loaded on every page, you should consider consolidating these scripts into a slightly larger JS script before publishing. Some jQuery plugins are already minified, but you should package your JS scripts and those that are not minified, which only takes a few seconds to complete.
Personally, I recommend Packer by Dean Edwards

4. Use Firebug’s excellent console logging tool
If you don’t have Firebug installed yet, you really should. In addition to many other useful features (such as allowing you to inspect http traffic and find problems with your CSS), it also has excellent logging commands that allow you to easily debug JS scripts.
Here are detailed descriptions of all features of Firebug .
My favorite feature is "console.info", which allows you to output information and variable values ​​to the console without having to use alert;" console. time" allows you to set a timer on a set of code to calculate the time it takes for the JS script to run. It's all easy to do:

Copy the code The code is as follows:

console.time( 'create list');
for (i = 0; i var myList = $('.myList');
myList.append('This is list item ' i);
}
console.timeEnd('create list');

5. Minimize selection operations through caching
jQuery’s selectors are awesome. They are an extremely simple way to find any element on the page, but internally they have to go through a lot of steps to perform the selection operation, and if you use them incorrectly, you may find that everything slows down quite a bit.
If you select the same element again and again (e.g. in a loop), then you can select it once and put it in memory, while you can manipulate it in the core content. Look at the example below. Here we use a loop to add entries to UL:

Copy the code The code is as follows:

for (i = 0; i var myList = $('.myList');
myList.append('This is list item ' i);
}

This took 1066 milliseconds on my PC in Firefox 3 (imagine that in IE6!), which is quite slow for JavaScript. Now let's take a look at the following code, where we only use one selection operation:

Copy the code The code is as follows:

var myList = $('.myList');
for (i = 0; i myList.append('This is list item ' i) ;
}

It only took 224 milliseconds, which is nearly 4 times faster by moving one line of code.

6. Minimize DOM operations
We can make the above code run faster by reducing insertion operations into the DOM. DOM insertion operations (such as .append(), .prepend(), .after(), .wrap()) are quite time-consuming, and performing these operations will slow down the running of the program.
All we have to do is use string concatenation to construct a list of items and add the items to the list using a function, such as .html(). Please see the following example:

Copy the code The code is as follows:

var myList = $(' #myList');
for (i=0; imyList.append('This is list item ' i);
}

On my PC it took 216ms, which is just around 1/5 second. But if we use strings to construct list items, use the following HTML method to complete the insertion operation:

Copy code The code is as follows:

var myList = $('.myList');
var myListItems = '';
for (i = 0; i myListItems = '

This is list item ' i '

';
}
myList.html(myListItems);

It took 185 milliseconds, although not as fast A lot, but it also improved the time by 31 milliseconds.
7. When dealing with DOM insertion operations, wrap the required content in an element
Well, don’t ask me why I do this (I believe there is quite a An experienced programmer will explain it to you).
In the above example we use .html() to insert 1000 items into UL. If we wrap the items in a UL tag before the insert operation, and then insert the complete UL into another DIV tag, then we actually only insert one tag instead of 1000, which seems more efficient. Please look at the following example:

Copy code The code is as follows:

var myList = $(' .myList');
var myListItems = '

';

for (i = 0; i myListItems = '
• This is list item ' i '
';
}
myListItems = '

';
myList.html(myListItems);

Now The time taken is only 19 milliseconds, which is a significant 50x improvement over our previous first example.
8. Use ID instead of class whenever possible
jQuery uses classes to select DOM elements as easily as selecting by ID, so it is more free than before The use of classes for element selection operations is very attractive. However, since jQuery uses the browser's inherent method (getElementById) for selection operations, it is more advantageous to use ID for selection operations. How fast? let's see.
I took the previous example and modified it so that each LI we create has a unique class. Then I will iterate through it, selecting one element at a time:

Copy the code The code is as follows:

// Create our list
var myList = $('.myList');
var myListItems = '

';
for (i = 0; i myListItems = '
• This is a list item
';
}
myListItems = '

';
myList .html(myListItems);
// Select each item once
for (i = 0; i var selectedItem = $('.listItem' i);
}

As expected, my browser took 5066ms (over 5 seconds). So I modified the above code to use ID instead of class and then select by ID.

Copy code The code is as follows:

// Create our list
var myList = $('.myList');
var myListItems = '

';
for (i = 0; i myListItems = '
• This is a list item
';
}
myListItems = '

';
myList.html(myListItems);
// Select each item once
for (i = 0; i var selectedItem = $('#listItem' i);
}

It only took 61 milliseconds, almost 100 times faster

9. Provide context for selectors
By default, when you use a selector like $('.myDiv') it will search in the entire DOM document element, this comes at a significant cost.
When performing a selection operation, the jQuery function can specify a second parameter: jQuery(expression, context) By providing a context to the selector, the element search will be performed in this context instead of in the entire DOM document. Find elements.
To explain this, let’s use the first piece of code from before. It creates a UL with 1000 items, each with a separate class.
Then iterate and select one item at a time. You should remember that it takes more than 5 seconds to select all 1000 items by class.

Copy code The code is as follows:

var selectedItem = $('#listItem' i);

Then I added a context to it to perform the selection only in the UL:

Copy code The code is as follows:

var selectedItem = $('#listItem' i, $('.myList'));

Due to poor efficiency, still It took 3818 milliseconds, but still achieved a 25% speed increase with a small modification.
10. Use method chain correctly
One of the most cool features of jQuery is that jQuery can make continuous method calls. For example, you want to switch the class of an element:

Copy the code The code is as follows:

$('myDiv').removeClass('off').addClass('on');

If you are like me, you may be able to use it further after learning jQuery in the first five minutes it. First of all, it can still operate across lines (jQuery is JavaScript), which means you can write neat code like this:

Copy code The code is as follows:

$('#mypanel')
.find('TABLE .firstCol')
.removeClass('.firstCol')
.css(' background' : 'red')
.append('This cell is now red');

The habit of using linked lists will help you reduce your choices use of the device. However you can go deeper and use it if you want to perform several functions on one element, but change the element of operation in some way:

Copy code The code is as follows:

$('#myTable').find('.firstColumn').css('background','red');

We selected a table, found the cell with class "firstColumn" in it, and then made its background red.
Now we want to set the background of all cells with class "lastColumn" to blue. Because we have used the find() function to filter out all cells whose class is not "firstColumn", we need to use the selection operation on the table again. Can't we make continuous method calls? Fortunately jQuery provides the end() function, which changes the matched element list to the previous state so that you can execute the method list:

Copy code The code is as follows:

$('#myTable')
.find('.firstColumn')
.css('background','red')
.end()
.find('.lastColumn')
.css('background','blue');

Write a method that can chain calls Custom jQuery functions are also easy. All you do is write a function that modifies an element and returns an element.

Copy code The code is as follows:

$.fn.makeRed = function() {
return $(this).css('background', 'red');
}
$('#myTable') .find('.firstColumn').makeRed().append('hello');

It's very simple!

11. Learn to use effects correctly
When I first started using jQuery, I liked this very much: it can easily use predefined various Animation effects, such as slideDown() and fadeIn(). Since the animate() method provided by jQuery is very easy to use and powerful, it is easy for us to use it in depth. In fact, many methods in the jQuery source code achieve effects through the animate() function.

Copy code The code is as follows:

slideDown: function(speed,callback){
return this.animate({height: "show"}, speed, callback);
},

fadeIn: function(speed, callback){
return this.animate({opacity: " show"}, speed, callback);
}

The animate() method only acts on CSS, converting smoothly based on the value. So you can change width, height, opacity, background color, top, left, margin, color, font size and whatever you want.
It is easy to add height changes to menu items:

Copy the code The code is as follows:

$('#myList li').mouseover(function() {
$(this).animate({"height": 100}, "slow");
});

Unlike other jQuery functions, animation effects are automatically queued, so if you want to run a second effect after the first effect is completed, you need to call the animate method twice:

Copy code The code is as follows:

$('#myBox').mouseover(function() {
$(this).animate({ "width": 200 }, "slow");
$(this).animate({"height": 200}, "slow");
} );

If you want the animation effects to occur at the same time, you need to pass all styles into the method as a parameter object:

Copy Code The code is as follows:

$('#myBox').mouseover(function() {
$(this).animate({ "width" : 200, "height": 200 }, "slow");
});

You can animate properties whose values ​​are numbers. You can also download plug-ins to help you animate non-numeric properties, such as colors and background colors

12. Understanding event proxies
JQuery makes it easier than ever to seamlessly add events to DOM elements. This is a great feature, however adding too many events to an element is inefficient. In many cases event proxies allow you to achieve the same goal with a smaller number of events. The best way to explain is to use examples:

Copy code The code is as follows:

$(' #myTable TD').click(function(){
$(this).css('background', 'red');
});

When we click on the table The above code will make all cell backgrounds red. For example, if you have a grid with 10 columns and 50 rows, 500 events will be bound to it. Well, this is the time for the event proxy to appear:

Copy the code The code is as follows:

$('#myTable').click(function(e) {
var clicked = $(e.target);
clicked.css('background', 'red');
});

e' contains event information, including the target element that actually received the click event. All we have to do is check which cell was clicked. Quite clever!
Event proxies bring another benefit. Normally, when you bind an event to a collection of elements, the event is only bound to the collection elements. If you add new elements to the DOM, even though these new elements are matched by the selector, these new elements are not bound to event handlers (do you agree with me?), so no events will occur.
When using event proxies, you can still add multiple matched elements to the event after it is bound to the DOM, and they will still work normally.
13. Use classes to store state
This is the most basic way to store information in html. jQuery is good at manipulating elements based on classes, so if you need to store state information about an element, why not try using an additional class to store it?
Here is an example. We want to create an expanded menu. When you click the button, we want to expand and contract the menu through slideDown() and slideUp(). Please look at the HTML below:

Copy the code The code is as follows:

click me

• Menu item 1


• Menu item 2


• Menu item 3

> ;

Very simple! We just add an extra class to the wrapper DIV, which just tells us the status of the item. So all we need after the button is clicked is click event handling, which will execute the corresponding slideUp() and slideDown() methods.

Copy code The code is as follows:

$('.button').click(function( ) {

var menuItem = $(this).parent();
var panel = menuItem.find('.panel');

if (menuItem.hasClass("expanded ")) {
menuItem.removeClass('expanded').addClass('collapsed');
panel.slideUp();
}
else if (menuItem.hasClass("collapsed") ) {
menuItem.removeClass('collapsed').addClass('expanded');
panel.slideDown();
}
});

This is a very simple example, but you can add additional classes to an element or HTML fragment to store all kinds of information.
However, in addition to simple situations we should use the following technique.
14. A better way is to use jQuery’s built-in data() method to store the state
For some reasons, there is no good documentation in this regard. jQuery provides the built-in data() method, which, unlike DOM elements, can be used to store key/value type data. The storage of data is very easy:

Copy code The code is as follows:

$('# myDiv').data('currentState', 'off');

We modify the code of the previous example so that we can use the same HTML content (except without the "expanded" class) and Use the data() function to store the state:

Copy code The code is as follows:

$ ('.button').click(function() {

var menuItem = $(this).parent();
var panel = menuItem.find('.panel');

if (menuItem.data('collapsed')) {
menuItem.data('collapsed', false);
panel.slideDown();
}
else {
menuItem.data('collapsed', true);
panel.slideUp();
}
});

I believe you will also agree that the use of this method is indeed more sophisticated. For more information on data() and removeData(), please check out jQuery internals
15. Write your own selectors
jQuery has many built-in selectors for selecting by ID, class, tag, attribute and other elements. However, what can you do when you need to select elements based on some other content and jQuery does not provide this selector?
Well, one solution might be to add classes to the elements from the beginning, and then use these classes for element selection operations. However this has proven difficult to extend jQuery with new selectors.
The best way to explain is to use examples:

Copy the code The code is as follows:

$.extend($.expr[':'], {
over100pixels: function(a) {
return $(a).height() > 100;
}
});

$('.box:over100pixels').click(function() {
alert('The element you clicked is over 100 pixels high');
});

The previous part of the code creates a custom selector that finds all elements longer than 100px. The following code simply binds the click event to those elements found using the selector.
I won’t give a more detailed explanation here, but you can imagine how powerful it is! If you search "custom jquery selector" on Google, you will see many examples of this.

16. Minimize your HTML and modify it after the page loads
This title may not mean much, but this trick may streamline your code, reduce code size and page downloads time to help optimize your search engines. Please see the example below:

Copy the code The code is as follows:

This is field number 1

< ;div class="message">This is an error message

This is field number 2

This is an error message

The above is a specific example of HTML, slightly modified for explanation purposes. I believe you will also think this code is quite ugly. If the code like this is very long, you will end up with a rather long and ugly page. So you can handle it like this:

Copy the code The code is as follows:

This is field 1

This is field 2

This is field 3

This is field 4

This is field 5

All you have to do is add the ugly HTML back after the page has finished loading via a jQuery operation:

Copy code The code is as follows:

$(document).ready(function() {
$('.field').before('

');
$('.field').after('

This is an error message

');
});

It is not always advisable to do this, you will see the page flash for a moment after the page loads, but in certain cases you have a lot of repeated HTML content, then through this method you can display Significantly reducing page code size and reducing irrelevant and repetitive tags can benefit your SEO.
17. For speed and SEO considerations, delay loading of content
There is also a way to improve page loading speed and smooth out the HTML content searched by Spiders. By using AJAX requests to load additional content later after the page has loaded, users can start browsing right away and let spiders see the content you want them to index.
We already use this technology on our own website. The purple button at the top of this page will pop up three tables, directions and Google Maps, which will triple the size of our page. So we only need to put these HTML contents into a static page, and load it through the load() function after the page is loaded:

Copy code The code is as follows:

$('#forms').load('content/headerForms.html', function() {
// Code here runs once the content has loaded
// Put all your event handlers etc. here.
});

I wouldn’t use this trick everywhere on the page. You have to weigh this up. You need to make additional page requests, and some of the content on the page cannot be immediately displayed to the user, but using this technique correctly can be very helpful for optimization.
18. Use the tool functions provided by jQuery
jQuery has more than just flash effects. The jQuery author also provides some quite practical methods, which fill in some of the shortcomings of JacaScript.
http://docs.jquery.com/Utilities
In particular, providing browser support for some common array functions is a patch. jQuery provides methods to iterate, filter, clone, merge, and remove duplicates from an array.
Other commonly used functions include getting the selection in the drop-down box. With traditional JavaScript methods, you would have to use getElementById to get the element, and then find the selected element by traversing its child elements. jQuery provides a fairly easy-to-use method:

Copy code The code is as follows:

$('#selectList ').val();

It is worthwhile to spend time browsing the jQuery documentation on the official website and some less commonly used methods.
19. Use noConflict to rename jQuery objects
Most JavaScript frameworks use the $ symbol as an abbreviation. When multiple JS frameworks are used on the same page, the page Conflicts can easily arise. Fortunately there is an easy way. The noConflict() function returns control of $ and allows you to set it to your own variable name:

Copy code The code is as follows:

$('#selectList').val();

20. How to know that the image has been loaded
This is also a question that is not well documented (at least not when I looked it up), but it is a fairly common requirement when it comes to creating photo galleries, rotating lantern effects, etc. And this is very easy to achieve in jQuery.
All you have to do is use the .load() method on the IMG and add a callback function in it. The following example changes the attributes of an image src and appends a simple load function:

Copy the code The code is as follows:

$('#myImage').attr('src', 'image.jpg').load(function() {
alert('Image Loaded');
}) ;

You should notice that an alert will pop up once the image is loaded.
21. Always use the latest version
jQuery is still being continuously updated, and its author, John Resig, is always looking for ways to improve jQuery performance. The current version of jQuery is 1.3.2, and John has announced that he is writing a new selector engine, Sizzle, which may significantly improve selector performance (up to 4x in Firefox), so we should keep it up to date.

22. How to check if an element exists
You don’t have to check if an element exists on the page to use it because if the appropriate element is not found in the DOM, jQuery will do nothing. But when we need to check whether an element is selected, or how many items are selected, you can use the length attribute:

Copy code The code is as follows:

if ($('#myDiv).length) {
// your code
}

Extremely simple.
23. Add JS classes to your HTML attributes
I learned this technique from Karl Swedberg, and I have been reading his books when I was learning jQuery.
He recently left a comment on this usage in my previous article. The basic principles are as follows.
First, after jQuery is loaded you can add the "JS" class to the HTML tag using the method:

Copy code The code is as follows:

$('HTML').addClass('JS');

Because this only happens when javascript is valid, if the user turns on the JavaScript switch, then you can use it Add CSS style to the element:

Copy code The code is as follows:

.JS #myDiv{display:none ;}

So what this means is that we can hide content when JavaScript is on, and then use jQuery to display that content when needed (like shrink or expand the content on user click), all while having JavaScript off (and searching for Spiders) will see everything. I will use this trick later.
You can see all his articles here.
24. Return 'false' to prevent default behavior
This may or may not be obvious. If you have this habit:

Copy the code The code is as follows:

Click me!

Then add the following event handler:

Copy code The code is as follows:

$('popup').click(function(){
// Launch popup code
});

When you use the above method on long pages, it may work fine. Sometimes you will notice that the anchor will jump to the upper part of the page after clicking the link.
All you have to do is prevent its default behavior, or you can actually add "return false;" to the default behavior of any event. Like this:

Copy code The code is as follows:

$('popup').click( function(){
// Launch popup code
return false;
});

25. Abbreviation of ready event
A little trick but by using the abbreviation of $(document).ready(), you can save a few characters.
Replaces:

Copy code The code is as follows:

$(document).ready( function (){
// your code
});

You can abbreviate it as:

Copy code The code is as follows:

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