getBoundingClientRect vs jQuery (to take top/right/bottom/left positions of element) (v2)

Revision 2 of this benchmark created on

Preparation HTML

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js">
</script>
<script>
  $(function() {
    function addStyle(css) {
      var head = document.getElementsByTagName('head')[0],
          style = document.createElement('style');
      style.type = 'text/css';

      if (style.styleSheet) style.styleSheet.cssText = css;
      else style.appendChild(document.createTextNode(css));

      head.appendChild(style);
    }

    var _css = 'body{margin:0;}' + '*{' + '  -webkit-box-sizing: border-box;' + '  -moz-box-sizing: border-box;' + '  box-sizing: border-box;' + '}' + '.relative{' + '  width: 400px;' + '  height: 400px;' + '  position: relative;' + '  background-color:green;' + '}' + '.absolute{' + '  position: absolute;' + '  top:40px;' + '  left: 20px;' + '  background-color: red;' + '  padding: 30px;' + '  overflow:hidden;' + '}' + '.inner{' + '  margin: 20px;' + '  padding: 10px;' + '  border: 5px solid gray;' + '  background-color: yellow;' + '}';
    addStyle(_css);
  });
</script>
<div class="wrapper">
  <div class="relative">
    <div class="absolute">
      <div class="inner">
        inner
      </div>
    </div>
  </div>
</div>

Setup

var $innerBox = $('.inner');

Test runner

Ready to run.

Testing in
TestOps/sec
getBoundingClientRect
var innerBox = $innerBox[0],
    marginTop = parseFloat($innerBox.css('margin-top')),
    marginRight = parseFloat($innerBox.css('margin-right')),
    marginBottom = parseFloat($innerBox.css('margin-bottom')),
    marginLeft = parseFloat($innerBox.css('margin-left')),
    clientRect = innerBox.getBoundingClientRect();

clientRect['bottomWithMargin'] = clientRect.bottom + marginTop + marginBottom;
clientRect['rightWithMargin'] = clientRect.right + marginLeft + marginRight;
ready
jQuery
var offset = $('innerBox').position();

offset.right = offset.left + $innerBox.outerWidth(true);
offset.bottom = offset.top + $innerBox.outerHeight(true);
ready

Revisions

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