scrolling cost

Benchmark created by John-David Dalton on October 11, 2011

Description

Preparation HTML

<script>
var all = document.getElementsByTagName('*');
var scrollEl = (function() {
  var scrollTop,
      div = document.createElement('div'),
      body = document.body,
      bodyStyle = body.style,
      bodyHeight = bodyStyle.height,
      html = document.documentElement,
      htmlStyle = html.style,
      htmlHeight = htmlStyle.height,
      result = body;

  bodyStyle.height  = htmlStyle.height = 'auto';
  div.style.cssText = 'display:block;height:9001px;';
  body.insertBefore(div, body.firstChild);
  scrollTop = html.scrollTop;

  if (html.clientWidth !== 0 && ++html.scrollTop && html.scrollTop == scrollTop + 1) {
    result = html;
  }
  body.removeChild(div);
  bodyStyle.height = bodyHeight;
  htmlStyle.height = htmlHeight;
  html.scrollTop = scrollTop;
  return result;
}());
</script>

Setup

var all = window.all,
        count = -1,
        scrollEl = window.scrollEl,
        scrollHeight = scrollEl.scrollHeight;

Test runner

var el,
    i = -1;

while (el = all[++i]) {
  scrollEl.scrollTop = (++count % scrollHeight, 0);
  // busy work
  if (el.nodeType == 1) {
    el.nodeName.toUpperCase();
  }
}

var el,
    i = -1;

while (el = all[++i]) {
  scrollEl.scrollTop = (0, ++count % scrollHeight);
  // busy work
  if (el.nodeType == 1) {
    el.nodeName.toUpperCase();
  }
}

Revisions

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

• Revision 1: published by John-David Dalton on October 11, 2011