Tips for improving jquery Efficiency

Document directory

• 1. Always use the latest version of jquery
• 2. Merge and minimize your scripts
• 3. Replace jquery's each function with the for Function
• 4. When searching for dom elements, use id instead of class
• 5. Give your selector a Context Reference
• 6. Always cache the selected elements
• 7. Avoid dom operations as much as possible
• 8. Use the join () function instead of the concat () function to join a long string.
• 9. Before using an element, first determine whether it exists.
• 10. Learn to use event delegation
• 11. Write your own Selector

1. Always use the latest version of jquery

 

Jquery is constantly developing and improving, and john and his team have been searching for new methods to improve program performance,

Using the latest version of jquery allows you and your program to keep pace with the times.

 

2. Merge and minimize your scripts

Try to merge the javascript script used on your page into a file and compress it so that your page will load faster.

 

3. Replace jquery's each function with the for Function

 

Native functions are always faster than any secondary function. You can refer to the following example:

Var array = new Array (); <br/> for (var I = 0; I <10000; I ++) {<br/> array [I] = 0; <br/>}</p> <p> console. time ('native '); <br/> var l = array. length; <br/> for (var I = 0; I <l; I ++) {<br/> array [I] = I; <br/>}< br/> console. timeEnd ('native '); </p> <p> console. time ('jquery '); <br/> $. each (array, function (I) {<br/> array [I] = I; <br/>}); <br/> console. timeEnd ('jquery ');

 

On my machine, you can see in firebug:

It takes only 2 ms to use for () for local execution, and 26 ms for $. each ()

For () is only 14 ms for execution on the network, while $. each () requires 160 ms.

Of course, the sub-host and network factors are uncontrollable, but the speed problem can still be seen.

 

4. When searching for dom elements, use id instead of class

 

Using ID to select an object is better, because the library behavior: jquery uses the local method getelementbyid () of the browser to retrieve the object,

This makes the query very fast.

Take the following example:

// Example creating a list and filling it with items <br/> // and selecting each item once </P> <p> console. time ('class'); <br/> var list = $ ('# list'); <br/> var items =' <ul> '; </P> <p> for (I = 0; I <1000; I ++) {<br/> items + = '<li class = "item' + I + '"> item </LI> '; <br/>}</P> <p> items + = '</ul>'; <br/> list.html (items ); </P> <p> for (I = 0; I <1000; I ++) {<br/> var S = $ ('. item '+ I); <br/>}< br/> console. timeend ('class'); </P> <p> console. time ('id'); <br/> var list = $ ('# list'); <br/> var items =' <ul> '; </P> <p> for (I = 0; I <1000; I ++) {<br/> items + = '<li id = "item' + I + '"> item </LI> '; <br/>}</P> <p> items + = '</ul>'; <br/> list.html (items ); </P> <p> for (I = 0; I <1000; I ++) {<br/> var S = $ ('# item' + I ); <br/>}< br/> console. timeend ('id ');

 

You can see through firebug:

Local test: Id 52 ms; Class 175 Ms

Online test: Id 164 ms; Class 5S

 

There are several other types of selection strings for comparison:

Console. profile (); </p> <p> $ (". selected "); </p> <p> console. profileEnd (); <br/> // firebug profile (0.308 ms, 11 CILS) </p> <p> console. profile (); </p> <p> $ ("li. selected "); </p> <p> console. profileEnd (); <br/> // firebug profile (0.291 ms, 11 CILS) </p> <p> console. profile (); </p> <p> $ ("# someList. selected "); </p> <p> console. profileEnd (); <br/> // firebug profile (0.283 ms, 11 CILS) </p> <p> console. profile (); </p> <p> $ ("# someList li. selected "); </p> <p> console. profileEnd (); <br/> // firebug profile (0.275 ms, 11 CILS) </p> <p> console. profile (); </p> <p >$ ("# mainItem"); </p> <p> console. profileEnd (); <br/> // firebug profile (0.165 ms, 2 CILS) </p> <p>

We can see that the ID selector is the fastest.

 

5. Give your selector a Context Reference

 

If you must use class to specify your element, at least use the proper selector to prevent jquery from passing the entire Dom.

