Understanding the working mechanism behind the traversal of the DOM by jquery, you can improve the performance of your code by consciously avoiding unnecessary repetitive actions as you write code. In this paper, we discuss the problem of optimizing jquery code from the traversal mechanism of jquery.
jquery Object Stack
jquery maintains a stack of jquery objects internally. Each traversal method finds a new set of elements (a jquery object), and jquery pushes the set of elements into the stack. Each jquery object has three attributes: Context, selector, and Prevobject, where the Prevobject attribute points to the previous object in the stack, which can be traced back to the original set of DOM elements.
jquery provides two very useful ways for us to manipulate this internal object stack:
. End ()
. Andself ()
Calling the first method simply pops an object (the result is going back to the previous jquery object). The second method is more interesting, calling it will backtrack a position in the stack, then combine the set of elements in two locations and push the new, grouped set of elements above the stack.
Using this DOM element stack reduces repetitive queries and traversal operations, and reducing duplication is the key to optimizing jquery code performance.
Optimization Example
Here is a function (omitting the code before and after) to implement the table row stripe effect:
Copy Code code as follows:
function stripe () {
$ (' #news '). Find (' Tr.alt '). Removeclass (' Alt ');
$ (' #news tbody '). each (function () {
$ (this). Children (': visible '). has (' TD ')
. Filter (': Group (3) '). addclass (' Alt ');
});
}
The stripe () function two times uses the ID selector #news the lookup element: one to remove the class from the row with the Alt class, and the other to add the class to the newly selected row.
There are two ways to optimize this function, one is consonant.
consonant
Consonant optimizes the use of the internal object stack and the. End () method of jquery. The optimized code is as follows:
Copy Code code as follows:
function stripe () {
$ (' #news ').
Find (' Tr.alt '). Removeclass (' Alt '). End ()
Find (' tbody '). each (function () {
$ (this). Children (': visible '). has (' TD ')
. Filter (': Group (3) '). addclass (' Alt ');
});
}
The first call. Find () pushes the table rows onto the stack, and then the. End () method pops the rows up so that the next call is made. Find () is still performing an operation on the #news table. This reduces the two-time selector lookup to one time.
Another optimization method is caching.
Caching
The so-called cache, here is to save the results of the previous operation for future reuse. The optimized code is as follows:
Copy Code code as follows:
var $news = $ (' #news ');
function stripe () {
$news. Find (' Tr.alt '). Removeclass (' Alt ');
$news. Find (' tbody '). each (function () {
$ (this). Children (': visible '). has (' TD ')
. Filter (': Group (3) '). addclass (' Alt ');
});
}
The caching approach is a bit verbose compared to the consonant method, as an extra variable is created to hold the jquery object. But from another perspective, this approach can completely separate the two operations of the selected element in the code, which may satisfy our other needs. Similarly, because the selected element can be saved outside the stripe () function, it avoids the action of repeating the query selector every time the function is invoked.
Conclusions
Using jquery's internal object stacks and caching, you can reduce repetitive DOM queries and traversal to improve script execution speed.
Because it is extremely fast to select elements on the page by ID, the above two examples do not have significant performance differences before and after optimization. In the actual coding, should choose the best readability, easiest to maintain the way. If you do encounter a performance bottleneck, the above optimization techniques can have an immediate effect.
Note: This article is based on the relevant chapters of the jquery Basic Tutorial (3rd edition). ）
