jQuery vs Vanilla JS

We have so many options for use scripts development which work with you web projects. And we all you knows that three best friends are dealing with user’s browsers on behalf of your project. And they are HTML, CSS and JavaScript.

For a brief, we can say HTML is a structure of web page. CSS will work on looks of that structure. And at last JavaScript is making things functional

And jQuery is the one of the most lovable library for a long time. Which is providing lots of predefined functions to manipulate DOM. And lots of other libraries and plugins are available online which are using jQuery. And what need to do for using jQuery? Nothing much, add library in the page. You will be able to access jQuery functionality. Let’s see why peoples use jQuery:

• Easy to learn compared to plain JavaScript
• Rich library of predefined functions which saves lots of time of development
• Can manipulate DOM, make animations and also handles AJAX calls
• Compatible with any browser
• Less condign and heavy abstraction
• Saves lots of time of development.

On other hand, Vanilla JS is ready to beat the records of other libraries and frameworks. In fact, it is used in more websites then other libraries and framework. And let’s see why this is used so much?

• Good for interfaces in dynamic websites
• No plugin requires, because it is not a library. It is plain JavaScript and it is supported by all browsers.
• Faster for DOM accessibility compared to jQuery

But somehow, it is more complex then jQuery to write code. As jQuery has good predefined functions which makes your coding easier. And one more thing, it is not browser compatible. You have to care about multi browser compatibility.

Here is the comparison of speed by appending <li> into <ul> tab 10,000 times

First we will check jQuery has done with this operation. So, here is the code

Code is quite simple. We have un-order list (<ul>) tag with id “ul”. Then CDN library with the use of script tag. Then iteration with for loop, from 1 to 10,000 to append list (<li>) tag with iteration number.

This is a performance chart of jQuery code execution. Where you can see the scripting took time 3162ms. Then Rendering that to script took 1401ms.

In this performance report you can see the append activity took 3459.5ms to print 10,000 li tags to the ul tag.

On other hand Vanilla JS has some good records compared to jQuery. Les’s see the code of Vanilla JS.

Here we can see the length of the code is increased compared to the jQuery. This is reason lazy developers prefer jQuery.

Then we focus on the performance chart of Vanilla JS code execution. And see the scripting took 1399ms and rendering 1312ms. Which are really good compared to the jQuery.

And at last, appendChild activity took only 11.8 ms to append and display 10,000 li to ul.

Finally, here is some statistics for the same process executed 10 times each and captured performance.

jQuery-Execution in Second
1) 5.47
2) 5.68
3) 5.64
4) 5.65
5) 5.74
6) 5.73
7) 5.73
8) 5.66
9) 5.71
10) 5.56
And average execution time is : 5.657

VenillaJS-Execution in Second
1) 3.33
2) 3.53
3) 3.43
4) 3.43
5) 3.44
6) 3.39
7) 3.72
8) 3.57
9) 3.46
10) 3.54
Average Execution Time in Second: 3.484

After this result we can say that Vanilla JS is faster than jQuery. The only reason that the Vanilla JS is neither library nor framework. It is just a plain JavaScript. It does not need to compile developers code and make in understandable form to browser. Because, as we know, browser only listens of JavaScript, one of those three best friends.