Look at some of the optimization directions found in the jquery source code

1. Avoid using $.fn.each or $.each

Because it is really slower than the original for/while, the more the number of cycles the greater the gap.

In addition, the for-in of the object is quicker to lose than for, but the for-in of the array is slower than for

2. Selector

Always believe that it is common for the native to be faster, so so does jquery.

ID selector $ (' #id ')/element tag Selector $ (' input ')/class selector $ ('. class ') are native

The pseudo-class selector $ (': Hidden ')/property selector $ (' [Data-id] ') is relatively slower.

Do you think the two will be quicker after you use Queryselector or Queryselectorall, go ahead and try?

3. Parent-Child relationship

Compare these 6 ways to get child elements and discover $parent. Find ('. Children ') is the fastest

It still translates into $parent. Find ('. Child ') to find, so why not?

$parent. Find ('. Child ')

The most native selector to find. Child, of course the fastest

$parent. Children ('. Child ')

In fact, the internal use of siblings and nextsiblings each section of the node traversal, either way than find to slow

$ (' #parent >. Child ')

The Sizzle engine of JQuery is recognized from right to left, which is deadly (although the browser also merges the DOM tree and the style tree, but that's a helpless move)

$ (' #parent. Child ')

In the same vein, you have to think about multiple levels, and the speed is even slower.

4. Do the Caching

The cost of each jquery object is actually not small, and each time a selection produces a JQuery object, and it has hundreds of attributes, it's scary to think about it. So:

var $obj = $ (' #xx ');
$obj. Find ('. a ');
$obj. Find ('. B ')

Than

$ (' #xx '). Find ('. a ');
$ (' #xx '). Find ('. B ');

Maybe a few times faster.

5. DOM element operations can be native, use native bar

$ (' #x '). On (' click ', Function () {    alert ('). Prop (' id '));    

The latter is much faster than the two.

Similarly:

$ (this). Hide (0); this.style.display = ' none ';

　　

6. Use chained notation

$ (' xx '). Find (' P '). EQ (2). Text (' Ha ');

Think of the fact that you should also understand, eliminating the overhead of repeating the creation of JQuery objects

7. Change the DOM structure

It is well known that the cost of altering the DOM structure is so great that it is possible to pull the 10 times-fold rate gap.

It is better to insert a large number of DOM or use merge and insert first. Instead, the merging of jQuery elements or the merging of strings depends on security requirements and complexity.

Modifications to a large number of DOM are recommended to first take the element out of the detach method, and then insert the document back into the process.

8. Storing data

$ (' #xx '). Data (key, value); $.data ($ (' #xx '), key, value);

The former is defined on the prototype of the element object, and the latter is defined on the global $ object (all instance objects why is it so fast in fact I do not understand, and only think of this, please the big guy to add)

9. Event Delegation

Native to write event delegate is still relatively tired, so using jQuery is largely because $.fn.on and $.ajax are my favorites.

$ (' #parent '). On (' click ', '. Child ', function () {});

Compared to each of the. Child bindings click on the element over a long, that's a burning thing.

Look at some of the optimization directions found in the jquery source code