Benchmark: Measure Text Methods fairer

HTML Preparation code:

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

Script Preparation code:

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

Tests:

offsetWidth
window.div.innerHTML = "Hello world"; window.div.offsetWidth
getBoundingClientRect
window.div.innerHTML = "Hello world"; window.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: one year ago)

User agent: Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/131.0.0.0 Safari/537.36

Browser/OS: Chrome 131 on Mac OS X 10.15.7

View result in a separate tab

Test name	Executions per second
offsetWidth	674015.0 Ops/sec
getBoundingClientRect	650135.9 Ops/sec
canvas	2799885.8 Ops/sec

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

LLMs can make mistakes. Check important info.

**Benchmark Overview**

The provided JSON represents a JavaScript microbenchmarking test case, specifically designed to measure the performance of three different methods for measuring the width of a string: `offsetWidth`, `getBoundingClientRect().width`, and `canvas.measureText()`. The benchmark is created using MeasureThat.net, a website that allows users to create and run their own JavaScript benchmarks.

**Tested Options**

The test cases compare the execution times of three different approaches:

1. **`offsetWidth`**: This method uses the DOM's built-in `offsetWidth` property to measure the width of an element.
2. **`getBoundingClientRect().width`**: This method uses the `getBoundingClientRect()` method, which returns a rectangle representing the bounding box of an element, and then extracts the `width` property from it.
3. **`canvas.measureText()`**: This method uses the HTML5 canvas API's `measureText()` function to measure the width of a string.

**Pros and Cons**

* **`offsetWidth`**:
	+ Pros: Simple and widely supported; can be more accurate for some cases (e.g., when the element has a fixed width).
	+ Cons: May not work correctly for elements with dynamic widths, and may be slower due to DOM queries.
* **`getBoundingClientRect().width`**:
	+ Pros: Can handle elements with dynamic widths and is generally faster than `offsetWidth`.
	+ Cons: Requires two DOM queries (one for the rectangle and one for the width), which can add latency.
* **`canvas.measureText()`**:
	+ Pros: Fast, accurate, and specifically designed for measuring text widths; can be more efficient than DOM-based methods.
	+ Cons: Requires a canvas element to be present in the HTML document.

**Library: `getBoundingClientRect()`**

The `getBoundingClientRect()` method is a part of the Web API that provides information about an element's position and size. It returns a rectangle object, which contains properties such as `width`, `height`, `left`, and `top`. In this benchmark, the `getBoundingClientRect().width` test case uses this method to extract the width property from the returned rectangle.

**Other Considerations**

* The benchmark assumes that the input string "Hello world" will always be displayed in a context where its width can be accurately measured. In practice, this may not always be the case.
* The use of `offsetWidth` and `getBoundingClientRect().width` both involve DOM queries, which can add latency to the benchmark. This may affect the accuracy or fairness of the results.

**Alternative Approaches**

Other alternatives for measuring text width include:

* Using a library like [jsdom](https://github.com/jsdom/jsdom) to simulate a document and measure the width programmatically.
* Using a dedicated text measurement library, such as [text-size-observer](https://github.com/timelordc/text-size-observer), which is designed specifically for measuring text widths.
* Using a rendering engine like [html-renderer](https://github.com/valera-dev/html-renderer) to render the text and measure its width.

Related benchmarks:

Measure Text Methods fairer (version: 0)

Using various methods to measure a single string of text.

Comparing performance of: offsetWidth vs getBoundingClientRect vs canvas

Created: 3 years ago by: Guest

Jump to the latest result

offsetWidth

getBoundingClientRect

canvas

Suite status: <idle, ready to run>

Fastest: N/A

Slowest: N/A

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