Frontend Fundamentals

A reference library for browser-level front-end system design: how the browser lays out, renders, and composites; the DOM and Web Observer APIs; UI optimization techniques (virtualisation); how to structure and search application state; how to choose a network transport; and how to make a web app fast. Read the one reference that matches the question rather than loading everything.

The golden rule of Web UI applications: Do not block the Main Thread (UI Thread).

References

Each file is loaded on demand — read one only when the task needs that depth (progressive disclosure).

• references/core-fundamentals.md — box model & box-sizing, box types (block/inline/anonymous), formatting contexts, the position system & containing-block rules · read when reasoning about layout, sizing, or why an element sits where it does.
• references/rendering.md — stacking context, the DOM→render-tree→reflow→repaint→composite pipeline, GPU-composited animation, render vs graphic (compositor) layers · read when diagnosing jank, layout/paint cost, or z-index/layer-promotion behaviour.
• references/dom-api.md — the DOM class hierarchy, query method performance table, add/remove perf impact, DocumentFragment/<template> batch inserts · read when manipulating the DOM directly or building a low-level/generic component.
• references/web-apis-observers.md — Intersection / Mutation / Resize observers (with code) and the resize-mechanism decision table · read when replacing polling, doing lazy-load/visibility logic, or reacting to size/DOM changes.
• references/virtualisation.md — the sliding-window technique: top/bottom observers, element pool, recycling and the translateY positioning math · read when rendering very long lists/grids without bloating the DOM.
• references/state-design.md — data classes/properties, normalization (1NF–3NF), inverted/composite indexes on a Web Worker, memory offloading, browser storage options · read when structuring large client state or adding in-app search.
• references/network.md — UDP/TCP & the protocol stack, long polling vs SSE vs WebSockets (pros/cons/when), a per-platform API design example, REST vs GraphQL heuristics · read when choosing how the client talks to the server.
• references/performance.md — Core Web Vitals targets (LCP/INP/CLS), network/HTTP, JS bundle (polyfills, code splitting, preload/prefetch, minify/compress), CSS critical-path, image formats, font loading · read when tuning load/runtime performance.