jQuery .width() vs. innerWidth

Benchmark created by Deryck on

Description

To be fair I'll use the $(doc.getelid(sel)) for jQ with a comparison to less speedy versions.

Preparation HTML

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<div id="cool" style="width: 350px;height: 200px;">a bunch of codea bunch of codea bunch of codea bunch of codea bunch of codea bunch of codea bunch of codea bunch of codea bunch of codea bunch of codea bunch of codea bunch of codea bunch of code</div>

Test runner

Ready to run.

Testing in
TestOps/sec
$
var $width = $(document.getElementById('cool')).width();
ready
js
var width = document.getElementById('cool').innerWidth;
ready
$('sel')
var $width = $('#cool').width();
ready
js to jQ transfer
var cool = document.getElementById('cool');
var $width = $(cool).width();
ready
js to var
var cool = document.getElementById('cool');
var width = cool.innerWidth;
ready

Revisions

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