Run results for: text-metrics

Run details:

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: Chrome 67

Operating system: Windows

Device Platform: Desktop

Date tested: 5 years ago

Test name	Executions per second
jQuery width	603.3 Ops/sec
jQuery height	223.8 Ops/sec
text-metrics width	8169.6 Ops/sec
text-metrics height	1905.5 Ops/sec

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)

Run results for: text-metrics

compare text-metrics to naive jquery implementation

jQuery width

jQuery height

text-metrics width

text-metrics height