Benchmark: getBBox() vs getBoundingClientRect() vs baseVal

HTML Preparation code:

<svg width="150" height="150">
	<text id="test1" y="50">test1</text>
	<text id="test2" y="100"></text>
    <text id="test3" y="150">test3</text>
</svg>

Script Preparation code:

var test1 = document.getElementById('test1');
var test2 = document.getElementById('test2');
var test3 = document.getElementById('test3');

Tests:

getBBox
test1.getBBox().y; test2.getBBox().y; test3.getBBox().y;
getBoundingClientRect
test1.getBoundingClientRect().y; test2.getBoundingClientRect().y; test3.getBoundingClientRect().y;
baseVal
test1.y.baseVal.getItem(0).value; test2.y.baseVal.getItem(0).value; test3.y.baseVal.getItem(0).value;

Historical Performance Data aggregated from 20 community runs

Desktop Results:

Chrome 20 runs

baseVal

1.2M/s

getBBox

301K/s

getBoundingClientRect

250K/s

Fastest: baseVal (4.8x faster)

View exact numbers

✓ baseVal: 1,204,522 ops/sec
• getBBox: 300,840 ops/sec
• getBoundingClientRect: 249,905 ops/sec

Results show median performance across all community submissions. Run this benchmark yourself to verify on your device.

Rendered benchmark preparation results:

Suite status: <idle, ready to run>

Previous results

Test case name	Result
getBBox
getBoundingClientRect
baseVal

Fastest: N/A

Slowest: N/A

Latest run results:

Run details: (Test run date: 10 months ago)

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

Browser/OS: Chrome 140 on Windows

View result in a separate tab

baseVal

897K/s

getBBox

151K/s

getBoundingClientRect

117K/s

View exact numbers

Test name	Executions per second
✓ baseVal	897,244 Ops/sec
getBBox	151,247 Ops/sec
getBoundingClientRect	117,374 Ops/sec

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

LLMs can make mistakes. Check important info.

**Overview of the Benchmark**

The provided JSON represents a JavaScript benchmarking test created on MeasureThat.net. The test compares the performance of three methods: `getBBox()`, `getBoundingClientRect()`, and `baseVal`. Each method is tested in isolation, with multiple executions per second.

**Methods being Compared**

1. **getBBox()**: This method returns the bounding box coordinates (x, y, width, height) of an element. It's a native JavaScript API.
2. **getBoundingClientRect()**: This method returns the size and position of an element relative to the viewport. It's also a native JavaScript API, but it provides more information than `getBBox()` due to its inclusion of the element's offset from the viewport.
3. **baseVal**: This method is used to get the value of a CSS base unit (e.g., pixels). It seems to be related to the `y` property in the provided HTML, which defines the y-coordinate of an SVG text element.

**Options being Compared**

The options being compared are:

* `getBBox()`: The native JavaScript API for getting the bounding box coordinates.
* `getBoundingClientRect()`: The native JavaScript API for getting the size and position of an element relative to the viewport.
* `baseVal`: A method that returns the value of a CSS base unit, used in this case to get the y-coordinate of an SVG text element.

**Pros and Cons of each approach**

1. **getBBox()**: Pros:
	* Fast and lightweight
	* Provides accurate bounding box coordinates
Cons:
	* May not account for viewport size or position
2. **getBoundingClientRect()**: Pros:
	* Provides more information about the element's size and position relative to the viewport
Cons:
	* More computationally expensive than `getBBox()` due to the inclusion of offset values
3. **baseVal**: Pros:
	* Efficient for retrieving CSS base unit values
Cons:
	* Not directly applicable for getting bounding box coordinates or element positions

**Library and Special JS Features**

The provided HTML uses an `<svg>` element, which indicates that this benchmark is using SVG (Scalable Vector Graphics) to display the text elements. The `baseVal` method seems to be related to SVG attributes.

There are no special JavaScript features being tested in this benchmark.

**Other Alternatives**

If you wanted to add more alternatives to this benchmark, you could consider:

* Using other native JavaScript APIs, such as `getOffsetWidth()` and `getOffsetHeight()` for getting element offsets.
* Comparing the performance of different DOM manipulation libraries or frameworks (e.g., jQuery vs vanilla JavaScript).
* Testing the performance of different rendering engines or graphics libraries (e.g., WebGL vsCanvas).

Keep in mind that the specific alternatives will depend on the goals and focus of your benchmark.

getBBox() vs getBoundingClientRect() vs baseVal (version: 0)

Comparing performance of: `getBBox vs getBoundingClientRect vs baseVal`

Created: 4 years ago by: Guest

Go to the latest result

getBBox

getBoundingClientRect

baseVal

Historical Performance Data aggregated from 20 community runs

Desktop Results:

Chrome 20 runs

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 baseVal (version: 0)

Comparing performance of: getBBox vs getBoundingClientRect vs baseVal

Created: 4 years ago by: Guest

Go to the latest result

getBBox

getBoundingClientRect

baseVal

Historical Performance Data aggregated from 20 community runs

Desktop Results:

Chrome 20 runs

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 baseVal`