Benchmark: Measure Multiple Texts

Script Preparation code:

function randomString() {
  const charSet = 'ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789'
  const max = Math.max(2, Math.floor(Math.random() * 200))
  let randomString = ''
  for (var i = 0; i < max; i++) {
    const randomPosition = Math.floor(Math.random() * charSet.length)
    randomString += charSet.substring(randomPosition, randomPosition + 1)
  }
  return randomString
}
const canvas = document.createElement('canvas')
window.context = canvas.getContext('2d')
window.data = [...Array(1000).keys()].map(randomString)
window.data.forEach((text) => {
  const div = document.createElement('div')
  div.innerHTML = text
  document.body.appendChild(div)
})

Tests:

offsetWidth
[...document.body.children].forEach(node => { node.offsetWidth })
getBoundingClientRect
[...document.body.children].forEach(node => { node.getBoundingClientRect().width })
canvas
window.data.forEach(text => { window.context.measureText(text) })

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: 4 years ago)

User agent: Mozilla/5.0 (Macintosh; Intel Mac OS X 10.15; rv:80.0) Gecko/20100101 Firefox/80.0

Browser/OS: Firefox 80 on Mac OS X 10.15

View result in a separate tab

Test name	Executions per second
offsetWidth	3770.9 Ops/sec
getBoundingClientRect	1386.9 Ops/sec
canvas	26.8 Ops/sec

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

LLMs can make mistakes. Check important info.

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

**Benchmark Definition**

The website provides a JSON representation of the benchmark, which includes:

* **Name**: The name of the benchmark, "Measure Multiple Texts".
* **Description**: A brief description of the benchmark, indicating that it measures multiple strings of text.
* **Script Preparation Code**: A JavaScript code snippet used to prepare the test data. This code:
	+ Defines a `randomString` function to generate random strings.
	+ Creates a canvas element and gets its 2D drawing context.
	+ Generates an array of 1000 random strings using the `randomString` function.
	+ Appends these div elements to the document body.
* **Html Preparation Code**: An empty string, indicating that no additional HTML preparation is needed.

**Individual Test Cases**

The benchmark consists of three test cases:

1. **offsetWidth**:
	* The test case uses the `[...document.body.children].forEach` method to iterate over all child elements in the document body.
	* For each element, it calls the `offsetWidth` property, which returns the width of the element in pixels.
2. **getBoundingClientRect**:
	* Similar to the first test case, but it uses the `[...document.body.children].forEach` method to iterate over all child elements.
	* However, for each element, it calls the `getBoundingClientRect().width` property instead of just `offsetWidth`.
3. **canvas**:
	* This test case is specific to the Canvas API and measures the execution time of the `measureText()` method on a string.
	* The script preparation code creates an array of strings (`window.data`) and loops through each string, calling the `measureText()` method on the canvas context.

**Options Compared**

The benchmark compares three different approaches:

1. **offsetWidth**: Measures the width of elements by iterating over all child elements in the document body.
2. **getBoundingClientRect**: Similar to the first approach, but uses the `getBoundingClientRect().width` property instead.
3. **canvas**: A Canvas API-specific measurement that loops through an array of strings and calls the `measureText()` method on each string.

**Pros and Cons**

Here's a brief analysis of the pros and cons of each approach:

1. **offsetWidth**:
	* Pros: Simple, widely supported (all modern browsers).
	* Cons: May be slower due to the need to iterate over all elements in the document body.
2. **getBoundingClientRect**:
	* Pros: Similar performance characteristics to `offsetWidth`, with an added benefit of not requiring a full DOM traversal.
	* Cons: May still have performance implications depending on the size and complexity of the element's bounding rectangle.
3. **canvas**:
	* Pros: Fast, specific to the Canvas API, and can provide more accurate measurements for text rendering.
	* Cons: Requires support for the Canvas API and may not be as widely supported across browsers.

**Library Usage**

The benchmark uses a few libraries:

1. `Canvas`: A built-in JavaScript library for working with HTML5 canvas elements.
2. `getBoundingClientRect` is a W3C standard property, so no additional library is required.

**Special JS Feature/Syntax**

The benchmark uses the following special feature/syntax:

1. **Rest properties (e.g., `[...document.body.children]`)**: Used to iterate over an array of child elements in the document body.
2. **Async functions (e.g., `randomString()`, `measureText()`) are not explicitly used, but the benchmark still measures the execution time of these functions.

**Other Alternatives**

If you need alternatives to the benchmarked approaches:

1. Instead of using `offsetWidth` or `getBoundingClientRect`, consider using CSS layouts like `width: fit-content` or `display: grid` for more efficient measurements.
2. For Canvas API-specific measurements, look into other APIs like WebGL or WebAssembly for even faster and more accurate results.

Keep in mind that the choice of approach ultimately depends on your specific use case and performance requirements.

Related benchmarks:

Measure Multiple Texts (version: 1)

Using various methods to measure multiple strings of text.

Comparing performance of: offsetWidth vs getBoundingClientRect vs canvas

Created: 4 years ago by: Registered User

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 one month ago):