Frontend Interview: 15 In-Depth Questions

③ Quantified high-score answer

In JavaScript runtime architecture, a closure is created when an inner function retains references to its outer lexical environment, preventing stack variables from being garbage collected after the parent execution context finishes. In our enterprise analytics tracking pipeline, we leveraged closures within factory functions to encapsulate unique session identifiers, retry counters, and buffered payloads, strictly isolating mutable internal state from external script interference without polluting global namespace. The trade-off is inadvertent memory retention: an event listener holding a reference to a detached DOM container retained a 14MB detached node graph in memory, degrading client performance over sustained sessions. Using Chrome DevTools Memory Heap Snapshots, we traced the retention path directly to the outer lexical scope of an uncleaned observer. We resolved the leak by introducing an explicit teardown lifecycle hook that nullified lexical references and disconnected observers upon component unmount, stabilizing heap allocation below 45MB.

③ Quantified high-score answer

JSON cloning discards undefined, functions, Symbols, and breaks Dates into strings. My implementation uses a WeakMap to cache visited objects and resolve circular references, branches into specific constructors for Date, RegExp, Map, and Set, and recurses over plain objects and arrays. In production, structuredClone is the default, falling back to this recursive implementation only when older browsers must be supported.

③ Quantified high-score answer

React performs an Object.is shallow comparison between consecutive renders. Inline objects receive new references on every render, causing infinite loops. Stale closures occur when effect callbacks capture state snapshots from earlier renders; the fix is using functional setState updates or storing values in mutable refs. In one production infinite scroll bug, page was locked to 1 because fetch was unmemoized and captured the initial state.

③ Quantified high-score answer

The Virtual DOM is rarely faster than hand-optimized direct DOM operations. Its value is raising the performance floor and providing cross-platform declarative abstractions. React reduces tree diffing from O(n³) to O(n) via three heuristics: same-level comparison, stable keys, and replacing the entire tree when component types change. In a 5,000-row virtual table, switching from full reconciliation to key-based localized updates reduced initial render latency from 680ms to 45ms.

③ Quantified high-score answer

I follow a 4-step pipeline: Quantified Baselines → Network → Asset Bundling → Rendering. In DevTools Performance, I inspect TTFB, FCP, and LCP. High TTFB indicates CDN cache misses or slow DNS; delayed LCP usually stems from render-blocking JS bundles or oversized hero images. In an internal portal with a 4.8s LCP, webpack-bundle-analyzer revealed icon fonts and rich text editors inside the main chunk. Extracting them via dynamic imports shrunk the bundle from 2.4MB to 380KB, lowering LCP to 1.4s alongside WebP formats.

③ Quantified high-score answer

We migrated 3 legacy apps across Vue2 and React18 using qiankun. For communication, a centralized event-bus dispatches only immutable auth tokens and locale configs to prevent tight coupling. We avoided strict Shadow DOM because portal popups appended to document.body lost styled tokens; instead, we enforced namespace prefixes via PostCSS build-time transforms. Module Federation shared the React runtime, shedding 40% of duplicate child bundle weight.

③ Quantified high-score answer

The architecture balances viewport calculation, buffer pre-rendering, and offset caching. For dynamic heights, binary search estimates positions, while a ResizeObserver records rendered heights back into a cache map and updates cumulative offsets. To prevent blank flashes during fast flicks, I added a 5-item buffer above and below the window, paired with will-change: transform on a dedicated composited layer. Combined with content-visibility: auto, 100k items maintain 58+ fps.

③ Quantified high-score answer

We operate a 3-tier strategy: Global Catch → Client Deduplication → Layered Fallback. Window.onerror and unhandledrejection catch async errors. React features 3-level ErrorBoundaries: app-level for fatal fallbacks, module-level with retry actions, and card-level silent placeholders. A client-side fingerprint throttles identical error stacks to once every 5 seconds, switching to adaptive sampling during surges. Source maps are strictly resolved on an internal private symbolication service.

③ Quantified high-score answer

Our GitHub Actions pipeline has 4 stages: Lint & TypeCheck (2-min timeout gate), parallel Vitest suites, containerized build, and canary release. We store hash-keyed caches for pnpm and Next.js, reducing cold starts from 6m to 1m40s. Secrets inject via encrypted vault variables into immutable Docker images. If a production fault occurs, our CDN edge config allows instant one-click rollback to the previous artifact hash in under 90 seconds.

③ Quantified high-score answer

Serving 8 product lines, our library follows three pillars: First, design tokens reside entirely in CSS variables, enabling seamless theme toggles at the root level. Second, breaking changes adhere to SemVer; deprecated props trigger console warnings with migration guides across two major releases before removal. Third, builds emit pure ESM alongside explicit package.json:sideEffects annotations. Over 6 months, cross-team UI divergence dropped from 20+ issues to 2.

③ Quantified high-score answer

Our order page had a 4.2s LCP. The team wanted to scale server hardware, while I proposed BFF aggregation and virtualized rendering. QA opposed citing high regression risk. Instead of forcing consensus, I built a 1-week proof-of-concept with A/B testing, demonstrating LCP dropping to 1.6s and API calls falling from 27 to 6 with zero errors on 5% canary traffic. The rollout reduced server infrastructure costs by 18%. In retrospect, involving QA in early architectural drafting would have saved 2 weeks.

③ Quantified high-score answer

During coupon stacking implementation, PM wanted real-time client calculations while Backend wanted cached downstream lookups. I re-centered the conversation around our common goal: preventing checkout pricing discrepancies without sacrificing checkout speed. I proposed optimistic frontend calculations for instant UX feedback, reconciled against authoritative backend responses upon final submission. Checkout error rates dropped from 0.7% to 0.05%.

③ Quantified high-score answer

Last November, a product page blanked out for 23 minutes post-release, affecting ~46,000 page views. The trigger was an unhandled exception in an optional analytics SDK; the root cause was lack of sandbox isolation for third-party scripts and missing canary verification. After rolling back, I encapsulated all external tracking within try-catch sandboxes and mandated a 10-minute 5% canary release gate. Zero repeat incidents occurred over the following 8 months.

③ Quantified high-score answer

In my previous role, I built our internal component infrastructure from scratch across 6 business lines. Once that transitioned into maintenance, the technical challenge curve leveled off. My next step is owning end-to-end user-facing products where performance directly impacts business metrics, which aligns with how your frontend team operates. Over the past two years, I only transitioned once, demonstrating long-term focus.