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

Run details:

User agent: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/138.0.0.0 Safari/537.36

Browser: Chrome 138

Operating system: Windows

Device Platform: Desktop

Date tested: one year ago

getBBox

474K/s

getComputedTextLength

451K/s

getBoundingClientRect

363K/s

View exact numbers

Test name	Executions per second
✓ getBBox	474,224 Ops/sec
getComputedTextLength	450,910 Ops/sec
getBoundingClientRect	363,217 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();