documentOffsetTop vs offset().top

JavaScript performance comparison

Test case created by ThinkingStiff

Preparation code

<div id="static" class="offset">0</div>
<div id="static2" class="offset">0</div>
<div id="static-wrapped-static"><br /><div class="offset">0</div></div>
<div id="absolute" class="offset">0</div>
<div id="relative" class="offset">0</div>
<div id="fixed-side" class="offset">0</div>
<div id="fixed-top" class="offset">0</div>
<div id="fixed-bottom" class="offset">0</div>
<div style="position: relative;"><div id="relative-wrapped-absolute"><div class="offset">0</div></div></div>


<style>
body {padding-left: 12px;}

#absolute {
    top: 100px;
    position: absolute;
}

#relative {
    top: 150px;
    position: relative;
}

#fixed-side {
    right: 0;
    position: fixed;
}

#fixed-top {
    left: 50%;
    position: fixed;
    top: 0;
}

#fixed-bottom {
    left: 50%;
    position: fixed;
    bottom: 0;
}

#relative-wrapped-absolute {
    top: 8px;
    position: relative;
}

#relative-wrapped-absolute div {
    position: absolute;
    top: 20px;
}

.offset {
    border: 1px solid black;
}

#grid {
    height: 100%;
    left: 0;
    position: absolute;
    top: 1px;
    width: 100%;
    z-index: -1;
}

.grid-line {
    border-bottom: 1px solid lightgray;
    font-size: 8px;
    height: 9px;
    line-height: 20px;
}
</style>

<script src="//ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
 
<script>
  Benchmark.prototype.setup = function() {
    Element.prototype.documentOffsetTop = function () { 
            return this.offsetTop + ( this.offsetParent ? this.offsetParent.documentOffsetTop : 0 );
    };
    
  };
</script>

Preparation code output

0
0

0
0
0
0
0
0
0

Test runner

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

Java applet disabled.

Testing in unknown unknown
Test Ops/sec
documentOffsetTop
 
var offset = document.getElementById( 'absolute' );
offset.textContent = 'absolute: ' 
    + offset.documentOffsetTop();

offset = document.getElementById( 'static' );
offset.textContent = 'static: ' 
    + offset.documentOffsetTop();

offset = document.getElementById( 'static2' );
offset.textContent = 'static: ' 
    + offset.documentOffsetTop();

offset = document.getElementById( 'relative' );
offset.textContent = 'relative: ' 
    + offset.documentOffsetTop();

offset = document.getElementById( 'fixed-side' );
offset.textContent = 'fixed/absolute (side): ' 
    + offset.documentOffsetTop();

offset = document.getElementById( 'fixed-top' );
offset.textContent = 'fixed/absolute (top): ' 
    + offset.documentOffsetTop();

offset = document.getElementById( 'fixed-bottom' );
offset.textContent = 'fixed/absolute (bottom): ' 
    + offset.documentOffsetTop();

offset = document.querySelectorAll( '#relative-wrapped-absolute div' )[0];
offset.textContent = 'absolute/relative/static (absolute/relative wrapped): ' 
    + offset.documentOffsetTop();

offset = document.querySelectorAll( '#static-wrapped-static div' )[0];
offset.textContent = 'static (static wrapped): ' 
    + offset.documentOffsetTop();
 pending…
offset().top
 
var offset = document.getElementById( 'absolute' );
offset.textContent = 'absolute: ' 
    + $( offset ).offset().top;

offset = document.getElementById( 'static' );
offset.textContent = 'static: ' 
    + $( offset ).offset().top;

offset = document.getElementById( 'static2' );
offset.textContent = 'static: ' 
    + $( offset ).offset().top;

offset = document.getElementById( 'relative' );
offset.textContent = 'relative: ' 
    + $( offset ).offset().top;

offset = document.getElementById( 'fixed-side' );
offset.textContent = 'fixed/absolute (side): ' 
    + $( offset ).offset().top;

offset = document.getElementById( 'fixed-top' );
offset.textContent = 'fixed/absolute (top): ' 
    + $( offset ).offset().top;

offset = document.getElementById( 'fixed-bottom' );
offset.textContent = 'fixed/absolute (bottom): ' 
    + $( offset ).offset().top;

offset = document.querySelectorAll( '#relative-wrapped-absolute div' )[0];
offset.textContent = 'absolute/relative/static (absolute/relative wrapped): ' 
    + $( offset ).offset().top;

offset = document.querySelectorAll( '#static-wrapped-static div' )[0];
offset.textContent = 'static (static wrapped): ' 
    + $( offset ).offset().top;
 
 pending…

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

Compare results of other browsers

0 comments

Add a comment