Senior Frontend Interview — Bộ chủ đề cần master
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.
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.
- 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.thenchạy trướcsetTimeout 0? - Promise & async/await — error handling,
Promise.allvsallSettledvsrace, 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
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.
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.
- 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?
useEffectdependency array, cleanup function,useMemovsuseCallbackkhi 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 features —
useTransition,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
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ế.
- 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
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.
- 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
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.
- 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
transformvàopacity,will-changeđúng cách, GPU acceleration
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.
- 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
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
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
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.
- 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
Coding Round
+Vòng live coding — senior thường gặp 2 dạng: algorithm hoặc build mini app.
- 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
Đăng nhận xét