CODEWITHSUNDEEP
javascriptjquerydom
Caleb Faruki
Caleb Faruki

Reputation: 2735

Performance as it pertains to conditional DOM check before jQuery initialization?

This is mainly a performance question, because I sometimes see it in developers' examples for executing JavaScript.

When it comes to more strict languages like C or Java, conditions are important to prevent execution of functions that require not null data. And generally, checking for nulls helps prevent parts of the program from executing, thus minimizing memory consumption (a shallow explanation, I know).

But when it comes to JavaScript, errors generally don't prevent the rest of your script from executing. Now, in the case of jQuery, initializing DOM behavior on an element requires the CSS selector to return at least one result. But if there are no results, no errors are thrown.

My question is this: is there any performance or memory consumption difference in the browser when considering these two examples:

Case 1: You check the DOM before executing the jQuery library function.

var carousel = $('[data-carousel]');
if( carousel.length > 0) {
    carousel.slick({
        adaptiveHeight: true,
        lazyLoad: 'progressive'
    });
}

Case 2: You execute the jQuery library function without first checking for the existence of the desired selection.

$('[data-carousel]').slick({
    adaptiveHeight: true,
    lazyLoad: 'progressive'
});

EDIT I wanted to outline a couple of assumptions here to see if this makes any noteworthy differences in how this question is answered:

  1. Existence of the desired DOM element is not known before execution.
  2. Every page throughout the site may have one or more carousels (0-3 approximately).
  3. Each DOM element has additional data attributes for which I check and executing carousel behavior changes (e.g. data-carousel-autoplay modifies and refreshes the carousel initialized on that DOM element.

Comparisons between JavaScript and other languages are greatly appreciated!

Upvotes: 3

Views: 114

Answers (2)

Kevin B
Kevin B

Reputation: 95065

Testing if it exists before acting upon it will have a very small difference in performance, one small enough that you shouldn't use it to decide which path to take, you should instead use whichever is cleaner and/or easier to read/maintain.

Properly written jQuery plugins and methods (with the exception of getters and filters) look like this:

$.fn.theModule = function () {
  return this.each(function () {
    ...
  })
}

So, if there are no elements selected, it simply returns this because there will be nothing for the each to iterate over. Obviously, yes, this will have a small (not noticeable) performance impact because it's running more code than simply checking the length of an array, however this will not impact your user or your UI performance in any noticeable way.

This all assumes you're only selecting the elements once, such as in @Pointy's first snippet. Selecting twice is obviously going to be slower, possibly even in a noticeable way on big doms.

Upvotes: 3

Pointy
Pointy

Reputation: 413916

Two calls to jQuery for a single selector is worse than one.

var carousel = $("[data-carousel]");
if (carousel.length) {
  carousel.slick({
    adaptiveHeight: true,
    lazyLoad: 'progressive'
  });
}

Of course you can defer the work to the point at which the DOM is ready, either by putting the JavaScript code at the end of the <body> or else using a "ready" handler:

$(function() {
  $("[data-carousel]").slick({
    adaptiveHeight: true,
    lazyLoad: 'progressive'
  });
});

There's no real difference between grabbing a jQuery object for a selector and then testing yourself to see whether the length is non-zero, or letting the implicit iteration in some other jQuery method do it. There's probably some difference, but we're probably talking about a small number of microseconds and it's highly unlikely to matter.

The difference between caching a jQuery object after looking stuff up in the DOM instead of repeating it several times is a much more significant performance consideration. There's no intrinsic caching in jQuery.

Upvotes: 4

Related Questions