JQuery offset vs custom

Benchmark created by cbinners on

Preparation HTML

<html>
<head>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>

</head>
<div id="test">
HELLO
</div>
</html>

Setup

div = $("#test")
    div2 = document.getElementById("test")

Test runner

Ready to run.

Testing in
TestOps/sec
getBoundingClientRect
var box = div2.getBoundingClientRect();

var body = document.body;
var docEl = document.documentElement;

var scrollTop = window.pageYOffset || docEl.scrollTop || body.scrollTop;
var scrollLeft = window.pageXOffset || docEl.scrollLeft || body.scrollLeft;

var clientTop = docEl.clientTop || body.clientTop || 0;
var clientLeft = docEl.clientLeft || body.clientLeft || 0;

var top = box.top + scrollTop - clientTop;
var left = box.left + scrollLeft - clientLeft;
ready
jquery
data = div.offset()
ready
parent traversal
var elem = div2;
var offsetLeft = 0;
var offsetTop = 0;
do {
  if (!isNaN(elem.offsetLeft)) {
    offsetLeft += elem.offsetLeft - elem.scrollLeft;
  }
  if (!isNaN(elem.offsetTop)) {
    offsetTop += elem.offsetTop - elem.scrollTop;
  }
} while (elem = elem.offsetParent);
ready
parent traversal short
var elem = div2;
var offsetLeft = 0;
var offsetTop = 0;
do {
    offsetLeft += (elem.offsetLeft || 0) - elem.scrollLeft;
    offsetTop += (elem.offsetTop || 0) - elem.scrollTop;
} while (elem = elem.offsetParent);
ready

Revisions

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

  • Revision 1: published by cbinners on