offsetWidth vs getClientRects vs getBoundingClientRect

Benchmark created by Stephen Kraushaar on

Preparation HTML

<div>
   <div id="test" style="border:1px solid red; position:absolute; top:20px; left:20px; height:20px; width:20px">
</div>

Setup

window.el = document.getElementById("test");
    window.y = 0;

Teardown


    delete window.el;
    delete window.y;

Test runner

Ready to run.

Testing in
TestOps/sec
offsetWidth
y += el.offsetWidth;
ready
getClientRects
y += el.getClientRects()[0].width;
ready
getBoundingClientRect
y += el.getBoundingClientRect().width;
ready

Revisions

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

  • Revision 1: published by Stephen Kraushaar on