Window Size - Custom Vanilla vs jQuery .height() .width() (v6)

Revision 6 of this benchmark created on

Preparation HTML

<script src="//ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js">
</script>
<!-- -->
<span>
  Width:
</span>
<span id='Width'>
</span>
<br/>
<span>
  Height:
</span>
<span id='Height'>
</span>
<!-- -->
<script>
  var id_width = document.getElementById('Width'),
      id_height = document.getElementById('Height'),
      jquery_window = $(window);

  //Custom function taken from...
  //http://stackoverflow.com/questions/4976936/get-the-available-browser-window-size-clientheight-clientwidth-consistently-ac
  //derived from...
  //http://jibbering.com/faq/#getWindowSize
  //
  //original has been modified
  //
  var getWindowSize = (function() {
    var docEl = document.documentElement,
        d = document,
        b = document.body,
        IS_BODY_ACTING_ROOT = docEl && docEl.clientHeight === 0;

    // Used to feature test Opera returning wrong values
    // for documentElement.clientHeight.

    function isDocumentElementHeightOff() {
      var div = d.createElement('div'),
          r;
      div.style.height = "50000px";
      d.body.insertBefore(div, d.body.firstChild);
      r = d.documentElement.clientHeight > 49000;
      d.body.removeChild(div);
      return r;
    }

    if (typeof document.clientWidth === "number") {
      return {
        width: function() {
          return d.clientWidth;
        },
        height: function() {
          return d.clientHeight;
        }
      };
    } else if (IS_BODY_ACTING_ROOT || isDocumentElementHeightOff()) {
      return {
        width: function() {
          return b.clientWidth;
        },
        height: function() {
          return b.clientHeight;
        }
      };
    } else {
      return {
        width: function() {
          return docEl.clientWidth;
        },
        height: function() {
          return docEl.clientHeight;
        }
      };
    }
  })();
</script>

Teardown


    id_width.innerHTML = $window_width + '';
    id_height.innerHTML = $window_height + '';

Test runner

Ready to run.

Testing in
TestOps/sec
jQuery
var $window_width = jquery_window.width(),
    $window_height = jquery_window.height();
ready
Custom Vanilla
var $window_width = getWindowSize.width(),
    $window_height = getWindowSize.height();
ready

Revisions

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