JSFiddle - React, Tailwind, and code Playground

by Tigraine

HTML

<ul>
    <li>Test</li>
    <li>Second</li>
</ul>

JavaScript

function measure(fn) {
    var start = new Date().getTime();

    for (i = 0; i < 50000; ++i) {
        fn();
    }
    
    var end = new Date().getTime();
    return end - start;
}

var test = function() {
console.log(":first", measure(function() { $('li:first') }));
console.log(".first()", measure(function() { $('li').first() }));
};

test();

//Let's insert a lot of <li> elements to check if they both scale with size
var i;
for(i = 0; i < 100; i += 1) {
    $('ul').append($('<li>' + i + '</li>'));
}

test(); //Test again


//Let's test our own implementation of the :first selector
$.extend($.expr[':'],{
    first: function(a) {
        return $(a).first();
    }
});

test();