Run results for: text-metrics

Run details:

User agent: Mozilla/5.0 (Macintosh; Intel Mac OS X 10_13_4) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/66.0.3359.139 Safari/537.36

Browser: Chrome 66

Operating system: Mac OS X 10.13.4

Device Platform: Other

Date tested: 6 years ago

Test name	Executions per second
jQuery width	1398.8 Ops/sec
jQuery height	1715.2 Ops/sec
text-metrics width	11506.1 Ops/sec
text-metrics height	3451.1 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