Run results for: Measure Multiple Texts

Run details:

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

Browser: Firefox 80

Operating system: Mac OS X 10.15

Device Platform: Desktop

Date tested: 3 years ago

Test name	Executions per second
offsetWidth	3770.9 Ops/sec
getBoundingClientRect	1386.9 Ops/sec
canvas	26.8 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