Skip to content

Department of Browser Behaviour

Investigate the web.
Break things.
Understand why.

A laboratory for the parts of frontend engineering nobody explained properly: stacking contexts, the event loop, the rendering pipeline, and the true cost of everything you ship.

Enter the lab Browse laboratories

Build a program. Then step through it.

  1. 1console.log("A")
  2. 2Promise.resolve().then(() => log("B"))
  3. 3setTimeout(() => log("C"))
  4. 4console.log("D")

Stack

  • <script>
  • console.log("A")

Microtasks

    Tasks

      ConsoleA

      Synchronous, it runs on the spot.

      Currently under investigation

      All 22 experiments

      What happens when you click a button?

      0 runs
      1. CLICKThe OS delivers a pointer event to the browser process.
      2. EVENTA task is queued on the renderer's event loop. Input has priority.
      3. CAPTUREThe event travels down from window to the target's parent.
      4. TARGETListeners on the element itself fire, capture phase first.
      5. BUBBLEThe event travels back up. Delegated handlers run here.
      6. HANDLERYour function runs, on the main thread, blocking everything else.
      7. STATE UPDATEReact schedules work. Updates in the same event are batched.
      8. RENDERRender, reconcile, commit, then style, layout, paint, composite.

      Laboratories

      Under calibration

      Two ways to be wrong

      Frontend DetectiveUNSOLVED

      The Missing Button

      The button is in the DOM. The CSS says it is visible. Nobody can see it. The developer insists everything is correct, and the developer is telling the truth.

      • Read the computed stylessealed
      • Measure the boxsealed
      • Inspect the parent's overflowsealed
      • Check the failing sessionssealed
      Work the case DEVELOPER6 threads · 4 suspects
      The Order That Was Placed TwiceThe Phantom Horizontal Scrollbar
      Myth ledger8 claims on file
      1. 01“Just add !important.”It works exactly once. Then it becomes the thing the next person has to defeat, and the only way to defeat it is another !important.BUSTED
      2. 02“React is slow.”React's own work is rarely the bottleneck. The tree shape, the amount of JavaScript shipped, and what happens during hydration usually are.IT DEPENDS
      3. 03“More memoization = more performance.”Every memo has a cost: the comparison, the retained references, and the dependency array you now have to keep correct. Applied blindly, it is a net loss.BUSTED
      4. 04“A smaller bundle is always faster.”Smaller usually helps, but *when* bytes arrive and *what* they do on arrival matter more than the total.PARTLY TRUE
      5. 05“100 Lighthouse means your website is perfect.”Lighthouse is a synthetic run on a simulated device, on your network, with no real user in sight. It is a useful ratchet, not a verdict.BUSTED
      6. 06“useEffect is for everything.”An effect synchronises your component with an external system. If there is no external system, you probably do not need one.BUSTED
      7. 07“Tailwind means you don't need CSS knowledge.”Utility classes change how you write declarations. They do not change the box model, the cascade, stacking contexts or formatting contexts, and those are the parts that confuse people.BUSTED
      8. 08“Adding a cache always makes it faster.”A cache with a poor hit rate adds a lookup, a write, an eviction policy and an invalidation bug, in exchange for very little.IT DEPENDS
      Read the full archive

      Research dossiers

      Research library

      Stop memorising. Start investigating. The browser is doing far more than you think, and most of it is documented, just not anywhere you were looking.

      • Run the experiment

        Every claim has a bench you can operate.

      • Read the source

        Specifications and engine docs, cited in full.

      • Keep the receipts

        Simplified models are labelled as models.

      Frontend Research Institute

      Research ID

      FRI-------

      Level

      EXPERIMENTS
      CASES SOLVED
      DOSSIERS READ
      MYTHS BUSTED
      DISCOVERIES
      Brain damage

      Score 0 · stored locally, never uploaded

      Web archaeologyThe browser museum is open