Benchmark: getBBox() vs getBoundingClientRect() vs getComputedTextLength() (long text version)

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();

Rendered benchmark preparation results:

Suite status: <idle, ready to run>

Previous results

Test case name	Result
getBBox
getBoundingClientRect
getComputedTextLength

Fastest: N/A

Slowest: N/A

Latest run results:

Run details: (Test run date: one year ago)

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/OS: Chrome 138 on Windows

View result in a separate tab

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

Autogenerated LLM Summary (model llama3.2:3b, generated one year ago):

LLMs can make mistakes. Check important info.

Let's break down the provided benchmark and explain what's being tested.

**Overview**

The benchmark compares the performance of three different methods to retrieve width information from HTML elements:

1. `getBBox()`: Returns the bounding box of an element, which includes its width, height, and other dimensions.
2. `getBoundingClientRect()`: Returns a rectangle object with properties like `width`, `height`, etc., representing the element's size relative to the viewport.
3. `getComputedTextLength()`: Returns the length of the text within an element.

**Options compared**

The benchmark compares the execution times for each method on three different elements:

* `test1` and `test2`: Two `<text>` elements with varying amounts of text content, which affects their width values.
* `test3` and `test4`: Similar to `test1` and `test2`, but with a longer text string.

**Pros and cons of each approach**

1. **getBBox()**:
	* Pros: Simple and straightforward, doesn't require any additional calculations or context.
	* Cons: May be slower than other methods due to its inherent complexity in calculating the bounding box, especially for elements with complex shapes or multiple child elements.
2. **getBoundingClientRect()**:
	* Pros: More efficient than `getBBox()` because it only retrieves the necessary dimensions (width, height) without considering the element's size relative to the viewport.
	* Cons: Requires accurate calculation of the viewport's width and height, which can be slower or more complex in certain scenarios.
3. **getComputedTextLength()**:
	* Pros: Fast and efficient because it only calculates the text length within a single element.
	* Cons: May not be suitable for elements with multiple child nodes or complex layout structures.

**Library usage**

The benchmark uses two HTML libraries:

1. `document.getElementById()` : A native JavaScript API for selecting HTML elements based on their IDs.
2. `svg` library (not explicitly used, but implied by the presence of `<text>` and `<tspan>` elements): SVG (Scalable Vector Graphics) is a markup language used to create two-dimensional vector graphics.

**Special JS features or syntax**

The benchmark uses:

1. **Template literals**: Used in the `Benchmark Definition` strings to concatenate and format values.
2. **arrow functions** (not explicitly used, but implied by the use of concise function definitions): Not necessary for this specific benchmark, as the function bodies are simple and don't require an arrow syntax.

**Alternatives**

If you're interested in exploring alternatives, here are a few options:

1. **Use `getComputedStyle()` instead of `getBoundingClientRect()`**: While `getComputedStyle()` can provide similar functionality, it may be slower or more complex due to its need for the CSS styles and layout context.
2. **Implement custom width calculations using DOM manipulation**: Instead of relying on built-in methods like `getBBox()` and `getComputedTextLength()`, you could write custom JavaScript functions to calculate widths based on element dimensions, padding, and margins.
3. **Use a library like MathJax or TeX.js for complex text rendering**: If you need to render mathematical equations or other complex text content, consider using specialized libraries designed for this purpose.

Keep in mind that the performance differences between these approaches may be relatively small, and the benchmark's focus is on comparing the relative speeds of `getBBox()`, `getBoundingClientRect()`, and `getComputedTextLength()` for specific use cases.

getBBox() vs getBoundingClientRect() vs getComputedTextLength() (long text version) (version: 0)

Comparing performance of: `getBBox vs getBoundingClientRect vs getComputedTextLength`

Created: 5 years ago by: Guest

Go to the latest result

getBBox

getBoundingClientRect

getComputedTextLength

Suite status: <idle, ready to run>

Fastest: N/A

Slowest: N/A

Autogenerated LLM Summary (model llama3.2:3b, generated one year ago):

getBBox() vs getBoundingClientRect() vs getComputedTextLength() (long text version) (version: 0)

Comparing performance of: getBBox vs getBoundingClientRect vs getComputedTextLength

Created: 5 years ago by: Guest

Go to the latest result

getBBox

getBoundingClientRect

getComputedTextLength

Suite status: <idle, ready to run>

Fastest: N/A

Slowest: N/A

Autogenerated LLM Summary (model llama3.2:3b, generated one year ago):

Related benchmarks

Comparing performance of: `getBBox vs getBoundingClientRect vs getComputedTextLength`