Calculated Styles Test

Compact view

Benchmark publishedon

Setup

const host = document.createElement('div');
host.id = 'stress-root';
document.body.appendChild(host);

const style = document.createElement('style');
style.textContent = `
  #stress-root .item {
    display: block;
    padding: 2px;
    color: rgb(10, 20, 30);
  }

  #stress-root.active .item:nth-child(2n) { color: rgb(200, 10, 10); }
  #stress-root.active .item:nth-child(3n) { background-color: rgb(20, 30, 40); }
  #stress-root.active .item:nth-child(5n) { font-weight: 600; }
  #stress-root.active .item:nth-child(7n) { border-left: 1px solid black; }
  #stress-root.active .item:nth-child(11n) { opacity: .95; }

  #stress-root:not(.active) .item:nth-child(2n) { color: rgb(10, 100, 200); }
  #stress-root:not(.active) .item:nth-child(3n) { background-color: rgb(240, 240, 240); }
  #stress-root:not(.active) .item:nth-child(5n) { font-weight: 400; }
`;
document.head.appendChild(style);

const frag = document.createDocumentFragment();

for (let i = 0; i < 3000; i++) {
  const el = document.createElement('div');
  el.className = 'item';
  el.textContent = 'Style stress item ' + i;
  frag.appendChild(el);
}

host.appendChild(frag);

const probe = host.children[1500];

Test Runner

Initializing...

Testing in
Test CaseOps/sec
// CASE 1 — STYLE RECALC
// CASE 1 — STYLE RECALC
for (let i = 0; i < 100; i++) {
  host.classList.toggle('active');
  const x = getComputedStyle(probe).color;
}
ready
// CASE 2 — STYLE + LAYOUT
// CASE 2 — STYLE + LAYOUT
for (let i = 0; i < 100; i++) {
  host.classList.toggle('active');
  const x = getComputedStyle(probe).width;
}
ready

Revisions

You can edit these tests or add more tests to this page by appending /edit to the URL.

Revision 1
publishedon