30 khái niệm Frontend mà bạn phải nắm trước khi đi phỏng vấn

Mình từng rớt một buổi phỏng vấn frontend chỉ vì không giải thích được event loop cho rõ ràng. Không phải mình không biết — mình dùng setTimeout, Promise hàng ngày. Nhưng khi người ta hỏi "giải thích cơ chế hoạt động", mình ấp úng. Đó là lúc mình nhận ra: biết dùng khác xa với hiểu sâu.

Sau 5 năm làm frontend, ngồi cả hai phía bàn phỏng vấn, mình thấy một pattern rất rõ: framework thì năm nào cũng đổi — từ Angular sang React rồi giờ nhiều người nhảy sang Svelte, Solid. Nhưng những câu hỏi nền tảng? Chúng không bao giờ thay đổi. Người ta vẫn hỏi closure, vẫn hỏi prototypal inheritance, vẫn hỏi critical rendering path.

Dưới đây là 30 khái niệm mà theo kinh nghiệm của mình, bạn cần nắm chắc trước khi bước vào bất kỳ buổi phỏng vấn frontend nào. Mình chia thành 5 nhóm để dễ tiêu hóa.

JavaScript Core — Nền móng của mọi thứ

Đây là nhóm quan trọng nhất. Bạn có thể không nhớ API của React, nhưng nếu không hiểu JavaScript ở tầng sâu thì mọi thứ bạn xây đều lung lay.

1. Event loop và call stack — Hiểu cách JavaScript thực thi code, tại sao nó single-threaded mà vẫn handle được async.

2. Microtasks vs macrotasks — Promise.then() chạy trước hay setTimeout(..., 0) chạy trước? Tại sao? Đây là câu hỏi kinh điển.

3. Closures và lexical scoping — Closure không phải khái niệm trừu tượng. Bạn dùng nó mỗi ngày khi viết React hooks, khi viết debounce function.

4. Hoisting và temporal dead zone — var vs let vs const không chỉ là chuyện convention. Hiểu hoisting giúp bạn debug những lỗi kỳ quặc.

5. Keyword this — Arrow function vs regular function xử lý this khác nhau hoàn toàn. Điều mình thấy hay là rất nhiều người dùng arrow function "vì tiện" mà không hiểu tại sao nó fix được vấn đề this.

6. Object references vs primitive comparisons — Tại sao {} === {} trả về false? Nếu bạn không trả lời được câu này, bạn sẽ gặp bug với React re-render mà không biết tại sao.

7. Prototypal inheritance — JavaScript không có class thật sự. class chỉ là syntactic sugar. Hiểu prototype chain giúp bạn hiểu cách JavaScript thực sự hoạt động.

8. Shallow vs deep copy — Object.assign(), spread operator, structuredClone() — mỗi cái copy khác nhau. Sai ở đây là bug production đấy.

Kỹ thuật xử lý nâng cao

Nhóm này là nơi phân biệt junior và mid-level. Bạn có thể code được mà không cần hiểu sâu, nhưng khi phỏng vấn, đây là chỗ người ta đào.

9. Debounce vs throttle — Search input dùng cái nào? Scroll event dùng cái nào? Theo kinh nghiệm của mình, rất nhiều ứng viên nhầm lẫn hai khái niệm này.

10. Implicit vs explicit type coercion — "5" + 3 vs "5" - 3 cho kết quả khác nhau. JavaScript "helpful" quá mức đôi khi là ác mộng.

11. Truthy/falsy values và equality quirks — 0, "", null, undefined, NaN — tất cả đều falsy nhưng không giống nhau.

12. == vs === — Nghe đơn giản nhưng bạn có giải thích được cơ chế type coercion đằng sau == không?

13. call, apply, bind — Ba cách thay đổi context của this. Cái nào gọi ngay, cái nào trả về function mới?

14. Event delegation và bubbling — Thay vì gắn listener cho 1000 items, gắn một cái cho parent. Đây là pattern mà React cũng dùng internally.

15. typeof, instanceof, type checking — typeof null === 'object' là một trong những quirks nổi tiếng nhất của JavaScript.

16. Spread vs rest operators — Cùng cú pháp ... nhưng ngữ cảnh khác nhau hoàn toàn.

17. map, filter, reduce — Quan trọng hơn là biết khi nào KHÔNG nên dùng. Đừng chain 5 cái .map().filter().reduce() khi một vòng for đơn giản hiệu quả hơn.

