Senior Frontend Interview — Bộ chủ đề cần master

Xây dựng game tương tự GTA V trong vòng 24h
~/interviews/senior-frontend — bash
// senior.frontend.prep

Phỏng vấn Senior Frontend — 10 chủ đề bạn buộc phải master

Bộ chủ đề cốt lõi mà các công ty từ startup đến big tech sẽ đào sâu khi phỏng vấn vị trí Senior Frontend Developer. Từ JavaScript core đến system design, performance, và soft skills.

10 chủ đề chính ~50+ sub-topic 15 phút đọc level: senior
01

JavaScript & TypeScript Core

+

Đây là nền móng — phỏng vấn senior nào cũng đào rất sâu. Nếu trượt ở mảng này, các vòng sau gần như không cứu được.

core hot always-asked
  • Closure, scope, hoisting — giải thích cơ chế và đưa ví dụ thực tế (memoization, module pattern)
  • this binding — 4 quy tắc: default, implicit, explicit (call/apply/bind), new. Arrow function khác gì?
  • Event loop — call stack, web APIs, callback queue, microtask queue. Vì sao Promise.then chạy trước setTimeout 0?
  • Promise & async/await — error handling, Promise.all vs allSettled vs race, viết Promise from scratch
  • Prototype & class — prototype chain, kế thừa, khi nào dùng class vs factory function
  • Memory management — garbage collection, dấu hiệu memory leak phổ biến (event listener không clean, closure giữ ref)
  • TypeScript advanced — generics, conditional types, mapped types, utility types (Partial, Pick, Omit, Record, ReturnType), type guards, declaration merging
// pro tip
Câu hỏi kinh điển: "Output của đoạn code này là gì?" với setTimeout, Promise, async/await trộn lẫn. Luôn vẽ event loop trên giấy khi trả lời — interviewer sẽ đánh giá cao quá trình suy luận hơn là đáp án đúng.
02

Framework chuyên sâu (React / Vue / Next.js)

+

Tùy JD mà focus framework, nhưng senior phải hiểu internals chứ không chỉ biết dùng API.

core framework-specific
  • React internals — reconciliation, Fiber architecture, virtual DOM diffing, key prop quan trọng thế nào
  • Hooks sâu — vì sao không gọi hooks trong if/loop? useEffect dependency array, cleanup function, useMemo vs useCallback khi nào THỰC SỰ cần
  • Context vs state management — tại sao Context gây re-render toàn cây? Khi nào chọn Redux/Zustand/Jotai/TanStack Query
  • Suspense & Concurrent featuresuseTransition, useDeferredValue, Server Components
  • Next.js — SSR vs SSG vs ISR vs RSC, App Router vs Pages Router, caching layers (request memoization, data cache, full route cache, router cache), middleware, streaming
  • Form & validation — react-hook-form internals, controlled vs uncontrolled, integration với zod
// senior signal
Khi được hỏi "khi nào dùng useMemo?", câu trả lời "luôn dùng cho mọi computed value" sẽ bị đánh trượt. Senior phải biết premature optimization là anti-pattern và memoization có chi phí của nó.
03

Performance Optimization

+

Senior không chỉ build được, mà phải build nhanh. Mảng này thường được hỏi qua case study thực tế.

hot measurable
  • Core Web Vitals — LCP, INP (đã thay FID từ 2024), CLS. Cách đo bằng Lighthouse, PageSpeed, real user monitoring
  • Bundle optimization — code splitting (route-based, component-based), tree shaking, dynamic import, bundle analyzer
  • Rendering optimization — virtualization (react-window, TanStack Virtual), memoization có chiến lược, debounce/throttle
  • Asset optimization — image (next/image, AVIF/WebP, srcset), font loading strategies (font-display swap, preload), critical CSS
  • Network optimization — HTTP/2 push, prefetch, preconnect, service worker caching, CDN strategies
  • Profiling tools — Chrome DevTools Performance tab, React Profiler, memory snapshots, flame graphs
// case study question
"Trang sản phẩm load chậm 4s, làm sao tối ưu?" — Câu trả lời chuẩn bao gồm: đo trước (đừng đoán), xác định bottleneck (network/render/script), áp dụng fix theo thứ tự ưu tiên impact/effort, đo lại để verify.
04

Browser & Web Platform

+

Hiểu browser hoạt động thế nào là điều phân biệt senior với mid-level rõ rệt.

core deep-dive
  • Rendering pipeline — parse HTML → DOM, parse CSS → CSSOM, render tree, layout, paint, composite
  • Reflow vs repaint — properties nào trigger reflow (width, top, font-size), properties nào chỉ trigger composite (transform, opacity)
  • Storage — localStorage vs sessionStorage vs IndexedDB vs cookie vs Cache API. Quota, persistence, performance
  • Service Worker & PWA — lifecycle, caching strategies (cache-first, network-first, stale-while-revalidate)
  • Web Workers — main thread vs worker thread, postMessage, structured clone, khi nào nên dùng
  • Security — XSS (reflected, stored, DOM-based), CSRF, CORS preflight, CSP headers, SameSite cookie, HttpOnly
  • Accessibility — ARIA roles, semantic HTML, keyboard navigation, screen reader testing
