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.
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
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.
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
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.
Did you find this article helpful?
Stay up to date with my weekly coding tips!
Walter G. is a software engineer, startup co-founder, former CTO of several tech companies and currently teaches programming for a coding bootcamp. He has been blogging for the past 5 years and is an avid BMX rider, bio-hacker
and performance enthusiast.