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

Run details:

User agent: Mozilla/5.0 (Linux; Android 10; K) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/132.0.0.0 Mobile Safari/537.36

Browser: Chrome Mobile 132

Operating system: Android

Device Platform: Mobile

Date tested: one year ago

getComputedTextLength

25K/s

getBBox

10K/s

getBoundingClientRect

9K/s

View exact numbers

Test name	Executions per second
✓ getComputedTextLength	24,915 Ops/sec
getBBox	9,896 Ops/sec
getBoundingClientRect	8,671 Ops/sec

HTML Preparation code:

<svg width="150" height="150">
	<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>
	<text id="test2" y="100">
		<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>	
	</text>
	<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>
</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();