JSFiddle - React, Tailwind, and code Playground

by Marventus

HTML

<div class="index-wrap">
    <p id="index-p">indexOf 1.000 times: <strong></strong>
    </p>
    <button id="index-test">Test indexOf</button>
</div>
<div class="match-wrap">
    <p id="match-p">Match 1.000 times: <strong></strong>
    </p>
    <button id="match-test">Test Match</button>
</div>

CSS

strong {
    display:none
}

JavaScript

function userAgent() {
    return {
        "times": 1000,
        "agent": navigator.userAgent.toLowerCase()
    };
}
function updateResult(el, result) {
    var ta = el.find("strong");
    result = Math.round(result);
    ta.text(result + " ms").show();
}
$(window).load(function() {
    $('#index-test').click(function () {
        var uA = userAgent(),
            needle = "Chrome",
            agent = uA.agent,
            start = performance.now();
        for (var i = uA.times; i > 0; i--) {
            console.log(agent.indexOf(needle));
        }
        var end = performance.now();
        updateResult($(this).parents("div"), end - start);
    });
    $('#match-test').click(function () {
        var uA = userAgent(),
            agent = uA.agent,
            start = performance.now();
        for (var i = uA.times; i > 0; i--) {
            console.log(agent.search(/Chrome/));
        }
        var end = performance.now();
        updateResult($(this).parents("div"), end - start);
    });
});