Taking a look at jQuery's performance

jQuery is a great JavaScript library for getting things done quickly without having to put too much thought into how you're going to be doing it. Getting DOM elements is a streamlined process, and chaining functions together makes for a non-stop coding session that can last minutes. But that doesn't come without some cost to performance. Remember, jQuery is based on JavaScript, which means that JavaScript will always be faster in every respect of the way.

As someone who normally prefers vanilla JavaScript over any other means, I can still see the benefit in using jQuery and would rather have it on my page than not. But I won't be using it for every single statement and will instead combine it to perform code intensive functions while keeping standard functionality such as getting an element from the DOM in plain JavaScript.

This weekend I ran through various tests in order to see just how big the performance hit was when using jQuery, particularly for low complexity statements such as toggling classes and getting DOM elements. Was there a difference? You betcha there was. Read on to see the results of my experiments.

Due to the many browser discrepancies (browser wars), the tests yield vastly different results on each browser. So I will be running the experiments on Chrome, Firefox and Edge and showing the results for each.

The test

Running trivial functions such as getElementBy and toggleClass only take the most minute of milliseconds regardless of the browser. As such, I normally run these operations a few tens of millions of times and sum the total run time. I then average out the run times to give me a good baseline number. And I will run the experiment a few hundred times in order to get a more accurate value.

Getting DOM elements

Quite possibly the most widely used function in either JavaScript or jQuery. The jQuery object looks simple enough to the plain eye, but it is doing quite a few things behind the scenes. One being handling browser compatibility issues. But it does so at quite the resource cost.

An important part to note about performance in jQuery is just how it differs between browsers. Most noticeable to me in this case was the difference between Firefox and Chrome using plain JavaScript. .08ms vs 4.34ms is multitudes of magnitude larger than expected for such a widely used function.

Also noticeable is the run time for Edge, however, it is so much larger than the other browsers that I will have to assume that it will follow this trend going forward.

Toggling classes

The following will test the act of toggling a class name using the jQuery built-in function and the standard JavaScript way of doing so. The results are definitely more interesting than anticipated.

The results of this test were surprising to say the least as mentioned. Mainly due to the fact that toggling classes in general just seems to be an expensive operation. Chrome came out on top here when using plain JavaScript, however Firefox wins out when using jQuery.

When running the test for Edge, I assumed that the test had failed on multiple times, not realizing that the run time was so vast that I just had to sit and wait. The reason being that each test run took 4000ms on average, which is roughly 4 seconds. Running the experiment 100 times to calculate better averages leads to a 400 second run time.

Getting values from text fields

Firefox totally gets the gold here with the plain JavaScript approach by coming in orders of magnitude under Chrome. jQuery for the most part performed about the same on each browser. And once again Edge comes in 3rd with surprisingly large numbers.

Post Analysis

It's important in this case to weigh the benefits of using jQuery versus the cost in performance. While using jQuery can add time to an operation, it can also save a developer time in terms of debugging, cross-browser compliance and error handling. In no way am I saying do not use jQuery. But I am saying, use it wisely and when necessary. Performance is definitely a factor in terms of user acquisition and time on site. A slow performing site will have a much higher bounce and exit rate than its counter part.

On average, you might not notice the difference in performance using either browser, as I had to run these operations millions of times in order to get decent numbers. I'm also running these tests on a Surface Pro with an i5 processor which will definitely help in getting better run times. So there are quite a few factors to take note of when measuring performance. But the numbers nonetheless do paint a picture as to how the different browsers deal with frameworks.

Having said that, Edge definitely stood out with these tests and definitely took me by surprise. The numbers were indeed high enough where you might actually get visual performance issues when surfing sites with heavy content. It does offer many features that you might not find with other browsers however, particularly if you are using Windows 10, so that could definitely weigh in when choosing which browser to use.

This was definitely an informative experiment on my part, and gave me more insight into technologies that I've been using for years but that I've never really had a chance to dive deep into. And hopefully it gave you some insight as well.