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

ⓘ Get performance results from real users on your website with Request Metrics.

Website Performance Monitoring by Request Metrics

Latest run results:

Run details: (Test run date: 5 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

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