jQuery vs JavaScript Performance Comparison

JavaScript performance comparison

Revision 7 of this test case created

Preparation code

<div id="hello"></div>
<div class="bye"></div>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
 

Preparation code output

Test runner

Warning! For accurate results, please disable Firebug before running the tests. (Why?)

Java applet disabled.

Testing in unknown unknown
Test Ops/sec
jQuery ID Selector
var $el = $('#hello');
pending…
JavaScript ID Selector
var $el = document.querySelector('#hello');
pending…
jQuery Class Selector
var $el = $('.bye');
pending…
JavaScript Class Selector
var $el = document.querySelector('.bye');
pending…

Compare results of other browsers

Revisions

You can edit these tests or add even more tests to this page by appending /edit to the URL. Here’s a list of current revisions for this page:

2 comments

Shotgun Ninja commented :

Is there a way to rearrange the ordering in which tests are run, possibly to randomize it? Time-of-execution based metrics such as these may vary depending on the order of execution, since the host operating system may have a systemic difference in page hits, the CPU fan may have turned on, or any of a number of other errors may have occurred which skew the results of this test. Between the browser versions tested, this may be an okay comparison, but in comparing, say, Javascript vs. jQuery, this test has a likelihood to skew the results, due to the distinct ordering of the tests.

Loupax commented :

Just a heads up for this test. $('.bye') selects all the elements with the bye class, while document.querySelector('.bye') selects only the first element of that set, making it look like it is significantly faster while it is not.

Add a comment