jQuery .width() vs. innerWidth (v3)

Revision 3 of this benchmark created by themoonrat 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="//ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<script>
  var cachedJquery = $("#cool");
</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
$.inner
var $width = $(document.getElementById('cool'))[0].innerWidth
ready
$().inner
var $width = $("#cool")[0].innerWidth
ready
$().inner cached
var $width = cachedJquery[0].innerWidth
ready
$().width cached
var $width = cachedJquery.width()
ready

Revisions

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