Câu hỏi phỏng vấn Frontend Developer: HTML, CSS, JavaScript và take-home

Lập trình viên Front-end (Frontend Developer) phụ trách phần giao diện người dùng nhìn thấy và thao tác trên website. Bài viết gom các câu hỏi phỏng vấn frontend developer theo nhóm kiến thức: HTML/CSS, JavaScript, framework, hiệu năng, accessibility và Git. Mỗi câu kèm điều nhà tuyển dụng muốn kiểm tra cùng ý trả lời ngắn, giúp bạn luyện theo cách hiểu thay vì học thuộc.

1. Một buổi phỏng vấn Front-end thường đi qua những vòng nào?

Quy trình phỏng vấn Frontend Developer thường gồm cuộc gọi sàng lọc, vòng hỏi kỹ thuật và vòng thực hành. Vòng thực hành có thể là live coding khoảng một giờ hoặc bài take-home vài ngày. Lý thuyết cần chắc, nhưng thực hành mới phân loại ứng viên rõ rệt.

2. Câu hỏi HTML, CSS và responsive

Box model và box-sizing

Câu này kiểm tra bạn tính được kích thước thật của phần tử. Phần tử gồm content, padding, border, margin; với `content-box` mặc định, padding và border cộng thêm ngoài width. Với `border-box`, width đã gồm cả hai.

Flexbox khác Grid ở điểm nào?

Flexbox xử lý một chiều (hàng hoặc cột), hợp với thanh điều hướng. CSS Grid xử lý hai chiều, hợp với khung trang hoặc lưới sản phẩm; hai công cụ thường dùng kết hợp.

Responsive và mobile-first

Ý chính gồm meta viewport, media query, đơn vị tương đối và `srcset`; mobile-first là viết CSS cho màn hình nhỏ trước. Để thấy doanh nghiệp đang ghi yêu cầu HTML/CSS ra sao, bạn có thể xem các tin việc làm CNTT – phần mềm và đối chiếu với phần ôn tập của mình.

3. Câu hỏi JavaScript: closure và event loop là bộ lọc kiến thức nền

Hai khái niệm này nằm dưới code bất đồng bộ nên hay được dùng làm bộ lọc. Giải thích được kết quả một đoạn code ngắn mới cho thấy bạn hiểu thật. Hãy tự chạy lại ví dụ trong console.

Closure là gì, cho ví dụ?

Closure là hàm ghi nhớ biến của phạm vi (scope) nơi nó được tạo, kể cả khi phạm vi đó đã chạy xong. Ví dụ: vòng lặp `for (var i = 0; i < 3; i++)` gọi `setTimeout` in `i` cho ra 3, 3, 3 vì dùng chung một biến `var`; đổi sang `let` thì in 0, 1, 2.

Event loop chạy thế nào?

Callback của Promise vào microtask queue và được xử lý hết trước macrotask như `setTimeout`. Với đoạn code in 1, đặt `setTimeout` in 2, gọi `Promise.resolve().then` in 3, rồi in 4, kết quả là 1, 4, 3, 2.

Ứng viên giải thích được vì sao 3 đứng trước 2 thường được hỏi sâu hơn, còn ứng viên đoán mò sẽ dừng ở câu này.

Từ đây, người hỏi hay chuyển sang `async/await` và `Promise.all`. Để xem toàn cảnh yêu cầu nghề, bạn có thể đọc Front End Developer là gì, yêu cầu kỹ năng gì? và xác định mảng mình còn thiếu.

4. React, bảo mật, hiệu năng web và accessibility

Câu hỏi framework thường xoay quanh vì sao chia component và luồng dữ liệu một chiều. Phần chuyên sâu nên ôn theo framework trong tin tuyển dụng, thường gặp là React. Bảo mật, hiệu năng và accessibility dùng được cho mọi framework.

Câu hỏi React về hooks, useEffect, re-render và memo

Phỏng vấn React hay hỏi khi nào component re-render, cách dùng `useEffect` và khi nào cần memo. Component re-render khi state đổi qua hàm set hoặc khi component cha re-render. `useEffect` chạy sau khi giao diện cập nhật: thiếu mảng phụ thuộc thì chạy sau mọi lần render, `[]` chỉ chạy khi mount, `[userId]` chạy lại khi giá trị đổi. Hàm cleanup chạy trước lần chạy kế tiếp và khi unmount, dùng để hủy timer hay subscription. `useMemo` ghi nhớ kết quả tính toán, `React.memo` bỏ qua re-render khi props không đổi.

Câu hỏi bảo mật frontend: XSS, CSP và sanitization

