Web Fundamentals

From URL to pixels

1. The browser requests a document.
2. HTML is parsed into the DOM.
3. CSS is matched and the layout is computed.
4. JavaScript runs and can change any of the above.
5. The browser paints, then repaints when something changes.

Anything you do in step 4 that forces step 3 again is expensive. That is most performance work in one sentence.

Semantics first

<button type="submit">Save</button>

not

<div onclick="save()">Save</div>

The first is focusable, announced by a screen reader, works with the keyboard and submits a form. The second is a div. Reaching for the right element is the cheapest accessibility work available.

Where state lives

• URL — anything a user should be able to share or reload into: the current tab, a filter, a page number.
• Server — the truth. Everything durable.
• Component state — transient interaction: an open menu, a draft input.

When in doubt, push state up the list, not down.

The event loop

JavaScript runs one thing at a time. await does not pause the browser; it yields. Long synchronous work blocks scrolling, clicks and paint — split it or move it off the main thread.