getBoundingClientRect vs jQuery

JavaScript performance comparison

Test case created by Nicklas Ansman

Preparation code

<script src="//ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js">
</script>
<div id="foo" style="width:500px; height:500px; padding:10px; border:10px solid #000000;">
</div>
<script>
  Benchmark.prototype.setup = function() {
    var foo = document.getElementById('foo');
    var $foo = $(foo);
  };
</script>

Preparation code output

Test runner

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

Java applet disabled.

Testing in unknown unknown
Test Ops/sec
getBoundingClientRect
foo.getBoundingClientRect()
pending…
jQuery
$.extend({}, $foo.offset(), {
  width: foo.offsetWidth,
  height: foo.offsetHeight
})
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. Here’s a list of current revisions for this page:

3 comments

Meridith commented :

Hey there! I know this is somewhat off topic but I was wondering if you knew where I could get a captcha plugin for my comment form? I'm using the same blog platform as yours and I'm having difficulty finding one? Thanks a lot!

My name commented :

There's captcha here?

Alexander Pervushin commented :

this two approaches will return different results in case of rotated element (throught css transforms): 1. foo.offsetWidth and foo.offsetHeight will return width and height of the element sides (i.e. rotation will have no effect on this values) 2. getBoundingClientRect will return width and height of the element bounding box

Add a comment