javascript - Performance: Calculating Div Positions -

i set @ test case on jsperf here: http://jsperf.com/rect-vs-offsettopmsa

now lot of results there seem intuitive , make sense, there 1 thing bothers me regarding scrolltop , offsettop.

why scrolltop 3-4x faster offsettop if both dom element properties? since offsettop read-only property according msdn: https://developer.mozilla.org/en-us/docs/web/api/htmlelement/offsettop

i can't sure — you'll have examine source code sure. obvious reason offsettop poorer performance is more complicated compute.

to calculate element.scrolltop browser needs explore element asking — can input data needs it.

but calculate element.offsettop need calculate element's position , it's parent's — , compare them relative position. hence more time needed perform it.

here can find description of how element.offsettop works according spec.

if element html body element or not have associated css layout box return 0 , terminate algorithm.

if offsetparent of element null return y-coordinate of top border edge of first css layout box associated element, relative initial containing block origin, ignoring transforms apply element , ancestors, , terminate algorithm.

return result of subtracting y-coordinate of top padding edge of first css layout box associated offsetparent of element y-coordinate of top border edge of first css layout box associated element, relative initial containing block origin, ignoring transforms apply element , ancestors.

so yeah, if looks simple property, still can trigger calculations on element.

updated:

it looks answer still incorrect because of interface declared in same spec:

partial interface htmlelement {   readonly attribute element? offsetparent;   readonly attribute long offsettop;   readonly attribute long offsetleft;   readonly attribute long offsetwidth;   readonly attribute long offsetheight; }; 

so, yes, both properties readonly, fact 1 3 times faster other doesn't make sense. ignore i've written earlier.