height() vs outerHeight and caching

Benchmark created by Deryck on

Preparation HTML

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

Test runner

Ready to run.

Testing in
TestOps/sec
pure JS
var h = document.body.outerHeight;
document.getElementById('disk').outerHeight /= 1.5;
document.getElementById('disk').outerWidth /= 1.5;
ready
jQuery height()
  var h = $("body").height();
  $("#disk").height(h / 1.5);
  $("#disk").width(h / 1.5);
ready
pure JS w/ caching
var h = document.body.outerHeight,
  disk = document.getElementById('disk');
disk.outerHeight /= 1.5;
disk.outerWidth /= 1.5;
ready
jQuery height() w/ caching
var $body = $('body'),
  $disk = $('#disk'),
  h = $body.height();
$disk.height(h / 1.5);
$disk.width(h / 1.5);
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