Library Comparison

Find Element Position

Most libraries try provide some functionality for finding an element's position, but fail in all but the simplest cases.

This page provides two visual "tests" to demonstrate the libraries' results of finding an element's position and the time it takes for them to succeed or fail.

Green means PASS, red means FAIL

Speed Legend
Excellent Very Good Good Fair A little slow Slow Very Slow Extremely slow Slower than Extremely slow Comatose Nearly Dead
Simple Tree with Margin, Padding, and Border on BODY
Your Browser Firefox 3 Firefox 2 IE 8 IE 7 Safari 3 Opera 9
Result Time 200 Result Time 200 Result Time 200 Result Time 200 Result Time 200 Result Time 200

Simple Tree Results

APE and jQuery passed in all browsers. APE outperformed jQuery

APE: Passes this test in all browsers. Good performance

Dojo: Passes in Opera (but a little slow). Leaving IE running will cause slower results, over time (only dojo's results get slower). Restarting IE does not help. Restarting the computer does.

jQuery: Passed all browsers. Performance was a little slow.

Yui: passed in all browsers but Safari. Fair performance

Prototype: Excellent performance on simple tree. Passes in Opera only.
APE 30, 30 12ms 30, 30 343ms 30, 30 16ms 30, 30 16ms 30, 30 31ms 30, 30 31ms
Dojo 30, 0 64ms 30, 1 1314ms 28, -2 1797ms 28, -2 3062ms 30, 0 78ms 30, 30 110ms
jQuery 30, 30 69ms 30, 30 1303ms 30, 30 62ms 30, 30 46ms 30, 30 78ms 30, 30 110ms
Prototype 10, 10 8ms 10, 10 93ms 55, 25 31ms 54, 24 31ms 20, 20 0ms 30, 30 16ms
YUI 30, 30 39ms 30, 30 445ms 30, 30 47ms 30, 30 46ms 20, 20 47ms 30, 30 47ms
Position Relative on BODY
Your Browser Firefox 3 Firefox 2 IE 8 IE 7 Safari 3 Opera 9
Result Time 200 Result Time 200 Result Time 200 Result Time 200 Result Time 200 Result Time 200

Position: relative on BODY Results

Only APE passed in all browsers and with better peformance than the other libraries (except Prototype on a few cases, but Prototype failed in all but Opera).

Firefox 2 (on a powerbook) is Extremely slow. Disabling extensions helped somewhat.

APE: Passes this test in all browsers. Fair performance, but a little slow in Opera.

Dojo: Passes in Firefox3 with fair performance.

jQuery: Passed all browsers except Firefox 2 and Safari. Performance was slow, especially in Firefox 2, at over three seconds for 200 iterations. That's 16ms per call.

Prototype: Fair/Good performance. Passes in Opera only.

Yui: passed in all browsers but Safari and Firefox2. Performance was slow.
APE 55, 40 15ms 55, 40 901ms 55, 40 47ms 55, 40 47ms 55, 40 31ms 55, 40 94ms
Dojo 55, 40 81ms 56, 41 1808ms 53, 38 1266 58, 38 594ms 40, 40 47ms 55, -762 157ms
jQuery 55, 40 70ms 40, 40 3266ms 55, 40 125ms 55, 40 62ms 40, 40 141ms 55, 40 578ms
Prototype 30, 30 16ms 30, 30 140ms 77, 167 125ms 82, 564 62ms 35, 35 0ms 55, 40 47ms
YUI 55, 4042ms 30, 30 1208ms 55, 40 94ms 55, 40 47ms 35, 35 47ms 55, 40 141ms

Conclusion

There are many cases of having position, border, margin, on BODY, that can cause problems with finding an element's position. There are complications with padding, border on HTML root element but that CSS is broken in IE8b (connect id 354453), so the rules are not rendered in IE and the element's position can't be tested. APE guards against all of these problems by having a test case that is mostly devoted to testing this function with combinations of these cases.

Prototype and Dojo have the most problems with finding an element's position. Dojo is very slow and has mostly inaccurate results. Prototype at least fails quickly. Prototype throws an error, on page load: element.dispatchEvent is not a function. Looking at the code for the libraries can reveal the mistakes that cause these results. In the case of PrototypeJS, the error is caused by making assumptions about augmenting Host objects' prototypes (the cause of the problem).

APE passed both tests in all browsers. There are many other tests in the test case (not shown here).