Benchmark: Measure Text Methods

HTML Preparation code:

<div id="my-div">Hello World</div>

Script Preparation code:

const canvas = document.createElement('canvas')
window.context = canvas.getContext('2d')
const div = document.createElement('canvas');
div.innerHTML = "Hello world";

Tests:

offsetWidth
div.offsetWidth
getBoundingClientRect
div.getBoundingClientRect().width
canvas
window.context.measureText('Hello world')

Rendered benchmark preparation results:

Suite status: <idle, ready to run>

Previous results

Test case name	Result
offsetWidth
getBoundingClientRect
canvas

Fastest: N/A

Slowest: N/A

Latest run results:

Run details: (Test run date: 22 hours ago)

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

Browser/OS: Chrome 131 on Windows

View result in a separate tab

Test name	Executions per second
offsetWidth	49009424.0 Ops/sec
getBoundingClientRect	6787734.5 Ops/sec
canvas	1305008.4 Ops/sec

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

LLMs can make mistakes. Check important info.

Let's break down the benchmark and its test cases.

**Benchmark Overview**

The MeasureThat.net benchmark measures the performance of different methods to measure the width of a string, specifically the text "Hello world", on various web platforms using JavaScript. The benchmark consists of three test cases: `offsetWidth`, `getBoundingClientRect()`, and `canvas` (using the `measureText()` method).

**Test Cases**

1. **offsetWidth**: This test case measures the performance of accessing the `offsetWidth` property of an element's offset parent, which returns the width of the nearest ancestor element that can contain the given element.
	* Pros: Simple and widely supported across browsers.
	* Cons: May not be accurate for elements with complex layouts or different font sizes.
2. **getBoundingClientRect()**: This test case measures the performance of using `getBoundingClientRect()` to get the width of an element's bounding rectangle, which includes its width, height, left and top offsets, and more.
	* Pros: More accurate than `offsetWidth` for elements with complex layouts or different font sizes.
	* Cons: May be slower due to the additional calculations required.
3. **canvas**: This test case uses the 2D canvas API to measure the performance of accessing the width of a text string using the `measureText()` method.
	* Pros: More accurate than `offsetWidth` and `getBoundingClientRect()` for text elements, as it takes into account font sizes and styles.
	* Cons: Requires a modern browser that supports the canvas API.

**Library Used**

In the provided benchmark code, the `createCanvas()` function from the `canvas` library is used to create a 2D canvas context. The purpose of this library is to provide an easy way to work with 2D graphics and text rendering in web applications.

**Special JavaScript Feature/ Syntax**

There are no special JavaScript features or syntaxes mentioned in the benchmark code, aside from using the `measureText()` method in the `canvas` test case.

**Other Alternatives**

If these three test cases were not available, other alternatives could be:

* Using `getComputedStyle()` to access an element's width
* Using a CSS width property (e.g., `width: 100px;`) on an element
* Using a different DOM traversal method, such as `querySelectorAll()`

However, these alternatives may not provide the same level of accuracy or performance as the current test cases.

Related benchmarks:

Measure Text Methods (version: 0)

Using various methods to measure a single string of text.

Comparing performance of: offsetWidth vs getBoundingClientRect vs canvas

Created: 2 years ago by: Guest

Jump to the latest result

offsetWidth

getBoundingClientRect

canvas

Suite status: <idle, ready to run>

Experimental features:

Fastest: N/A

Slowest: N/A

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