jQuery.height() vs. jQuery.offset()

JavaScript performance comparison

Test case created by Jacob

Info

In some cases, my algorithm could use with jQuery.height() or jQuery.offset().top to perform its function, so I would like to use whichever is faster.

Preparation code

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

<script src="https://raw.github.com/dreamerslab/jquery.actual/master/jquery.actual.min.js"></script>

<div id="item" style="background-color: #ccc; width: 100px; height: 100px; top: 100px; left: 100px;"><p>Text here...</p></div>
<script>
Benchmark.prototype.setup = function() {
    var $item = $("#item");
};

Benchmark.prototype.teardown = function() {
    delete $item; // Unneeded, but sometimes it just feels good :)
};
</script>

Preparation code output

Text here...

Test runner

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

Java applet disabled.

Testing in unknown unknown
Test Ops/sec
.offset().top
$item.offset().top;
pending…
.height()
$item.height();
pending…
.actual("offset").top
$item.actual("offset").top;
pending…
.actual("height")
$item.actual("height");
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:

0 comments

Add a comment