Frontend

The Frontend Foundation: A Full-Stack Map from JS Closures to Browser Rendering

By 原则猫 · Jul 3, 2026

Read original on juejin.cn ↗ Google Translate ↗ Alt translation

Frontend interviews at large Chinese tech firms routinely probe this exact syllabus, and the depth expected — from the IEEE 754 representation of 0.1 to the internal hook linked list — exceeds what most Western bootcamps and mid-level roles require. A developer who can trace a setState call through Fiber's work loop and explain why a closure over a stale state variable breaks is operating at a senior-plus level.

Summary

The core JavaScript section dissects the event loop, closures, prototype chains, and floating-point precision, connecting each concept to real-world React behavior like stale state, memory leaks, and hook ordering. The React chapter maps Fiber's linked-list architecture, the Lane priority model, and the commit pipeline, explaining why synthetic events fire after native ones and how the diff algorithm uses two rounds of traversal to handle list reordering.

Browser fundamentals cover the rendering pipeline from DOM/CSSOM construction through layout, paint, and compositing, with concrete triggers for reflow and how GPU layers bypass it. The networking section contrasts HTTP/1.1 keep-alive with HTTP/2 multiplexing and binary framing, then walks through TLS 1.2's two-RTT handshake and the hybrid encryption that protects it.

Engineering coverage includes Webpack's compilation phases, Vite's esbuild pre-bundling, pnpm's hard-link dependency tree, and a full caching strategy from Cache-Control max-age through Etag negotiation. Security and monitoring round out the map with XSS escape vectors, CSRF double-token patterns, and white-screen detection via MutationObserver.

Takeaways

— React's useState hooks are stored in a linked list whose order is fixed at compile time; moving a hook inside a conditional breaks the next-pointer chain and corrupts state updates.

— Fiber's work loop splits rendering into 5ms time slices, checking each frame for idle time and yielding to the browser via MessageChannel when it runs out.

— The diff algorithm handles multi-node lists in two passes: first pass matches by key for reusable nodes, second pass handles insertions, deletions, and moves.

— 0.1 + 0.2 !== 0.3 because IEEE 754 double-precision floating point uses 52 mantissa bits, and both numbers produce infinite repeating fractions in binary that get truncated.

— Closures extend a local scope's lifetime, which is why uncleared setInterval callbacks inside useEffect cause memory leaks — the callback holds a reference to the component's entire scope.

— React synthetic events bubble at the root container after native events finish; e.stopPropagation on a native event won't stop a synthetic event from firing.

— HTTP/2's multiplexing uses binary framing with stream IDs so the server can interleave responses on one TCP connection without head-of-line blocking.

— pnpm avoids npm's phantom dependency problem by using a content-addressable store with hard links, so packages can only access dependencies declared in their own package.json.

— Cache-Control: no-cache doesn't disable caching — it forces a conditional request every time, while no-store truly disables all caching.

— Webpack's loader is a function that transforms a single file; its plugin system hooks into the full compilation lifecycle via tapable, solving problems loaders can't reach.

Conclusions

The syllabus treats React's internal implementation — Fiber nodes, Lane bitmasks, hook linked lists — as standard interview material, not library internals to abstract away. This expectation produces engineers who debug rendering by reasoning about work loops rather than trial-and-error.

Connecting closures directly to React's stale-state bug and memory leaks turns an academic JS concept into a diagnostic tool. The explanation that a closure over a function component's scope variable persists because the timer callback holds a reference is more actionable than generic 'closures capture variables' definitions.

The event loop comparison between browsers and Node — where Node drains microtasks per phase rather than per macro task — is a subtlety that trips up developers moving isomorphic code between environments, especially around process.nextTick ordering.

Floating-point precision is taught not as a trivia question but through the IEEE 754 bit layout (sign, exponent, mantissa) and the exact reason 2^53 - 1 is the max safe integer. This level of detail means candidates are expected to explain why BigInt exists, not just that it does.

The caching section correctly distinguishes no-cache from no-store — a distinction most developers get wrong — and explains Etag's server-side computation cost as a tradeoff against Last-Modified's lower precision for dynamic content.

Concepts & terms

Fiber

React's reconciliation data structure — a linked list where each node holds component state, props, and pointers to child, sibling, and parent nodes. The linked-list structure allows React to pause traversal mid-render and resume later, enabling concurrent rendering.

Lane Model

React's priority system using bitwise operations on 31-bit integers. Multiple priority lanes can be active simultaneously, and a high-priority update can interrupt and discard a lower-priority render in progress.

BFC (Block Formatting Context)

A CSS layout context where an element's internal layout is isolated from its surroundings. Triggering a BFC on a parent causes it to contain floated children and prevents margin collapsing with external elements.

Phantom Dependency

In npm's flat node_modules, a package can import another package it never declared as a dependency because that package was hoisted to the root. pnpm prevents this by giving each package only its declared dependencies via symlinks.

Synthetic Events

React's cross-browser wrapper around native DOM events. All handlers are delegated to the root container, and synthetic events fire during the bubbling phase after native events complete, which is why native stopPropagation doesn't block them.

TLS Hybrid Encryption

HTTPS uses asymmetric encryption (ECDH) only during the handshake to exchange a session key, then switches to symmetric encryption (AES) for the actual data transfer, balancing the security of asymmetric crypto with the speed of symmetric crypto.

Source: juejin.cn ↗ Google Translate ↗ Backup ↗