JSFiddle - React, Tailwind, and code Playground

by ChaseWest

HTML

<script src="//ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>

<div>
  <ul>
    <li class="item">1</li>
    <li class="item">2</li>
    <li class="item">3</li>
    <li class="item">4</li>
    <li class="item">
      <div>
         <ul>
           <li class="item">a</li>
           <li class="item">b</li>
           <li class="item">c</li>
           <li class="item">d</li>
        </ul>
      </div>
    </li>
  </ul>    
</div>

JavaScript

console.time("setup");
var bodyFrag = document.createDocumentFragment(),
    $items, qsaItems, bodyFragItems;

    bodyFrag.appendChild(document.body.cloneNode(true));
console.timeEnd("setup");

console.time("jquery");
    $items = $(".item");
console.timeEnd("jquery");

console.time("querySelectorAll");
    qsaItems = document.querySelectorAll(".item");
console.timeEnd("querySelectorAll");

console.time("bodyFrag");
    bodyFragItems = bodyFrag.querySelectorAll(".item");
console.timeEnd("bodyFrag");


console.log($items);
console.log(qsaItems);
console.log(bodyFragItems);