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.
1---2name: frontend-fundamentals3description: Front-end system-design reference — box model, rendering/reflow, DOM & Web APIs, virtualisation, state design, network transports, web performance.4---56# Frontend Fundamentals78A 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.910> **The golden rule of Web UI applications:** *Do not block the Main Thread (UI Thread).*1112## References1314Each file is loaded on demand — read one only when the task needs that depth (progressive disclosure).1516- `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.17- `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.18- `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.19- `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.20- `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.21- `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.22- `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.23- `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.
jgamaraalv