Run results for: Measure Multiple Texts

Run details:

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

Browser: Chrome 147

Operating system: Linux

Device Platform: Desktop

Date tested: 3 months ago

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

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) })

Run results for: Measure Multiple Texts

Using various methods to measure multiple strings of text.

offsetWidth

getBoundingClientRect

canvas