Benchmark: getComputedTextLength vs Canvas.2D.measureText

HTML Preparation code:

<svg width="150" height="150">
	<text id="test1" y="50"></text>
</svg>

Script Preparation code:

var svgText = document.getElementById('test1');
var canvas = document.createElement('canvas');
var context = canvas.getContext('2d');

function testSvg(text) {
  svgText.textContent = text;
  return svgText.getComputedTextLength();
}

function testCanvas(text) {
   return context.measureText(text).width;
}

Tests:

testSvg
testSvg('text'); testSvg('Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.'); testSvg('移フ側大ゃぎすで経国場けおッ月設も静前ょわ父8鵜ハムラホ立申軽ハトヨシ減玲びずざあ球権ケ内歩そ観委ヒキ撃友訟テツ煙長さふるは軒5均ルへたす音16周果ざびッぞ。11違意そのト道近らざ確読どい教版ワ誕閥ヘユラワ王文借しドっね緯微エミケヌ問芸メサ訴県む。遊携さめみひ済最ヲムキヨ明出ずぱ国条余書都らじ今相サシタオ断通セロモ過気て銭過ヘルケ録稿ツカヱ試末ぼりや神詐れレぞ掲愛くぎ。');
testCanvas
testCanvas('text'); testCanvas('Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.'); testCanvas('移フ側大ゃぎすで経国場けおッ月設も静前ょわ父8鵜ハムラホ立申軽ハトヨシ減玲びずざあ球権ケ内歩そ観委ヒキ撃友訟テツ煙長さふるは軒5均ルへたす音16周果ざびッぞ。11違意そのト道近らざ確読どい教版ワ誕閥ヘユラワ王文借しドっね緯微エミケヌ問芸メサ訴県む。遊携さめみひ済最ヲムキヨ明出ずぱ国条余書都らじ今相サシタオ断通セロモ過気て銭過ヘルケ録稿ツカヱ試末ぼりや神詐れレぞ掲愛くぎ。');

Rendered benchmark preparation results:

Suite status: <idle, ready to run>

Previous results

Test case name	Result
testSvg
testCanvas

Fastest: N/A

Slowest: N/A

Autogenerated LLM Summary (model llama3.2:3b, generated 26 days ago):

LLMs can make mistakes. Check important info.

I'll dive into the explanation.

**Benchmark Overview**

The provided benchmark measures the performance difference between two approaches to calculate the length of text: `getComputedTextLength` on an `<svg>` element and `measureText` on a HTML canvas context.

**Options Compared**

There are two options being compared:

1. **`getComputedTextLength`**: This method is used on an `<svg>` element to get the length of its text content.
2. **`measureText`**: This method is used on a HTML canvas context (`getContext('2d')`) to measure the width of a given string.

**Pros and Cons**

* **`getComputedTextLength`**:
	+ Pros: Fast, efficient, and widely supported across browsers.
	+ Cons: Only works on `<svg>` elements, which may not be suitable for all use cases.
* **`measureText`**:
	+ Pros: Works on any text node, including HTML strings. Can also handle complex layouts and fonts.
	+ Cons: Can be slower than `getComputedTextLength`, especially for large or complex texts.

**Other Considerations**

* The benchmark uses a fixed font size (16px) for the text content, which might not accurately reflect real-world scenarios where font sizes can vary.
* The benchmark only measures the width of the text, not its actual length in characters. This could lead to biases if the font's metrics are not properly taken into account.

**Library Used**

In this benchmark, the `getComputedTextLength` method is used on an `<svg>` element, which implies that the SVG library or renderer is being used by the browser. The exact implementation of the `getComputedTextLength` method may vary across browsers and versions.

**Special JS Feature/ Syntax**

There doesn't appear to be any special JavaScript features or syntax being tested in this benchmark. It's a straightforward comparison of two methods for calculating text length.

**Alternatives**

If you're interested in exploring alternative approaches, here are some options:

1. **Regular expressions**: You can use regular expressions (e.g., ` RegExp.prototypeexec()` ) to extract and count characters from a string.
2. **String method**: Many programming languages have built-in string methods for calculating the length of a string, such as `str.length` in JavaScript.
3. **Graphics libraries**: For more complex layouts or graphics-related calculations, you might consider using specialized graphics libraries like SVG.js or Paper.js.

Keep in mind that these alternatives may not be suitable for every use case, and the performance differences between them can vary depending on the specific requirements and constraints of your application.

I hope this explanation helps!

Latest run results:

Run details: (Test run date: 2 days ago)

User agent: Mozilla/5.0 (iPhone; CPU iPhone OS 18_1 like Mac OS X) AppleWebKit/605.1.15 (KHTML, like Gecko) CriOS/130.0.6723.90 Mobile/15E148 Safari/604.1

Browser/OS: Chrome Mobile iOS 130 on iOS 18.1

View result in a separate tab

Test name	Executions per second
testSvg	1151.3 Ops/sec
testCanvas	10050.6 Ops/sec

Related benchmarks:

getComputedTextLength vs Canvas.2D.measureText (version: 0)

Comparing performance of: testSvg vs testCanvas

Created: 3 years ago by: Guest

Jump to the latest result

testSvg

testCanvas

Suite status: <idle, ready to run>

Experimental features:

Fastest: N/A

Slowest: N/A

Autogenerated LLM Summary (model llama3.2:3b, generated 26 days ago):