height() vs outerHeight and caching (v2)

Revision 2 of this benchmark created by Andy Pan on

Preparation HTML

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<div id="disk" style="z-index:-100; width: 2880px; height: 2880px; position: fixed;">

Setup

var ww=-1,hh=-1;
    var $disk=$("#disk");

Test runner

Ready to run.

Testing in
TestOps/sec
pure JS
hh=document.getElementById('disk').outerHeight;
ww=document.getElementById('disk').outerWidth;
ready
jQuery height()
hh=$("#disk").height();
ww=$("#disk").width();
ready
pure JS w/ caching
var disk = document.getElementById('disk');
hh=disk.outerHeight;
ww=disk.outerWidth;
ready
jQuery height() w/ caching
hh=$disk.height();
ww=$disk.width();
ready
jQuery w/ caching outer false
hh=$disk.outerHeight();
ww=$disk.outerWidth();
ready
jQuery w/ caching outer true
hh=$disk.outerHeight(true);
ww=$disk.outerWidth(true);
ready
hybrid
var dd=$disk[0];
hh=dd.outerHeight;
ww=dd.outerWidth;
ready

Revisions

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

  • Revision 1: published by Deryck on
  • Revision 2: published by Andy Pan on