jQuery code optimization traversal_jquery

After understanding the working mechanism behind jQuery's DOM traversal, you can consciously avoid unnecessary repeated operations when writing code, thereby improving the performance of the code. This article will briefly discuss the issue of optimizing jQuery code starting from jQuery's traversal mechanism.

jQuery object stack

jQuery internally maintains a jQuery object stack. Each traversal method finds a new set of elements (a jQuery object), and jQuery pushes the set of elements onto the stack. Each jQuery object has three attributes: context, selector, and prevObject. The prevObject attribute points to the previous object in the object stack, and through this attribute, you can go back to the original set of DOM elements.

jQuery provides two very useful methods for us to operate this internal object stack:

.end()
.andSelf()
Calling the first method is simply pops up an object (resulting in a return to the previous jQuery object). The second method is more interesting. Calling it will backtrack a position in the stack, then combine the element sets at the two positions, and push the new, combined element set to the top of the stack.

Using this DOM element stack can reduce repeated query and traversal operations, and reducing repeated operations is the key to optimizing jQuery code performance.

Optimization example
The following is a function (the front and rear codes are omitted) to achieve the table row stripe effect:

The stripe() function uses the ID selector twice #news Find elements: once to remove the alt class from rows with that class, and once to add the class to newly selected rows.

There are two ways to optimize this function, one is concatenation.

Concatenation
Concatenation optimization utilizes jQuery’s internal object stack and .end() method. The optimized code is as follows:

The first call to .find() will push the table rows onto the stack, and then the .end() method will pop these rows out, allowing the next call to .find() Still performing operations on the #news table. This reduces two selector searches to one.

Another optimization method is caching.

Caching
The so-called cache here is to save the results of previous operations for reuse in the future. The optimized code is as follows:

Compared with the concatenated method, the caching method is a little more verbose because an additional variable is created to save the jQuery object. But from another perspective, this method can completely separate the two operations on the selected element in the code, which may meet our needs in other situations. Similarly, because the selected elements can be saved outside the stripe() function, it avoids the need to repeatedly query the selector each time the function is called.

Conclusion
Using jQuery’s internal object stack and cache can reduce repeated DOM queries and traversals, thereby improving script execution speed.

Because selecting elements in the page based on ID is extremely fast, there will be no obvious performance difference between the above two examples before and after optimization. In actual coding, you should choose the method that is the most readable and easiest to maintain. If you really encounter a performance bottleneck, the above optimization techniques can have immediate results.

(Note: This article is based on the relevant chapters of "JQuery Basics Tutorial (3rd Edition)".)