bi-15 step 01 — Traces 1–3: classList.add, getBoundingClientRect, DOM insertion

Goal

Three traces whose lesson is what is skipped.

Tasks

Trace 1 — classList.add('active') (after bi-07)

  1. Case where no rule mentions .active: show that nothing is invalidated.
  2. Case where a colour-only rule matches: style + paint, no layout.
  3. Case where a width-affecting rule matches: full pipeline.
  4. Cite css_properties.json5 invalidate: for each property involved.
  5. Construct a variant where the same visual change invalidates ~100× more elements.

Trace 2 — getBoundingClientRect() (after bi-08)

  1. Cost when nothing is dirty vs everything.
  2. Build the read/write loop; measure at n = 100/1000/5000; state the complexity class.
  3. Find where the trace attributes the forced layout.

Trace 3 — appendChild (after bi-04)

  1. Enumerate everything that happens before the pointer update.
  2. When are custom element reactions and mutation records delivered?
  3. Compare inserting into a detached tree vs the live document.

Done when

  • Each trace names process, thread, and deferred-vs-immediate at every step
  • Each has a constructed variant that changes which layers run
  • Evidence type (source / trace / debugger) recorded per layer