Traversal of jQuery code optimization

Collections correspond to the use of selector to search for elements on the page. The working mechanism behind the jQuery traversal operation is also very distinctive. I understand the working mechanism behind jQuery's DOM traversal, and can consciously avoid unnecessary repeated operations when writing code, thus improving the code performance. This article will start with jQuery's traversal mechanism and briefly discuss the problem of optimizing jQuery code.

JQuery object Stack

JQuery maintains a jQuery object stack. Each Traversal method will find a new set of elements (a jQuery object), and jQuery will push this set of elements into the stack. Each jQuery object has three attributes: context, selector, and prevObject. The prevObject attribute points to the previous object in the object stack, this attribute can be used to trace back to the original DOM element set.

JQuery provides two very useful methods for us to operate on this internal object Stack:

◆ End ()

◆ AndSelf ()

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

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

Optimization example

The following is a function (the front and back code are omitted) used to achieve the stripe Effect of table rows:

 
 

  
  
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 uses the ID selector twice # news search element: one is used to delete the class from the row with the alt class, the other is to add this class to the newly selected row.

There are two methods to optimize this function. One is concatenation.

Concatenation

Concatenation optimization uses jQuery's internal object stack and. end () method. The optimized code is 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 () will push the table row to the stack, and then. the end () method pops up these rows for the next call. find () is still executed on the # news table. In this way, the two selector searches are reduced to one.

Another optimization method is cache.

Cache

The so-called cache stores the results of previous operations for future reuse. The optimized code is 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');  
  
  
    });  
  
  
} 
 
 

Compared with the concatenation method, the caching method is too long 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 elements in the code, which may meet our needs in other situations. Similarly, because you can save the selected elements outside the stripe () function, you can avoid repeated query of the selection operator every time you call a function.

Conclusion

Using jQuery's internal object stack and cache can reduce repeated DOM queries and traversal, thus improving script execution speed.

Because the selection of elements on the page by ID is extremely fast, there will be no significant performance difference between the above two examples before and after optimization. In actual coding, you should select the most readable and easy to maintain mode. If you encounter performance bottlenecks, the above optimization technologies can achieve immediate results.

Original article: http://www.ituring.com.cn/article/382