Benchmark: text-metrics - MeasureThat.net

HTML Preparation code:

<script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
<script src="https://rawgit.com/bezoerb/text-metrics/master/dist/text-metrics.bundle.min.js"></script>

<div id="test">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aliquam atque cum dolor explicabo incidunt. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aliquam atque cum dolor explicabo incidunt.</div>

Script Preparation code:

function getJqueryHeight(input) {
        var $input = $(input);
        var $wrapper = $('<div>').css({
            width: $input.width(),
            height: '99999999px',
            display: 'block',
            position: 'absolute'
        });
        $input.css({
            display: 'inline'
        }).wrap($wrapper);
        var result = $input.height();
        $input.css({
            display: ''
        });
        $input.unwrap();
        return result;
    }


    function getJqueryWidth(input) {
        var $input = $(input);
        var $wrapper = $('<div>').css({
            width: '99999999px',
            height: $input.height(),
            display: 'block',
            position: 'absolute'
        });
        $input.css({
            display: 'inline'
        }).wrap($wrapper);
        var text = $input.html();
        $input.html($input.text());
        var result = $input.width();
        $input.html(text);
        $input.css({
            display: ''
        });
        $input.unwrap();
        return result;
    }

    function getTmHeight(input) {
        return textMetrics(input).height();
    }


    function getTmWidth(input) {
        return textMetrics(input).width();
    }

 var testEl = document.getElementById('test');

Tests:

jQuery width
getJqueryWidth(testEl)
jQuery height
getJqueryHeight(testEl)
text-metrics width
getTmWidth(testEl)
text-metrics height
getTmHeight(testEl)

Rendered benchmark preparation results:

Suite status: <idle, ready to run>

Previous results

Test case name	Result
jQuery width
jQuery height
text-metrics width
text-metrics height

Fastest: N/A

Slowest: N/A

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

LLMs can make mistakes. Check important info.

Let's break down the benchmark and its various components.

**Benchmark Definition**

The benchmark is defined by two main parts: Script Preparation Code and Html Preparation Code. The Script Preparation Code contains functions that calculate the height and width of an HTML element using jQuery and text-metrics libraries. The Html Preparation Code includes the necessary JavaScript files for these libraries.

**Script Preparation Code**

This code defines four functions:

1. `getJqueryHeight(input)`: This function calculates the height of an input element by wrapping it in a div, setting its width to 99999999px, and then measuring the height of the input element.
2. `getJqueryWidth(input)`: This function calculates the width of an input element by wrapping it in a div, setting its height to the height of the input element, and then measuring the width of the input element.
3. `getTmHeight(input)`: This function uses the text-metrics library to calculate the height of an input element.
4. `getTmWidth(input)`: This function uses the text-metrics library to calculate the width of an input element.

These functions are called with the `testEl` variable, which is set to the HTML element with id "test".

**Html Preparation Code**

This code includes two external JavaScript files:

1. jQuery 3.1.1.min.js
2. text-metrics.bundle.min.js (a bundle of the text-metrics library)

These libraries are used by the functions defined in the Script Preparation Code.

**Individual Test Cases**

The benchmark consists of four test cases, each with a different function call:

1. `getJqueryWidth(testEl)`
2. `getJqueryHeight(testEl)`
3. `getTmWidth(testEl)`
4. `getTmHeight(testEl)`

Each test case measures the execution time of its corresponding function.

**Pros and Cons**

Here are some pros and cons of each approach:

1. **jQuery**: The jQuery implementation uses DOM manipulation to measure element size, which can be slow for large elements.
	* Pros: Well-established and widely used library with a large community.
	* Cons: Can be slow for large elements.
2. **text-metrics**: The text-metrics implementation uses the browser's own measurement capabilities, which is generally faster than DOM manipulation.
	* Pros: Generally faster than jQuery for measuring element size.
	* Cons: May not work as well for complex HTML structures or elements with many child nodes.

**Other Considerations**

1. **DOM Manipulation**: Both jQuery and text-metrics use DOM manipulation to measure element size, which can lead to performance issues if done too frequently.
2. **Browser Cache**: The benchmark's results may be affected by the browser's cache, as repeated execution of the same test case may return cached results.

**Alternatives**

If you want to explore alternative approaches, here are a few options:

1. **CSSOM**: Instead of using DOM manipulation or browser measurement capabilities, you can use CSSOM (CSS Object Model) to measure element size.
2. **Web Workers**: You can run the benchmarking code in web workers, which can improve performance by offloading the calculations from the main thread.

However, keep in mind that these alternatives may require significant changes to your implementation and may not be suitable for all use cases.

I hope this explanation helps you understand the benchmark's components and approaches!

Latest run results:

Run details: (Test run date: 6 years ago)

User agent: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/67.0.3396.99 Safari/537.36

Browser/OS: Chrome 67 on Windows

View result in a separate tab

Test name	Executions per second
jQuery width	287.8 Ops/sec
jQuery height	142.5 Ops/sec
text-metrics width	6986.8 Ops/sec
text-metrics height	1852.7 Ops/sec

Related benchmarks:

text-metrics (version: 0)

compare text-metrics to naive jquery implementation

Comparing performance of: jQuery width vs jQuery height vs text-metrics width vs text-metrics height

Created: 7 years ago by: Registered User

Jump to the latest result

jQuery width

jQuery height

text-metrics width

text-metrics height

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