Toggle navigation
MeasureThat.net
Create a benchmark
Tools
Feedback
FAQ
Register
Log In
getComputedTextLength vs Canvas.2D.measureText
(version: 0)
Comparing performance of:
testSvg vs testCanvas
Created:
5 years ago
by:
Guest
Jump to the latest result
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>
Run tests (2)
Previous results
Fork
Test case name
Result
testSvg
testCanvas
Fastest:
N/A
Slowest:
N/A
Latest run results:
Run details:
(Test run date:
8 months ago
)
User agent:
Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/139.0.0.0 Safari/537.36
Browser/OS:
Chrome 139 on Windows
View result in a separate tab
Embed
Embed Benchmark Result
Test name
Executions per second
testSvg
2907.0 Ops/sec
testCanvas
41429.0 Ops/sec
Autogenerated LLM Summary
(model
llama3.2:3b
, generated one year ago):
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!
Related benchmarks:
Measure Single Text
Measure Single Text 222
Measure Single Text 2222
Measure Text Methods 2
Comments
Confirm delete:
Do you really want to delete benchmark?