Code like this: ('.class'example .css ('color' #123456 ');

It is best to write it like this: $ ('. class', 'audio class-container'character .css ('color',' #123456 ');

This eliminates the need to pass the entire DOM-instead of the # class-container element.

 

6. Always cache the selected elements

 

Do not repeat your selector incorrectly or repeatedly. You can use a variable to cache it,

In this way, dom does not need to trace your elements over and over again.

 

Take the following example:

Items ('items item'detail .css ('color', '#123456'); <br/> items ('items item'detail .html ('hello'); <br/> items ('items item'detail .css ('background-color ', '# ffff'); </P> <p> // you could use this instead <br/> comment ('your item'0000.css ('color', 'Your 123456'0000.html ('hello'0000.css ('background-color ', '# ffff'); </P> <p> // or even <br/> var item =$ (' # item '); <br/> item.css ('color', '#123456'); <br/> item.html ('hello'); <br/> item.css ('background-color ', '# ffff'); </P> <p> // As for loops, this is a big no-no <br/> console. time ('no cache'); <br/> for (VAR I = 0; I <1000; I ++) {<br/> $ ('# list '). append (I); <br/>}< br/> console. timeend ('no cache'); </P> <p> // much better this way <br/> console. time ('cache'); <br/> var item = $ ('# list'); </P> <p> for (VAR I = 0; I <1000; I ++) {<br/> item. append (I); <br/>}< br/> console. timeend ('cache ');

 

You can see in firebug:

Local test: caching 28 ms; not caching 72 Ms

Online test: caching 67 ms; not caching 210 ms

 

 

7. Avoid dom operations as much as possible

 

Dom operations should be as few as possible, because insert operations like prepend (), append (), and after () are quite time-consuming,

The preceding insert operation uses the html () function and the list created in advance to replace it with a faster speed.

Take the following example:

 Console. profile (); </P> <p> var list = $ ("# somelist"); </P> <p> for (VAR I = 0; I <50; I ++) <br/>{< br/> list. append ('<li> item #' + I + '</LI>'); <br/>}</P> <p> console. profileend (); <br/> // firebug profile (17.851 ms, 602 CILS) </P> <p> console. profile (); </P> <p> var list = $ ("# somelist"); <br/> var items = ""; </P> <p> for (VAR I = 0; I <50; I ++) {<br/> items + = '<li> item #' + I + '</LI>'; <br/>}</P> <p> list. append (items); </P> <p> console. profileend (); <br/> // firebug profile (5.29 ms, 210 CILS) </P> <p> console. profile (); </P> <p> var list = document. getelementbyid ('somelist'); <br/> var items = ''; </P> <p> for (VAR I = 0; I <50; I ++) {<br/> items + = '<li> item #' + I + '</LI>'; <br/>}</P> <p> list. innerhtml = items; </P> <p> console. profileend (); <br/> // firebug profile (3.644 ms, 5 CILS) <br/>

Now we should know how to operate dom faster.

 

 

8. Use the join () function instead of the concat () function to join a long string.

 

This may seem strange, but it is helpful for acceleration, especially when you process long string connections.

First, create an array and fill it with the characters you need to connect. The join () method performs better than the concat () method.

As shown below:

 Var array = []; <br/> for (var I = 0; I <= 10000; I ++) {<br/> array [I] = '<li>' + I + '</li> '; <br/>}</p> <p> ('{list'{.html (array. join (''));

 

 

9. Before using an element, first determine whether it exists.

 

Although jquery handles such a problem elegantly, it does not mean you can ignore it.

In fact, if you call jquery's Method on an empty element, it will not be executed.

 

See the following example:

Console. profile (); <br/> var ele = $ ("# somethingThatisNotHere"); <br/> ele. text ("Some text "). slideUp (300 ). addClass ("editing"); <br/>$ ("# mainItem"); <br/> console. profileEnd (); </p> <p> // Some more awesome, ground shattering code here. _.

 

Profile (0.477 ms, 21 CILS) displayed in firebug)

 

And the following:

Console. profile (); <br/> var ele = $ ("# somethingThatisNotHere"); <br/> if (ele [0]) {<br/> ele. text ("Some text "). slideUp (300 ). addClass ("editing"); <br/>}< br/>$ ("# mainItem"); <br/> console. profileEnd (); </p> <p> // Some more awesome, ground shattering code here. _.

 

Profile (0.112 ms, 4 CILS) shown in firebug)

The efficiency is different.

 

 

10. Learn to use event delegation

 

Jquery makes it easier to add events to elements, but adding too many events is not very efficient,

In many cases, event delegation allows you to add only a few events, but the same result can be obtained.

See the following example:

$ ('# MyTable TD'). click (function () {<br/> values (this).css ('background', 'red'); <br/> });

A simple function that turns the elements in the table into red when you click it. Suppose you have

10 columns of tables with 50 rows will generate 500 event bindings. If you only add one

Event: when the table is clicked, the event handle calculates which element is clicked, and then changes the element to red,

Isn't it more concise?

The following is a simple implementation:

$ ('# Mytable '). click (function (e) {<br/> var clicked = values (e.tar get); <br/> clicked.css ('background', 'red'); <br/> });

 

11. Write your own Selector

 

Jquery has many built-in selectors that can be used to select elements by ID, class, Tag, attribute, and so on.

But what if you need to select elements based on other things and jquery does not have such a selector?

 

One solution is to add additional classes to the element and use it to select the element.

But it turns out that it is not difficult to extend jquery to add its own selector.

The following is an example (selecting an element with a height greater than px ):

$. Extend ($. expr [':'], {<br/> over100pixels: function (a) {<br/> return $ (). height ()> 100; <br/>}< br/>}); </p> <p> $ ('. box: over100pixels '). click (function () {<br/> alert ('the element you clicked is over 100 pixels high'); <br/> });

Sort it here, and update it later...