Run results for: querySelector vs querySelectorAll 9999

Run details:

User agent: Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/120.0.0.0 Safari/537.36

Browser: Chrome 120

Operating system: Mac OS X 10.15.7

Device Platform: Desktop

Date tested: 2 years ago

Test name	Executions per second
querySelector	77907.0 Ops/sec
querySelectorAll	56509.7 Ops/sec

Script Preparation code:

	const x = 5;
      const y = 5;
      const z = 5;
      const xFrag = document.createDocumentFragment();
      for (let i = 0; i < x; i++) {
        const xNode = document.createElement("div");
        xNode.id = `box${i}`;
        xNode.classList.add("box", "container");
        const yFrag = document.createDocumentFragment();
        for (let j = 0; j < y; j++) {
          const yNode = document.createElement("div");
          yNode.id = `div${i}-${j}`;
          yNode.classList.add("block", "outer");
          for (let k = 0; k < z; k++) {
            const zNode = document.createElement("div");
            zNode.id = `div${i}-${j}-${k}`;
            zNode.classList.add("block", "inner");
            const p = document.createElement("p");
            p.id = `p${i}-${j}-${k}`;
            p.classList.add("content");
            p.textContent = `${i}-${j}-${k}`;
            zNode.append(p);
            yNode.append(zNode);
          }
          yFrag.append(yNode);
        }
        xNode.append(yFrag);
        xFrag.append(xNode);
      }
      const container = document.createElement("div");
      container.setAttribute("id", "container");
      container.classList.add("container");
      container.append(xFrag);
      document.body.append(container);

Tests:

querySelector
const selector = ".box:first-child ~ .box:nth-of-type(4n) + .box .block.inner > .content"; document.querySelector(selector);
querySelectorAll
const selector = ".box:first-child ~ .box:nth-of-type(4n) + .box .block.inner > .content"; document.querySelectorAll(selector);