Write a failed jquery optimization attempt

I often complain that jquery's Dom does not perform well and often tries to optimize it in a number of ways, but the more optimized it is, the more frustrated it is to discover that jquery is actually doing well and that the optimizations that can be done from the user's perspective are limited (this does not mean that jquery is a good performance Conversely, it can only be said that it is a relatively closed library, can not be optimized from outside intervention. This article records a failed optimization experience.

Optimization ideas

This time the idea of optimization comes from the database. In database optimization, we often say that a large number of operations in a transaction together to submit, can effectively improve efficiency. Although I do not know the reasons for the database, but the idea of the business for me to indicate the direction (although it is wrong).

So I tried to introduce the concept of a transaction into jquery, to optimize the jquery from the outside by opening and submitting transactions, and the most important thing was to reduce the number of loops in each function.

As we all know, jquery's DOM operations, with get all, set first as the standard, where the DOM attributes/styles are manipulated, is almost always a traversal of the selected elements, The Jquery.access function is the most important part of the loop, and the code for looping is as follows:

 
  
  

  
   
   
Setting one attribute
  
   
   
if (value!== undefined) {
  
   
   
Optionally, function values get executed if exec are true
  
   
   
exec =!pass exec jquery.isfunction (value);
  
   
   

  
   
   
for (var i = 0; I length; i++) {
  
   
   
fn
  
   
   
Elems[i],
  
   
   
Key
  
   
   
Exec? Value.call (Elems[i], I, FN (Elems[i], key)): value,
  
   
   
Pass
  
   
   
);
  
   
   
}
  
   
   
return elems;
 
  
  

For example, the JQUERY.FN.CSS function is like this:

 
  
  
 
   
   
jquery.fn.css = function ( name, value )  {   
 
   
   
     // Setting  ' undefined '  is a no-op   
 Li class= "alt" >    if  ( arguments.length === 2  value == = undefined )  {   
   
   
         return this;   
 
   
   
    }   
 
   
   
   
 
   
   
return  Jquery.access ( this, name, value, true, function ( elem, name, value  )  {  
 
   
   
 return value !== undefined ?   
 
   
   
 
   
   
 jquery.css ( elem, name  );   
 
   
   
 
   
   
};  
 
  
  
 

So the following code, assuming there are 5,000 div elements selected, iterates through 10,000 nodes:

 
  
  

  
   
   
JQuery (' div '). css (' height ', #). css (' width ', 200);
 
  
  

In my mind, in a transaction, such as the operation of the database, through the preservation of all operations, in the submission of the transaction at the same time, the 10,000 node access, reduced to 5,000 times, the equivalent of a 1 time-fold increase in performance.

Simple implementation

In a transactional jquery operation, 2 functions are provided:

begin: Opens a transaction that returns the object of a transaction. The object has all the functions of jquery, but the calling function does not take effect immediately, only when the transaction is committed.

Commit: Commit a transaction to ensure that all previously called functions are in effect and return the original jquery object.

It is also convenient to implement:

creates a transaction object that replicates all functions on the Jquery.fn to that object.

When a function is called, the called function name and related parameters are added to the prepared queue.

When a transaction is committed, the selected element is traversed once, and all functions in the queue are applied to each node in the traversal.

The simple code is as follows:

 
 

  
  

  
var slice = Array.prototype.slice;
  
  

  
JQuery.fn.begin = function () {
  
  

  
var proxy = {
  
  

  
_CORE:C,
  
  

  
_queue: []
  
  

  
},
  
  

  
Key
  
  

  
Func
  
  

  
To copy a function on a Jquery.fn
  
  

  
For (key in Jquery.fn) {
  
  

  
func = Jquery.fn[key];
  
  

  
if (typeof func = = ' function ') {
  
  

  
This will cause the key to always be the last loop value for the For loop.
  
  

  
Therefore, a closure must be used to guarantee the validity of the key (lift effect)
  
  

  
(function (key) {
  
  

  
Proxy[key] = function () {
  
  

  
To place a function call in a queue
  
  

  
This._queue.push ([Key, Slice.call (arguments, 0)]);
  
  

  
return this;
  
  

  
};
  
  

  
}) (key);
  
  

  
}
  
  

  
}
  
  

  
Prevent the commit function from being intercepted
  
  

  
Proxy.commit = JQuery.fn.commit;
  
  

  
return proxy;
  
  

  
};
  
  

  

  
  

  
JQuery.fn.commit = function () {
  
  

  
var core = This._core,
  
  

  
queue = This._queue;
  
  

  
Only one per loop
  
  

  
Core.each (function () {
  
  

  
var i = 0,
  
  

  
Item
  
  

  
JQ = JQuery (this);
  
  

  
Call all functions
  
  

  
for (; item = queue[i]; i++) {
  
  

  
Jq[item[0]].apply (JQ, item[1]);
  
  

  
}
  
  

  
});
  
  

  
return THIS.C;
  
  

  
};
 
 

Test environment

The test uses the following criteria:

The 5,000 div is placed in a container (div id= "container"/div).

use $ (#containerdiv) to select these 5,000 div.

each div requires setting a random background color (Randomcolor function), and a random width below 800px (randomwidth function).

There are 3 calling methods to participate in the test:

Normal use method:

 
  
  

  
   
   
$ (' #containerdiv ')
  
   
   
. css (' Background-color ', Randomcolor)
  
   
   
. css (' width ', randomwidth);
 
  
  

Single Cycle method:

 
  
  

  
   
   
$ (' #containerdiv '). each (function () {
  
   
   
$ (this). CSS (' Background-color ', Randomcolor). css (' width ', randomwidth);
  
   
   
});
 
  
  

Business Law:

 
  
  

  
   
   
$ (' #containerdiv ')
  
   
   
. Begin ()
  
   
   
. css (' Background-color ', Randomcolor)
  
   
   
. css (' width ', randomwidth)
  
   
   
. commit ();
 
  
  

Object Assignment method:

 
  
  

  
   
   
$ (' #containerdiv '). CSS ({
  
   
   
' Background-color ': Randomcolor,
  
   
   
' Width ': randomwidth
  
   
   
});
 
  
  

Test browser to choose the Chrome 8 series (with IE test directly hang).

The result of the sadness

The original prediction is that the efficiency of the single cycle is much higher than the normal use method, while the transaction method is slower than the single cycle method, but should be faster than the normal use of the method, and the object assignment method is in fact jquery internal support of the single cycle method, the efficiency should be the highest.

Unfortunately, however, the results are as follows:

Normal use method	Single Cycle method	Business Law	Object Assignment method
18435ms	18233ms	18918ms	17748ms

As a result, the law of affairs has become the slowest method. At the same time, there is no obvious advantage of single cycle and normal use, even the object assignment method which relies on the internal implementation of jquery has not opened a big gap.

Since the operation of 5,000 elements is already a very large cycle, such a large cycle has not been able to pull off the gap in performance, usually the most commonly used 10 or so elements of the operation is more unlikely to have a clear advantage, or even may be enlarged disadvantage.

The reason is that there is no obvious performance improvement because of the single cycle method. Therefore, relying on a single cycle, and on a single loop on the external construction of the transaction method, is naturally on a single cycle on the basis of the additional need to create transaction objects, save function queues, traverse function queues and other costs, As a result, the normal use of the method is also understandable.

At this point, it is also a failure to declare the optimization of the business of imitation. But the results can be further analyzed.

Where is the performance?

First of all, from the use of code analysis, the normal use of the test and the fastest object assignment method to compare, can be said that the difference between the two is only the number of elements of the cycle (here, the internal problem of jquery is thrown away, In fact, the poor implementation of Jquery.access does have a drag-and-Drop object assignment method, fortunately not serious, the normal use of the method is 10,000 elements, the object assignment method is 5,000 elements. Therefore, it is easy to think that 18435 17748 = 687ms is a cycle of 5,000 elements of the time consuming, which accounted for the entire implementation of the process of 3.5% or so, not the backbone of the entire implementation process, in fact, there is really no need for optimization.

So where did the other 96.5% of the spending go? Remember Doglas's words, in fact, JavaScript is not slow, slow is the operation of the DOM. In fact, the remaining 96.5% of the cost, to remove the function call and other basic consumption, at least 95% of the time is used in the DOM elements of the style is changed after the rendering.

After discovering this fact, there is also a more correct direction of optimization, but also one of the basic principles of front-end performance: When you modify a large number of child elements, first move the root parent DOM node out of the DOM tree. So if you use the following code to test again:

 
  
  

  
   
   
No reuse $ (' #container ') already bad.
  
   
   
$ (' #container '). Detach (). Find (' div ')
  
   
   
. css (' Background-color ', Randomcolor)
  
   
   
. css (' width ', randomwidth);
  
   
   
$ (' #container '). Appendto (Document.body);
 
  
  

Test results always stay at around 900ms, and the previous data is not at all an order of magnitude above, the real optimization success.

Lessons and summaries

Be sure to find the right performance bottlenecks and then optimize, blind speculation will only lead to the wrong and extreme road.

data to speak, no one to speak in front of the data!

do not think that the direction of the transaction is wrong, if jquery native can support the concept of transactions, there will be other points can be optimized? For example, a transaction automatically gets the parent element out of the DOM tree.

Original link: http://www.otakustay.com/a-failure-in-jquery-optimization/

"Edit Recommendation"

1. JQuery 1.5 Official release five major changes compelling
2. 18 new and most-given jquery tutorials to share
3. Simplifying Ajax development with JQuery
4. Dynamic adding and statistics of tabular data by jquery
5. The redemption of the plug-in mechanism of jQuery1.5 new features

"Responsible editor: Chen Yu new TEL: (010) 68476606"