getBoundingClientRect vs fallback version (v2)

Revision 2 of this benchmark created on

Description

new's better or not?

Preparation HTML

<div>s<div>w<div>d<div>y<div>i<div>c<div>xz<div>ds<div>d<div> 
<div>s<div>w<div>d<div>y<div>i<div>c<div>xz<div>ds<div>d<div> 

<div>asdasd</div>
<div>asdasd</div>
<div>asdasd</div>
<div>asdasd</div>

<div id="inner">sdfsdfsdfsd</div>

</div></div></div></div></div></div></div></div></div></div>
</div></div></div></div></div></div></div></div></div></div>
<script>
  function elementInViewportOLD(el) {
    var top = el.offsetTop;
    var left = el.offsetLeft;
    var width = el.offsetWidth;
    var height = el.offsetHeight;
  
    while(el.offsetParent) {
      el = el.offsetParent;
      top += el.offsetTop;
      left += el.offsetLeft;
    }
  
    return (
      top >= window.pageYOffset &&
      left >= window.pageXOffset &&
      (top + height) <= (window.pageYOffset + window.innerHeight) &&
      (left + width) <= (window.pageXOffset + window.innerWidth)
    );
  }
  
  
  
      function elementInViewportNEW(el) {
          var rect = el.getBoundingClientRect()
        
        return (
                rect.top >= 0 &&
                rect.left >= 0 &&
                rect.bottom <= window.innerHeight &&
                rect.right <= window.innerWidth 
                )
      }
  
  el = document.getElementById('inner')
</script>

Test runner

Ready to run.

Testing in
TestOps/sec
old
elementInViewportOLD(el)
ready
new
elementInViewportNEW(el)
ready

Revisions

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