Book Image

Instant jQuery Selectors

By : Aurelio De Rosa
Book Image

Instant jQuery Selectors

By: Aurelio De Rosa

Overview of this book

jQuery's selectors is one of the most important concepts of the jQuery library. Usually, the first thing you do is to select one or more elements of a page in order to manipulate them. Therefore, to efficiently learn the usage of jQuery's selectors is one of the first steps to successfully build your website. Instant jQuery Selectors is a practical guide that will teach you how to use jQuery's selectors efficiently in order to easily select theelements of your pages to operate upon with jQuery's methods. You will go through the most common problems that you could face while developing your project and will learn how to solve them with the help of focused examples that Instant jQuery Selectors has to offer. Instant jQuery Selectors, starting from how to set up jQuery and how to choose the right version for your project, explains to you all the selectors available using a multitude of simple and practical recipes that will help you start using selectors in the right way. Reading the presented recipes you'll learn about the numerous selectors and filters of jQuery – almost 100 of them! You will see how to reuse collections, the methods to filter collections, and how to take advantage of the lesser known parameter of jQuery's constructor: context. Also, you'll discover the methods to traverse the DOM and the techniques to improve the performance of your website by just tweaking selectors. Instant jQuery Selectors is the resource to learn everything you need to know about jQuery's selectors.
Table of Contents (7 chapters)

Improving performance re-using selected elements (Become an expert)


In this recipe, we'll see how we can store a collection of previously selected elements in a variable for a later processing and how this method can improve performance.

How to do it...

This time our goal will be a little different. Instead of applying margins or borders, we'll perform a comparison to show how in a (simulation of a) real-world page, caching objects can significantly improve performance. In order to understand the explanation, follow these steps:

  1. Create a copy of the template.html file and rename it as reusing-elements.html.

  2. Edit the <head> section of the page adding this code:

    <script>
        $(document).ready(function() {
            var start = new Date();
            var $description = $('.description');
            for (i = 0; i < 50000; i++) {
                $description.text();
            }
            console.log('Time with caching: ' + (new Date() - start) + ' milliseconds');
            start = new Date();
            for (i = 0; i < 50000; i++) {
                $('.description').text();
            }
            console.log('Time without caching: ' + (new Date() - start) + ' milliseconds');
        });
    </script>
  3. Save the file and open it with your favorite browser.

How it works...

Basically, our code can be split into two blocks. Their general goal is to retrieve all of the elements with class "description" and then call the jQuery's text() method a given number of times (50,000 in our example). The difference is that while the first retrieves the collection once, stores it into a variable and then calls text() inside the loop, the second calls the constructor inside the loop as well. Of course, it's unlikely that you'll call a constructor so many times inside your code, but the demo wants to stress on the performance difference that a simple caching can make.

Before each loop, we save the current time in milliseconds using the JavaScript Date class in a variable called start. Then, right after the loop, we print the elapsed time on the console. The difference between the two blocks is quietly impressive, and is shown by the following table:

 

Test #1

Test #2

Test #3

Average

Time with caching

18 ms

17 ms

17 ms

17,3 ms

Time without caching

227 ms

(more than 209 ms)

Approximately 11, 5x slower

216 ms

(more than 199 ms)

Approximately 11x slower

224 ms

(more than 207 ms)

Approxiamtely 11, 5x slower

222,3 ms

(more than 205 ms)

Approxiamtely 11, 5x slower

Note

While a rough benchmark can be done using the Date class, a more reliable one should be performed with the High Resolution Time API. You can find more information on this API reading this article of mine at http://www.sitepoint.com/discovering-the-high-resolution-time-api/.

From this recipe, we can learn a good rule of thumb: if we're going to use a selector at least twice, we should cache it. Then, when you need to call it again, you'll just use the variable where you stored the collection. Doing so, jQuery won't need to search the entire DOM tree again to find the elements, which leads to better performance.

Some of you may argue that the example shown couldn't be seen as a real use case. For those of you, the following is a piece of code taken directly from the current version of my website. The aim of this snippet is to rotate my latest tweets, but this doesn't really matter. What I want you to focus is the way I cached the collection of elements having class tweet inside the variable called $tweets and then reused it many times, especially in the anonymous function:

// Rotate the latest tweets
var $tweets = $('.tweet');
$tweets.not(':first-child').hide();
window.setInterval(
    function () {
        $tweets
            .filter(':visible')
            .fadeOut('slow', 'linear', function () {
                var $next = $(this).next($tweets.selector);
                if ($next.length === 0) {
                    $next = $tweets.first();
                }
                $next.fadeIn('slow', 'linear');
            });
    },
    5000
);