offsetTop and offsetLeft vs jQuery's offset()

JavaScript performance comparison

Revision 12 of this test case created by

Preparation code

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js">
</script>
<div id="test">
  Hello world!
</div>
      
<script>
Benchmark.prototype.setup = function() {
  var divs = $('#test');
  var div2s = document.getElementById('test');
  var left = 'offsetLeft';
  var top = 'offsetTop';
  var vTestX, vTestY;

};
</script>

Preparation code output

<div id="test"> Hello world! </div>

Test runner

Warning! For accurate results, please disable Firebug before running the tests. (Why?)

Java applet disabled.

Testing in CCBot 2.0.0 / Other 0.0.0
Test Ops/sec
offsetTop and offsetLeft
div2s.offsetLeft = 500;
div2s.offsetTop = 500;
pending…
jQuery's offset()
divs.offset({
  left: 500,
  top: 500
});
pending…
get offset
vTestX = div2s.offsetLeft;
vTestY = div2s.offsetTop;
pending…
get jquery offset
vTestX = divs.offset().left;
vTestY = divs.offset().top;
pending…
offsetLeft/Top bracket
vTestX = div2s[left];
vTestY = div2s[top];
pending…
style.top and style.left
div2s.style.left = 500 + 'px';
div2s.style.top = 500 + 'px';
pending…

Compare results of other browsers

Revisions

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

0 Comments

Hello world!