18. Currying và partial application — Không phải chỉ để "khoe" functional programming. Currying thực sự hữu ích khi bạn cần tạo factory functions.

Async JavaScript — Nơi nhiều người vấp nhất

Theo kinh nghiệm phỏng vấn của mình, async là chủ đề mà ứng viên tự tin nhất nhưng lại sai nhiều nhất.

19. async/await vs Promises vs callbacks — Hiểu evolution: từ callback hell → Promise chain → async/await. Nhưng async/await cũng có pitfalls, ví dụ chạy tuần tự khi có thể chạy song song với Promise.all().

20. Error handling trong async JavaScript — try/catch với async/await, .catch() với Promise. Bạn có biết unhandled promise rejection có thể crash Node.js process không?

Browser — Hiểu nơi code của bạn chạy

Đây là nhóm mà nhiều frontend developer bỏ qua. Họ biết viết code nhưng không hiểu browser xử lý code đó như thế nào.

21. Critical rendering path — HTML → DOM, CSS → CSSOM, rồi merge thành Render Tree. Biết cái gì block rendering giúp bạn tối ưu performance đáng kể.

22. Repaint vs reflow — Thay đổi color chỉ gây repaint. Thay đổi width gây reflow — tốn kém hơn nhiều. Layout thrashing xảy ra khi bạn đọc rồi ghi DOM liên tục.

23. DNS resolution → TCP handshake → TLS → Request lifecycle — Khi user gõ URL và nhấn Enter, chuyện gì xảy ra? Câu hỏi kinh điển, và câu trả lời tốt thể hiện bạn hiểu toàn bộ hệ thống.

24. Cách browser render HTML, CSS, JS — Parser bị block bởi script tag như thế nào? defer vs async khác gì nhau?

Performance & Web Platform

Nhóm cuối cùng nhưng không kém phần quan trọng. Đây là những thứ cho thấy bạn không chỉ biết code mà còn biết ship sản phẩm tốt.

25. Preload, prefetch, lazy loading — <link rel="preload"> vs <link rel="prefetch"> — một cái cho resource cần ngay, một cái cho resource có thể cần sau.

26. Service workers và caching strategies — Cache-first, network-first, stale-while-revalidate. Nếu bạn làm PWA, đây là kiến thức bắt buộc.

27. CORS, preflight requests, SameSite cookies — Mình đảm bảo bạn đã từng gặp lỗi CORS. Nhưng bạn có giải thích được tại sao browser gửi OPTIONS request trước không?

28. Web storage APIs — localStorage vs sessionStorage vs cookies. Khi nào dùng cái nào? Giới hạn dung lượng? Security implications?

29. Accessibility (a11y) — ARIA roles, focus management, semantic HTML. Điều mình thấy hay là nhiều công ty bắt đầu coi a11y là tiêu chí bắt buộc chứ không phải "nice to have" nữa.

30. Responsive design — Mobile-first approach, media queries, viewport units (vh, vw, dvh). Container queries giờ cũng đã được support rộng rãi.

Cách mình suggest bạn học

Đừng cố nhồi 30 khái niệm trong một tuần. Theo kinh nghiệm của mình, cách hiệu quả nhất là:

• Nhóm 1-2 khái niệm mỗi ngày, đọc kỹ rồi viết lại bằng lời của mình. Nếu bạn không giải thích được cho người khác hiểu, bạn chưa thực sự hiểu.
• Code ví dụ nhỏ cho mỗi concept. Đừng chỉ đọc lý thuyết. Mở console lên, thử typeof null, thử tạo closure, thử so sánh shallow copy vs deep copy.
• Giả lập phỏng vấn với bạn bè hoặc tự record. Nghe lại sẽ thấy chỗ nào mình còn ấp úng.

Mình muốn nhấn mạnh một điều: 30 concepts này không phải để bạn học thuộc lòng rồi "trả bài". Chúng là nền tảng giúp bạn debug nhanh hơn, thiết kế solution tốt hơn, và giao tiếp với team hiệu quả hơn. Phỏng vấn chỉ là cái cớ để bạn hệ thống lại kiến thức.

Và cuối cùng — framework sẽ tiếp tục thay đổi. Có thể 3 năm nữa chúng ta không còn dùng React. Nhưng event loop vẫn là event loop. Closure vẫn là closure. Đầu tư vào nền tảng là khoản đầu tư không bao giờ mất giá.

Chúc bạn phỏng vấn thành công. 💪