query selector vs cache dom object vs jquery object

Benchmark created by ssavajols on

Description

Test query selector performance against DOM element in var against jQuery object

Preparation HTML

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<div id='element-id'></div>

Setup

var element = document.getElementById('element-id');
    var $element = $('#element-id');

Test runner

Ready to run.

Testing in
TestOps/sec
querySelector
document.querySelector('#element-id').className = '';
document.querySelector('#element-id').className = 'this-is-classname';
ready
cache var
element.className = '';
element.className = 'this-is-classname';
ready
jQuery no cache
$('#element-id').attr('class', '');
$('#element-id').attr('class', 'this-is-classname');
ready
jQuery cache
$element.attr('class', '');
$element.attr('class', 'this-is-classname');
ready

Revisions

You can edit these tests or add more tests to this page by appending /edit to the URL.

  • Revision 1: published by ssavajols on