Run results for: Measure Multiple Texts

Run details:

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

Browser: Chrome 85

Operating system: Mac OS X 10.15.6

Device Platform: Desktop

Date tested: 3 years ago

Test name	Executions per second
offsetWidth	551.7 Ops/sec
getBoundingClientRect	471.1 Ops/sec
canvas	12.0 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