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: 3 months ago)

User agent: Mozilla/5.0 (X11; Linux x86_64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/147.0.0.0 Safari/537.36

Browser/OS: Chrome 147 on Linux

View result in a separate tab

canvas

2K/s

offsetWidth

531/s

getBoundingClientRect

457/s

View exact numbers

Test name	Executions per second
✓ canvas	1,544 Ops/sec
offsetWidth	531 Ops/sec
getBoundingClientRect	457 Ops/sec

Measure Multiple Texts (version: 1)

Using various methods to measure multiple strings of text.

Comparing performance of: `offsetWidth vs getBoundingClientRect vs canvas`

Created: 5 years ago by: Registered User

Go to the latest result

offsetWidth

getBoundingClientRect

canvas

Suite status: <idle, ready to run>

Fastest: N/A

Slowest: N/A

Measure Multiple Texts (version: 1)

Using various methods to measure multiple strings of text.

Comparing performance of: offsetWidth vs getBoundingClientRect vs canvas

Created: 5 years ago by: Registered User

Go to the latest result

offsetWidth

getBoundingClientRect

canvas

Suite status: <idle, ready to run>

Fastest: N/A

Slowest: N/A

Related benchmarks

Comparing performance of: `offsetWidth vs getBoundingClientRect vs canvas`