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

Revision 2 of this benchmark created on November 30, 2012

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>
  //taken from...
  //http://stackoverflow.com/questions/4976936/get-the-available-browser-window-size-clientheight-clientwidth-consistently-ac
  //or
  //http://jibbering.com/faq/#getWindowSize
  var getWindowSize = (function() {
    var docEl = document.documentElement,
        IS_BODY_ACTING_ROOT = docEl && docEl.clientHeight === 0,
        b = document.body;

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

    function isDocumentElementHeightOff() {
      var d = document,
          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 function() {
        return {
          width: document.clientWidth,
          height: document.clientHeight
        };
      };
    } else if (IS_BODY_ACTING_ROOT || isDocumentElementHeightOff()) {
      return function() {
        return {
          width: b.clientWidth,
          height: b.clientHeight
        };
      };
    } else {
      return function() {
        return {
          width: docEl.clientWidth,
          height: docEl.clientHeight
        };
      };
    }
  })();

  var id_width = document.getElementById('Width'),
      id_height = document.getElementById('Height');
</script>

Teardown

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

Test runner

var $window = $(window),
    $window_width = $window.width(),
    $window_height = $window.height();

var $window_width = getWindowSize().width,
    $window_height = getWindowSize().height;

Revisions

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

• Revision 1: published on November 30, 2012
• Revision 2: published on November 30, 2012
• Revision 3: published on November 30, 2012
• Revision 6: published on December 1, 2012