JSFiddle - React, Tailwind, and code Playground

by yuvalshirav

HTML

<html>
<body>
    <div></div>
</body>
</html>

<!-- To see performance regression with comma-separated selectors in jQuery v1.8.2, open console and run this in v1.8.2 (wait patiently for a few seconds), then in v1.7.2 -->

JavaScript

var prep = function () {
    var i, j, frag, ul, li, n;
    frag = document.createDocumentFragment();
    for (i=0; i<1000; i++) {
        ul = document.createElement('ul');
        ul.className = 'ul'+i;
        for (j=0; j<100; j++) {
            li = document.createElement('li');
            li.className = '_' + n++;
            ul.appendChild(li);
        }
        frag.appendChild(ul);
    }
    document.getElementsByTagName('div')[0].appendChild(frag);
};
    
var timeit = function (f) {
    var start = new Date();
    var r = f();
    var sec = (new Date() - start) / 1000;
    console.log(sec + "sec - " + r);
};

var commaSepSelect = function () {    
    var s = 'div ul:has(li._5000), div ul:has(li._7000)';
    $(s);
    return s;
};

var select = function () {
    var s = 'div ul:has(li._5000)';
    $(s);
    return s;
};
    
prep();
console.log("jQuery v" + $.fn.jquery);
timeit(commaSepSelect);
timeit(select);