Menu
I am trying to improve the frontend page load speed for users, and I am finding that jQuery is slowing the DomContentLoaded event down by more than 100ms.
I am benchmarking on Windows 7 with Chrome 17 using a computer with an i5 2.5Ghz, SSD drive, and 8GB of RAM. The test is run on my local computer. I'm concerned that the slow speed I see on my machine will be even slower on older computers and browsers.
Is this just the standard penalty for using jQuery, or is there a way to speed up the performance that I am missing?
Here is the code that I am using:
<!DOCTYPE html>
<html>
<head>
<script type="text/javascript">
console.time("DOMContentLoaded");
</script>
</head>
<body>
<h1>Hello World</h1>
<script type="text/javascript" src="/js/jquery-1.7.1.min.js"></script>
<script type="text/javascript">
document.addEventListener( "DOMContentLoaded", ready, false );
function ready() {
console.timeEnd("DOMContentLoaded");
}
</script>
</body>
</html>
On the console, the time that I see is roughly ~100ms.
When I remove the line that loads jQuery, the time is roughly ~1ms.
I also tried the code above using the Google CDN:
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
The result is largely the same.
Is there always a 100ms penalty for using jQuery? Is there something that I am missing? Thanks!
765
jQuery is an easy way to get a result, but the way it loads is bad. The load process blocks everything else and makes your site feel slow. jQuery is also far from fast loading. It is heavy and slows page loading down a lot.
For small websites and simple web apps, the advantages of jQuery will often outweigh the minimal performance impact. For larger websites and web apps with thousands of lines of code, or those processing large amounts of data using JavaScript then performance is absolutely something to consider.
Poorly written JavaScript code can slow your website, negatively affecting load times and rendering speed.
jQuery in terms of speed is quite fast for modern browsers on modern computers. So is pure JavaScript. Both run drastically slower on older browsers and machines. Pure Javascript to access the DOM can be faster as you can cut the overhead that jQuery has on this.
You are going to see a small hit whenever loading a large JS library like jQuery. Personally, I'd argue that 100ms isn't much, you have to keep in mind ALL of the factors leading to this:
Keep in mind, that most pages won't have NEARLY as much custom JS (based on jQuery) as the actual library itself, so even an intensively interactive page will only see a few [dozen] milliseconds of additional overhead over what the library itself has already imposed.
As for people with old machines/browsers; chances are they're experiencing poor performance on every page they visit. The web is a dynamic place, you have to keep up if you want to have a good experience. There's only so much you can do for luddites.
97
jQuery is a 92K file. You have to load it and parse it.
I have hosted your example at studio831.com/jquery_test/index.html, cdn.html, and dom_ready.html.
You can look at the times each take to download. You can also use Chrome's developer tools to see the breakdown how long downloads takes.
38
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
