JSFiddle - React, Tailwind, and code Playground

by Jayson Buquia

HTML

<div class="foo">
    <div id="bar"></div>
</div>
<div class="foo">
    <div id="bar">
        <div class="foo">
            <div id="bar"></div>
        </div>
    </div>
</div>

<div>
    <h3>Results:</h3>
    <div>
        <h4>Native:</h4>
        <div id="nativeResult">
            
        </div>
    </div>
    <div>
        <h4>jQuery:</h4>
        <div id="jqueryResult">
            
        </div>
    </div>
</div>

<div>
    <span class="sampleSpan"></span>
    <span class="sampleSpan"></span>
    <span class="sampleSpan"></span>
</div>

JavaScript

var d = document,
	result1 = document.getElementById('nativeResult'),
	result2 = document.getElementById('jqueryResult');    


var start,el,stop;

// native
start 	= new Date();
el 		= document.getElementById('bar');
stop 	= new Date();
result1.textContent = stop.getTime()-start.getTime();
// jquery
start 	= new Date();
el 		= $('#bar');
stop 	= new Date();
result2.textContent = stop.getTime()-start.getTime();

var spans = d.querySelectorAll('.sampleSpan');
console.dir(spans.forEach);