Benchmark: measureText stuff

HTML Preparation code:

<!--your preparation HTML code goes here-->

Script Preparation code:

const font = '12px sans-serif';
const charset = [...Array(100)].map((_, i) => String.fromCharCode(0x200 + i));
const testTexts = [...Array(50)].map(() => randomString(10, 30));

function randomString(minLen, maxLen) {
  const len = Math.floor(Math.random() * (maxLen - minLen + 1)) + minLen;
  let result = '';
  for (let i = 0; i < len; i++) {
    result += charset[Math.floor(Math.random() * charset.length)];
  }
  return result;
}

function charWidth(c, ctx, cache) {
  return cache[c] || (cache[c] = ctx.measureText(c).width);
}

function textWidth(txt, ctx, cache) {
  let w = 0;
  txt = txt + '';
  for (const c of txt) {
    w += charWidth(c, ctx, cache);
  }
  return w;
}

function cachedMeasureText(txt, ctx, cache) {
  return cache[txt] || (cache[txt] = ctx.measureText(txt).width);
}

window.measureText = (() => {
  const canvas = document.createElement('canvas');
  const ctx = canvas.getContext('2d');
  ctx.font = font;
  return (txt) => ctx.measureText(txt);
})();

window.oscMeasureText = (() => {
  const canvas = new window.OffscreenCanvas(0, 0);
  const ctx = canvas.getContext('2d');
  ctx.font = font;
  return (txt) => ctx.measureText(txt);
})();

window.byChars = (() => {
  const canvas = document.createElement('canvas');
  const ctx = canvas.getContext('2d');
  ctx.font = font;
  charWidthCache = {};
  return (txt) => textWidth(txt, ctx, charWidthCache);
})();

window.byStrings = (() => {
  const canvas = document.createElement('canvas');
  const ctx = canvas.getContext('2d');
  ctx.font = font;
  return (stringWidthCache, txt) => cachedMeasureText(txt, ctx, stringWidthCache);
})();

Tests:

measureText via Canvas
for (let i = 0; i < 50; i++) testTexts.map(txt => measureText(txt))
measureText via OffsetScreenCanvas
for (let i = 0; i < 50; i++) testTexts.map(txt => oscMeasureText(txt))
byChars
for (let i = 0; i < 50; i++) testTexts.map(txt => byChars(txt))
byStrings
(x = {}); for (let i = 0; i < 50; i++) testTexts.map(txt => byStrings(x, txt))

Historical Performance Data aggregated from 11 community runs

Desktop Results:

Firefox 11 runs

byStrings

8K/s

byChars

628/s

measureText via OffsetScreenCanvas

554/s

measureText via Canvas

536/s

Fastest: byStrings (15.2x faster)

View exact numbers

✓ byStrings: 8,165 ops/sec
• byChars: 628 ops/sec
• measureText via OffsetScreenCanvas: 554 ops/sec
• measureText via Canvas: 536 ops/sec

Results show median performance across all community submissions. Run this benchmark yourself to verify on your device.

Rendered benchmark preparation results:

Suite status: <idle, ready to run>

Previous results

Test case name	Result
measureText via Canvas
measureText via OffsetScreenCanvas
byChars
byStrings

Fastest: N/A

Slowest: N/A

Latest run results:

Run details: (Test run date: one year ago)

User agent: Mozilla/5.0 (X11; Linux x86_64; rv:139.0) Gecko/20100101 Firefox/139.0

Browser/OS: Firefox 139 on Linux

View result in a separate tab

byStrings

6K/s

byChars

630/s

measureText via OffsetScreenCanvas

539/s

measureText via Canvas

515/s

View exact numbers

Test name	Executions per second
✓ byStrings	5,960 Ops/sec
byChars	630 Ops/sec
measureText via OffsetScreenCanvas	539 Ops/sec
measureText via Canvas	515 Ops/sec

measureText stuff (version: 11)

Comparing performance of: `measureText via Canvas vs measureText via OffsetScreenCanvas vs byChars vs byStrings`

Created: one year ago by: Registered User

Go to the latest result

measureText via Canvas

measureText via OffsetScreenCanvas

byChars

byStrings

Historical Performance Data aggregated from 11 community runs

Desktop Results:

Firefox 11 runs

Suite status: <idle, ready to run>

Fastest: N/A

Slowest: N/A

measureText stuff (version: 11)

Comparing performance of: measureText via Canvas vs measureText via OffsetScreenCanvas vs byChars vs byStrings

Created: one year ago by: Registered User

Go to the latest result

measureText via Canvas

measureText via OffsetScreenCanvas

byChars

byStrings

Historical Performance Data aggregated from 11 community runs

Desktop Results:

Firefox 11 runs

Suite status: <idle, ready to run>

Fastest: N/A

Slowest: N/A

Related benchmarks

Comparing performance of: `measureText via Canvas vs measureText via OffsetScreenCanvas vs byChars vs byStrings`