JSFiddle - React, Tailwind, and code Playground
HTML
<div id="container"></div>
JavaScript
$(document).ready(function () {
"use strict";
var i, j, counts = [1, 10, 100, 1000, 10000], fragment, container, element, timerName, k, state = ['none', 'block'],
lastFragment, maxLevels = 99, levelsCounters = 0;
container = document.querySelector('#container');
for (i = 0; i < counts.length; i += 1) {
timerName = counts[i] + ' items';
container.innerHTML = "";
fragment = document.createDocumentFragment();
lastFragment = fragment;
console.log("start create " + timerName);
for (j = 0; j < counts[i]; j += 1) {
element = document.createElement('div');
element.className = "class_" + j;
element.innerHTML = "stub";
lastFragment.appendChild(element);
//create tree DOM structure
if (levelsCounters >= maxLevels) {
lastFragment = fragment;
levelsCounters = 0;
} else {
lastFragment = element;
levelsCounters += 1;
}
}
container.appendChild(fragment);
//check performance
for (k = 0; k < state.length; k += 1) {
//set display state
container.style.display = state[k];
// 'vanilla' javascript
console.time(state[k] + ' ' + timerName);
document.querySelector('#container .class_' + (j - 1));
console.timeEnd(state[k] + ' ' + timerName);
//jquery
console.time(state[k] + ' ' + 'jquery ' + timerName);
$(document).find('#container .class_' + (j - 1));
console.timeEnd(state[k] + ' ' + 'jquery ' + timerName);
}
//standart show/hide performance
console.time('jquery show' + timerName);
element = $(document).find('#container .class_' + (j - 1));
element.hide(); //hide element
window.getComputedStyle(element.get(0)).display; //recalculate style
...