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

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: 10 months 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

Test name	Executions per second
measureText via Canvas	514.8 Ops/sec
measureText via OffsetScreenCanvas	539.2 Ops/sec
byChars	630.3 Ops/sec
byStrings	5960.0 Ops/sec

Related benchmarks:

measureText stuff (version: 11)

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

Created: 10 months ago by: Registered User

Jump to the latest result

measureText via Canvas

measureText via OffsetScreenCanvas

byChars

byStrings

Suite status: <idle, ready to run>

Fastest: N/A

Slowest: N/A