JSFiddle - React, Tailwind, and code Playground

HTML

<div id="main">
    <div>Div</div>
    <ul>
        <li>ListItem</li>
        <li>ListItem</li>
        <li>ListItem</li>
        <li>ListItem</li>
        <li>ListItem</li>
    </ul>
    <p>Paragraph</p>
    <div>Div</div>
    <ul>
        <li>ListItem</li>
        <li>ListItem</li>
        <li>ListItem</li>
        <li>ListItem</li>
        <li>ListItem</li>
    </ul>
    <p>Paragraph</p>
    <ul>
        <li>ListItem</li>
        <li>ListItem</li>
        <li>ListItem</li>
        <li>ListItem</li>
        <li>ListItem</li>
    </ul>
    <div>Div</div>
    <p>Paragraph</p>
    <ul>
        <li>ListItem</li>
        <li>ListItem</li>
        <li>ListItem</li>
        <li>ListItem</li>
        <li>ListItem</li>
    </ul>
    <div>Div</div>
    <p>Paragraph</p>
    <div>Div</div>
    <p>Paragraph</p>
    <p>Paragraph</p>
    <p>Paragraph</p>
    <div>Div</div>
    <div>Div</div>
    <div>Div</div>
    <p>Paragraph</p>
    <div>Div</div>
    <p>Paragraph</p>
    <div>Div</div>
    <div>Div</div>
    <ul>
        <li>ListItem</li>
        <li>ListItem</li>
        <li>ListItem</li>
        <li>ListItem</li>
        <li>ListItem</li>
    </ul>
    <div>Div</div>
    <p>Paragraph</p>
    <div>Div</div>
    <p>Paragraph</p>
    <p>Paragraph</p>
    <ul>
        <li>ListItem</li>
        <li>ListItem
    <ul>
        <li>ListItem</li>
        <li>ListItem</li>
        <li>ListItem</li>
        <li>ListItem</li>
        <li>ListItem</li>
    </ul></li>
        <li>ListItem</li>
        <li>ListItem</li>
        <li>ListItem</li>
    </ul>
    <p>Paragraph</p>
    <div>Div</div>
    <div>Div</div>
    <ul>
        <li>ListItem</li>
        <li>ListItem</li>
        <li>ListItem</li>
        <li>ListItem</li>
        <li>ListItem</li>
    </ul>
    <p>Paragraph</p>
    <div>Div</div>
    <ul>
        <li>ListItem</li>
        <li>ListItem</li>
        <li>ListItem</li>
        <li>ListItem</li>
        <li>ListItem</li>
    </ul>
    <div>Div</div>
    <p>Paragraph</p>
  ...

JavaScript

var count = 10000;
var div = document.querySelector('#main');
var begin;
var childNodes,
    tag,
    className,
    attr,
    attrValue,
    reg = /\s*(?:(\*|(?:(?:\*|[\w\-]+)\|)?[\w\-]+))?(?:\[\s*(?:((?:[\w\-]+\|)?[\w\-]+)\s*((?:~|\^|\$|\*|\|)?=)\s*)?((?:".*?(?:(?:[\\]{2}(?="))|[^\\])"|'.*?(?:(?:[\\]{2}(?='))|[^\\])'|[^"'].*?)?)\s*\])?(?:(\.|#)([\w\-]+))?(?:(:(?::)?)([\w\-]+)(?:\(\s*([^\s,]+)\s*\))?)?(?:(?:\s*(?=\s))?(?:(?:\s(?=,|>|\+|~))?([\s,>+~](?!$)))?)?/g,
    cache = {},
    selector = 'div[aaaa="tttt"].vasea',
    arr,
    cacheChilds = {},
    cacheWait = 10;
console.log('childNodes ', begin = new Date());
for (var i = 0; i < count; i++) {
     arr = cache[selector] || (cache[selector] = reg.exec(selector));
   childNodes = div.children;
    for (var j = 0, t, length = childNodes.length; j < length; j++) {
       
        t = childNodes[j];
        if(t.nodeType == 3 && t.nodeName == arr[1] && t.className == arr[6] && t.getAttribute(arr[2]) == arr[4]){
        t;
        }
    }
}
console.log('childNodes ', new Date() - begin);
console.log('selector ', begin = new Date());
for (var i = 0; i < count; i++) {
    for(var j = 0, arr = div.querySelectorAll('#main > div.vasea[aaaa=tttt]'), len = arr.length; j < len; j++){
        arr[j]
       }
}
console.log('selector ', new Date() - begin);