Câu hỏi bảo mật frontend thường bắt đầu từ XSS (Cross-Site Scripting): dữ liệu người dùng bị chèn vào trang và chạy như script. React tự escape giá trị trong JSX, nhưng `dangerouslySetInnerHTML` hay `innerHTML` bỏ qua lớp này, nên HTML bên ngoài cần sanitization bằng thư viện như DOMPurify. Content Security Policy (CSP) là header HTTP giới hạn nguồn script qua `script-src`, chặn script inline không có nonce hoặc hash.

Hiệu năng và accessibility

Google đo trải nghiệm trang qua Core Web Vitals gồm LCP (hiển thị nội dung chính), INP (độ phản hồi) và CLS (xô lệch bố cục); cách cải thiện gồm lazy-load ảnh, chia nhỏ bundle, đo bằng Lighthouse. Về accessibility, nhắc HTML ngữ nghĩa, `alt`, `label` cho ô form, điều hướng bàn phím và độ tương phản theo WCAG của W3C.

5. Bảng câu hỏi theo cấp độ và ý trả lời

Bảng dưới gợi ý câu hỏi theo cấp, bám theo MDN Web Docs; hãy diễn đạt bằng lời của mình.

Cấp độ	Câu hỏi	Nhà tuyển dụng kiểm tra	Ý trả lời ngắn
Fresher	display none khác visibility hidden?	Hiểu cách trình duyệt dựng bố cục	display none bỏ phần tử khỏi bố cục; visibility hidden ẩn nhưng vẫn giữ chỗ.
Junior	Event delegation là gì?	Xử lý sự kiện hiệu quả	Gắn một listener ở phần tử cha, dựa vào cơ chế nổi bọt để xử lý cho phần tử con.
Middle	Debounce khác throttle thế nào?	Tối ưu tương tác	Debounce chờ ngừng thao tác mới chạy; throttle giới hạn số lần chạy trong một khoảng thời gian.
Middle	Trang tải chậm, bạn làm gì?	Tư duy đo trước, sửa sau	Đo bằng Lighthouse, tìm tài nguyên nặng, chia nhỏ bundle, tối ưu ảnh rồi đo lại.

Với Frontend Developer, cấp càng cao thì câu hỏi càng chuyển từ “cái gì” sang “bạn đã xử lý ra sao”.

Câu hỏi system design cho Frontend Developer

Câu hỏi system design cho Frontend Developer, chủ yếu ở cấp middle và senior, yêu cầu thiết kế một giao diện như bảng tin hay ô autocomplete. Hãy làm rõ yêu cầu, rồi chọn cách render: CSR dựng trang trong trình duyệt, SSR dựng HTML trên máy chủ để nội dung hiện sớm, thân thiện SEO. Tiếp theo, tách state cục bộ, state toàn cục và dữ liệu server, nêu cách cache qua `Cache-Control`, CDN hoặc TanStack Query. Cuối cùng là hiệu năng: phân trang, virtual list, lazy-load component.

6. Git, live coding và bài take-home

Phần thực hành thường quyết định kết quả nhiều hơn hỏi đáp. Đề live coding hay gặp là ô tìm kiếm có debounce hoặc danh sách có lọc, phân trang. Về Git, câu quen thuộc là merge khác rebase: rebase viết lại lịch sử nên không dùng trên nhánh chung.

Bài take-home được chấm như review sản phẩm thật; README nên có cách cài đặt, quyết định kỹ thuật và phần chưa kịp làm.

7. Câu hỏi thường gặp

1. Fresher Front-end có cần biết TypeScript không? Không bắt buộc ở mọi nơi, nhưng nhiều tin tuyển dụng ghi đây là lợi thế.

2. Có nên dùng thư viện UI trong bài take-home? Có thể, nếu đề không cấm và bạn ghi lý do trong README.

3. Cần chuẩn bị portfolio thế nào? Hai đến ba dự án có demo và mã nguồn trên GitHub thường là đủ để trao đổi.

Phỏng vấn Frontend Developer chấm cách bạn hiểu trình duyệt và JavaScript nhiều hơn số thư viện bạn liệt kê. Khi luyện câu hỏi phỏng vấn frontend developer, hãy tự giải thích closure, event loop bằng đoạn code ngắn, ôn box model, flex/grid, hiệu năng, accessibility, rồi chuẩn bị một bài take-home mẫu có README rõ ràng. Hãy chọn ba câu trong bảng và thử trả lời thành tiếng ngay hôm nay.

Bài viết mang tính tham khảo; câu hỏi thực tế thay đổi theo từng doanh nghiệp, và kiến thức kỹ thuật nên được đối chiếu với tài liệu MDN Web Docs, W3C.

Minh An