JSFiddle - React, Tailwind, and code Playground

by highwayoflife

HTML

<div id="first"></div>
<div id="second"></div>
<div id="third"></div>
<div id="fourth"></div>

<div id="foo_0" class="foo">Hello World</div>
<div id="foo_1" class="foo">Hello World</div>
<div id="foo_2" class="foo">Hello World</div>
<div id="foo_3" class="foo">Hello World</div>
<div id="foo_4" class="foo">Hello World</div>
<div id="foo_5" class="foo">Hello World</div>
<div id="foo_6" class="foo">Hello World</div>
<div id="foo_7" class="foo">Hello World</div>
<div id="foo_8" class="foo">Hello World</div>
<div id="foo_9" class="foo">Hello World</div>
<div id="foo_10" class="foo">Hello World</div>
<div id="foo_11" class="foo">Hello World</div>
<div id="foo_12" class="foo">Hello World</div>
<div id="foo_13" class="foo">Hello World</div>
<div id="foo_14" class="foo">Hello World</div>
<div id="foo_15" class="foo">Hello World</div>
<div id="foo_16" class="foo">Hello World</div>
<div id="foo_17" class="foo">Hello World</div>
<div id="foo_18" class="foo">Hello World</div>
<div id="foo_19" class="foo">Hello World</div>
<div id="foo_20" class="foo">Hello World</div>
<div id="foo_21" class="foo">Hello World</div>
<div id="foo_22" class="foo">Hello World</div>
<div id="foo_23" class="foo">Hello World</div>
<div id="foo_24" class="foo">Hello World</div>
<div id="foo_25" class="foo">Hello World</div>
<div id="foo_26" class="foo">Hello World</div>
<div id="foo_27" class="foo">Hello World</div>
<div id="foo_28" class="foo">Hello World</div>
<div id="foo_29" class="foo">Hello World</div>
<div id="foo_30" class="foo">Hello World</div>
<div id="foo_31" class="foo">Hello World</div>
<div id="foo_32" class="foo">Hello World</div>
<div id="foo_33" class="foo">Hello World</div>
<div id="foo_34" class="foo">Hello World</div>
<div id="foo_35" class="foo">Hello World</div>
<div id="foo_36" class="foo">Hello World</div>
<div id="foo_37" class="foo">Hello World</div>
<div id="foo_38" class="foo">Hello World</div>
<div id="foo_39" class="foo">Hello World</div>
<div id="foo_40"...

JavaScript

var start = (new Date).getTime(), end, j, i;

for (i = 0; i < 100; i++)
{
    for (j = 0; j < 100; j++)
    {
        $(document.getElementById('foo_' + i)).find('.foo');
    }
}

end = (new Date).getTime();
$('#first').text('document.getElementById Time taken: ' + (end - start) + 'ms');
start = (new Date).getTime();

for (i = 0; i < 100; i++)
{
    for (j = 0; j < 100; j++)
    {
        $('#foo_' + i + '.foo');
    }
}

end = (new Date).getTime();
$('#second').text('#selector Time taken: ' + (end - start) + 'ms');
start = (new Date).getTime();

for (i = 0; i < 100; i++)
{
    for (j = 0; j < 100; j++)
    {
        $('div.foo');
    }
}

end = (new Date).getTime();
$('#third').text('div.class Time taken: ' + (end - start) + 'ms');
start = (new Date).getTime();

for (i = 0; i < 100; i++)
{
    for (j = 0; j < 100; j++)
    {
        $('.foo');
    }
}

end = (new Date).getTime();
$('#fourth').text('.class Time taken: ' + (end - start) + 'ms');