MeasureThat.net

Run results for: getBBox() vs getBoundingClientRect() vs getComputedTextLength() (long text version)

Go to the benchmark
Run details:
Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/84.0.4147.135 Safari/537.36
Chrome 84
Windows
Desktop
4 years ago
Test name Executions per second
getBBox 167931.5 Ops/sec
getBoundingClientRect 108170.6 Ops/sec
getComputedTextLength 192961.5 Ops/sec
HTML Preparation code:
AخA
 
1
<svg width="150" height="150">
2
    <text id="test1" y="50">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus enim leo, suscipit nec ligula at, pulvinar viverra dolor. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Integer pulvinar ex vel viverra hendrerit. Sed dui ante, posuere in tempor vitae, pretium eu libero. Nullam ac sem nibh. Vivamus sed est rhoncus augue dignissim dapibus id sit amet arcu. Duis ac faucibus sem. Mauris in nulla urna. Maecenas laoreet lacus magna, vulputate laoreet felis consectetur finibus.</text>
3
    <text id="test2" y="100">
4
        <tspan id="test3">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus enim leo, suscipit nec ligula at, pulvinar viverra dolor. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Integer pulvinar ex vel viverra hendrerit. Sed dui ante, posuere in tempor vitae, pretium eu libero. Nullam ac sem nibh. Vivamus sed est rhoncus augue dignissim dapibus id sit amet arcu. Duis ac faucibus sem. Mauris in nulla urna. Maecenas laoreet lacus magna, vulputate laoreet felis consectetur finibus.</tspan>
5
    </text>
6
    <tspan id="test4">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus enim leo, suscipit nec ligula at, pulvinar viverra dolor. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Integer pulvinar ex vel viverra hendrerit. Sed dui ante, posuere in tempor vitae, pretium eu libero. Nullam ac sem nibh. Vivamus sed est rhoncus augue dignissim dapibus id sit amet arcu. Duis ac faucibus sem. Mauris in nulla urna. Maecenas laoreet lacus magna, vulputate laoreet felis consectetur finibus.</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();