MeasureThat.net

Run results for: getBBox() vs getBoundingClientRect() vs getComputedTextLength()

Go to the benchmark
Run details:
Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/87.0.4280.88 Safari/537.36
Chrome 87
Windows
Desktop
4 years ago
Test name Executions per second
getBBox 275414.2 Ops/sec
getBoundingClientRect 166497.1 Ops/sec
getComputedTextLength 284765.8 Ops/sec
HTML Preparation code:
AخA
 
1
<svg width="150" height="150">
2
    <text id="test1" y="50">test1</text>
3
    <text id="test2" y="100">
4
        <tspan id="test3">test3</tspan>
5
    </text>
6
    <tspan id="test4">test4</tspan>
7
</svg>
Script Preparation code:
 
var test1 = document.getElementById('test1');
var test2 = document.getElementById('test2');
var test3 = document.getElementById('test3');
var test4 = document.getElementById('test4');
Tests:

  • getBBox

     
    test1.getBBox().width;
    test2.getBBox().width;
    test3.getBBox().width;
    test4.getBBox().width;

  • getBoundingClientRect

     
    test1.getBoundingClientRect().width;
    test2.getBoundingClientRect().width;
    test3.getBoundingClientRect().width;
    test4.getBoundingClientRect().width;

  • getComputedTextLength

     
    test1.getComputedTextLength();
    test2.getComputedTextLength();
    test3.getComputedTextLength();
    test4.getComputedTextLength();