05

CSS & Styling

+

Đừng coi thường CSS — senior bị trượt vì CSS căn bản còn nhiều hơn bạn tưởng.

underrated core
  • Cascade & specificity — thứ tự ưu tiên, !important, inline style, specificity calculation
  • Box model & BFC — block formatting context, margin collapse, stacking context
  • Layout — Flexbox vs Grid (khi nào dùng cái nào), position, display, container queries
  • Styling approach — CSS-in-JS (styled-components, emotion) vs Tailwind vs CSS Modules vs vanilla — trade-offs về DX, performance, bundle size
  • Responsive design — mobile-first, breakpoint strategy, fluid typography (clamp()), vw/vh/svh/dvh
  • Animation performance — chỉ animate transformopacity, will-change đúng cách, GPU acceleration
06

Architecture & System Design

+

Vòng system design ở big tech gần như chắc chắn có. Đây là nơi senior thể hiện rõ nhất.

hot big-tech
  • Component design — design một component library, design system, atomic design
  • Micro-frontend — Module Federation (Webpack 5), single-spa, trade-offs với monolith
  • Monorepo — Turborepo, Nx, pnpm workspaces — caching, dependency graph, task pipeline
  • Folder structure — feature-sliced design, clean architecture, scaling cho dự án 100+ developer
  • Real-time — WebSocket vs SSE vs long polling, reconnection strategy, scaling
  • State architecture — server state vs client state vs URL state vs form state — phân biệt và chọn tool đúng
  • Case study — design Twitter feed, Google Docs collab, real-time dashboard, e-commerce checkout
// framework
Khi design, luôn theo flow: requirements → constraints → high-level → deep-dive → trade-offs → bottlenecks. Đừng vội vẽ code, hãy hỏi clarifying questions trước.
07

Testing

+

Senior phải biết test gì, test thế nào, và test bao nhiêu là đủ.

  • Testing pyramid — unit (Jest/Vitest) → integration (Testing Library) → E2E (Playwright/Cypress)
  • What to test — behavior chứ không phải implementation, user-facing chứ không phải internal state
  • Mocking — MSW cho network, fake timers, mock module — khi nào nên/không nên mock
  • Coverage — 100% coverage không có nghĩa là code đúng. Quality > quantity
  • Visual regression — Chromatic, Percy, Playwright screenshot
  • Performance testing — Lighthouse CI, k6, custom metrics
08

DevOps & Tooling cho Frontend

+

Senior frontend hiện đại phải tự deploy được, không cần đợi ops.

  • Bundler internals — Webpack vs Vite vs Turbopack vs Rspack — esbuild/SWC khác Babel ở đâu
  • CI/CD — GitHub Actions, GitLab CI, preview deploy (Vercel, Netlify), feature flags
  • Docker hóa frontend — multi-stage build, nginx serve static, image size optimization
  • Monitoring — Sentry, LogRocket, OpenTelemetry, custom metrics dashboard
  • Feature flag & A/B test — LaunchDarkly, Unleash, hoặc self-hosted
09

Soft Skills & System Thinking

+

Đây là vòng quyết định offer ở level senior. Tech giỏi mà không giao tiếp được thì chỉ làm mid-level mãi.

decisive behavioral
  • Trade-off thinking — kể về một quyết định kỹ thuật khó, bạn đã cân nhắc gì và tại sao chọn phương án đó
  • Mentorship — kinh nghiệm review code, mentor junior, dẫn dắt technical decision
  • Technical debt — cách identify, prioritize, và pitch refactor cho stakeholder không technical
  • Production incident — kể một incident nghiêm trọng bạn đã xử lý: triage, communicate, postmortem
  • Conflict resolution — khi đồng đội bất đồng về tech choice, bạn xử lý thế nào
  • STAR framework — Situation, Task, Action, Result — luôn dùng để cấu trúc câu trả lời behavioral
10

Coding Round

+

Vòng live coding — senior thường gặp 2 dạng: algorithm hoặc build mini app.

live timed
  • DSA cơ bản — array, string, hash map, tree, graph — leetcode easy/medium là đủ cho hầu hết công ty (trừ FAANG)
  • JS implementation — viết từ scratch: debounce, throttle, deepClone, Promise.all, EventEmitter, curry, memoize
  • Mini app trong 45-60 phút — Todo app với filter, autocomplete với debounce + abort previous request, infinite scroll, accordion, tic-tac-toe
  • Component design — build Modal, Tooltip, Tabs, DataTable có sort/filter/pagination — phải reusable và accessible
  • Bug fixing — đưa codebase có bug, yêu cầu identify và fix — kiểm tra debugging skill
// process matters
Trong live coding, think out loud. Interviewer chấm điểm cách bạn suy luận, hỏi clarifying questions trước khi code, viết test cases, refactor sau khi work — chứ không chỉ là code có chạy được hay không.