getBoundingRect vs offsetWidth vs getBBox in SVG (v23)

Revision 23 of this benchmark created by drwestco on

Preparation HTML

<svg><text id="foo">FoobarfoobarFoobarfoobarFoobarfoobarFoobarfoobarFoobarfoobarFoobarfoobarFoobarfoobarFoobarfoobarFoobarfoobarFoobarfoobarFoobarfoobarFoobarfoobarFoobarfoobarFoobarfoobarFoobarfoobarFoobarfoobarFoobarfoobarFoobarfoobarFoobarfoobarFoobarfoobarFoobarfoobarFoobarfoobarFoobarfoobarFoobarfoobarFoobarfoobarFoobarfoobarFoobarfoobarFoobarfoobarFoobarfoobarFoobarfoobarFoobarfoobarFoobarfoobarFoobarfoobarFoobarfoobarFoobarfoobarFoobarfoobarFoobarfoobarFoobarfoobarFoobarfoobarFoobarfoobarFoobarfoobar</text>
</svg>

Setup

var foo = document.getElementById('foo');
    
    function getOffsetBBox(el) {
        return {
            x: el.offsetLeft,
            y: el.offsetTop,
            width: el.offsetWidth,
            height: el.offsetHeight
        };
    }
    function getClientBBox(el) {
        return {
            x: el.clientLeft,
            y: el.clientTop,
            width: el.clientWidth,
            height: el.clientHeight
        };
    }

Test runner

Ready to run.

Testing in
TestOps/sec
getBoundingClientRect
foo.getBoundingClientRect().width;
ready
offsetWidth
getOffsetBBox(foo).width;
ready
getBBox
foo.getBBox().width
ready
clientWidth
getClientBBox(foo).width;
ready

Revisions

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