Run details:
Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/91.0.4472.114 Safari/537.36
Chrome 91
Mac OS X 10.15.7
Desktop
3 years ago
Test name Executions per second
Canvas 526424.5 Ops/sec
OffscreenCanvas 490879.7 Ops/sec
offsetWidth 531673.9 Ops/sec
getBoundingClientRect 535685.6 Ops/sec
HTML Preparation code:
AخA
 
1
<div></div>
Script Preparation code:
x
 
var canvas = document.createElement('canvas');
var context = canvas.getContext('2d', { alpha: false });
context.font = 'bold 48px serif';
var offscreenCanvas = new OffscreenCanvas(0, 0);
var offscreenContext = offscreenCanvas.getContext('2d', { alpha: false });
offscreenContext.font = 'bold 48px serif';
var div = document.querySelector('div')
Tests:
  • Canvas

     
    context.measureText("TESTM").width
  • OffscreenCanvas

     
    offscreenContext.measureText("TESTM").width
  • offsetWidth

     
    div.textContent = "TESTM"
    div.offsetWidth
  • getBoundingClientRect

     
    div.textContent = "TESTM"
    div.getBoundingClientRect().width