Senior Frontend Dev (English)

Cả hai giới hạn số lần một hàm chạy khi sự kiện bắn liên tục.

• Debounce: chỉ chạy sau khi sự kiện ngừng một khoảng thời gian. Hợp với ô tìm kiếm gợi ý (gõ xong mới gọi API), validate form, resize xong mới tính lại layout.
• Throttle: chạy tối đa một lần mỗi khoảng thời gian. Hợp với scroll, kéo thả, theo dõi vị trí chuột.

function debounce(fn, ms) {
  let timer;
  return (...args) => {
    clearTimeout(timer);
    timer = setTimeout(() => fn(...args), ms);
  };
}

Hay sai: tạo hàm debounce mới mỗi lần render (trong React), khiến timer bị reset liên tục và debounce không có tác dụng. Với ô tìm kiếm, nhớ huỷ request cũ (AbortController) để kết quả cũ không đè kết quả mới.

Generics giúp viết hàm và kiểu dùng lại được mà vẫn giữ thông tin kiểu, thay vì rơi về any.

type Result<T> =
  | { ok: true; data: T }
  | { ok: false; error: string };

function show(r: Result<User>) {
  if (r.ok) return r.data.name; // TS biết có data
  return r.error;
}

• Field chung (ok, type, status) giúp TypeScript thu hẹp kiểu trong if/switch. Đây là cách mô hình hoá trạng thái không thể sai: không có chuyện vừa có data vừa có error.
• Ràng buộc generic: <T extends { id: string }>.
• Utility types hay dùng: Partial, Pick, Omit, Record, ReturnType, Awaited.
• Type guard tự viết: function isUser(x: unknown): x is User.

Người phỏng vấn muốn nghe: bạn dùng kiểu để làm trạng thái sai không biểu diễn được, chứ không chỉ để chú thích.

Memory leak ở frontend thường do thứ gì đó vẫn giữ tham chiếu đến object đáng lẽ đã bỏ đi, nhất là trong SPA vì trang không bao giờ tải lại.

Nguyên nhân hay gặp:

• addEventListener trên window/document mà không gỡ khi component bị huỷ.
• setInterval, subscription (WebSocket, store) không huỷ.
• DOM đã bị gỡ khỏi trang nhưng vẫn được biến JS giữ lại (detached DOM).
• Cache hoặc mảng toàn cục chỉ tăng không giảm.

Cách điều tra với Chrome DevTools:

1. Tab Memory: chụp heap snapshot, thực hiện thao tác vài lần, chụp lại, so sánh phần tăng thêm.
2. Lọc "Detached" để tìm DOM bị giữ, xem chuỗi retainers để biết ai đang giữ.
3. Tab Performance bật Memory để xem heap có giảm sau GC không.

Người phỏng vấn muốn nghe: mỗi tài nguyên đăng ký đều có chỗ huỷ tương ứng (cleanup của effect, ngOnDestroy, onUnmounted, AbortController).

asyncio chạy nhiều coroutine trên một thread. Khi coroutine gặp await một thao tác I/O, nó nhường quyền cho event loop chạy coroutine khác. Đây là đa nhiệm hợp tác: coroutine nào không await thì chiếm luôn cả loop.

Trong FastAPI:

• async def khi mọi thứ bên trong đều async (httpx.AsyncClient, driver DB async).
• def khi dùng thư viện blocking (requests, ORM đồng bộ). FastAPI sẽ chạy hàm này trong threadpool, nên không chặn loop.
• Gọi song song: await asyncio.gather(fetch_a(), fetch_b()).

Hay sai: viết async def rồi gọi requests.get() hoặc time.sleep() bên trong. Cả server đứng hình trong lúc chờ. Nếu buộc phải gọi code blocking, dùng await asyncio.to_thread(func).

Người phỏng vấn muốn nghe: async tăng khả năng xử lý đồng thời cho I/O, không làm code CPU nhanh hơn.

CPython dùng reference counting: object bị giải phóng ngay khi số tham chiếu về 0. Bộ thu gom gc chạy thêm để dọn các vòng tham chiếu (A trỏ B, B trỏ A).

Nguyên nhân leak hay gặp:

• Cache toàn cục (dict, lru_cache không giới hạn) chỉ thêm không xoá.
• Biến ở module hoặc class tích luỹ dữ liệu qua các request.
• Đọc cả file hay cả queryset lớn vào bộ nhớ thay vì xử lý theo lô.
• Extension C giữ bộ nhớ ngoài tầm GC.

Cách điều tra:

• tracemalloc: chụp snapshot hai thời điểm rồi so sánh dòng code cấp phát nhiều nhất.
• Theo dõi RSS theo thời gian, thử tái hiện với một loại request.
• Giải pháp tạm: cấu hình worker tự khởi động lại sau N request (Gunicorn max_requests, Celery max_tasks_per_child).

Người phỏng vấn muốn nghe: bạn đo trước khi đoán, và biết giải pháp tạm không thay cho việc tìm nguyên nhân.

Đo trước: React DevTools Profiler (bật "Highlight updates" và xem component nào render nhiều, tốn bao lâu) và tab Performance của Chrome để tìm long task.

Các hướng xử lý thường gặp:

• Giảm phạm vi render: đưa state xuống gần nơi dùng; tách component; memo các hàng của bảng với props ổn định.
• Virtualization cho list hoặc bảng dài: chỉ render các dòng đang hiện (TanStack Virtual, react-window).
• Ưu tiên cập nhật: useDeferredValue hoặc useTransition để ô input phản hồi ngay, còn việc lọc bảng chạy sau và có thể bị ngắt.
• Tính toán nặng: useMemo, hoặc chuyển sang Web Worker.
• Bundle lớn: lazy() và Suspense để tách code theo route hoặc theo modal.

Người phỏng vấn muốn nghe: bạn tìm ra nguyên nhân cụ thể (render thừa, DOM quá nhiều, JS nặng) rồi mới chọn kỹ thuật, không rải useMemo khắp nơi.

Ba chỉ số chính đo trải nghiệm thật của người dùng:

• LCP (Largest Contentful Paint): thời gian hiện phần tử lớn nhất. Cải thiện: tối ưu ảnh (định dạng hiện đại, đúng kích thước, ưu tiên tải ảnh hero), giảm thời gian phản hồi server, cache/CDN, render phía server.
• INP (Interaction to Next Paint, thay FID từ 2024): độ trễ khi tương tác. Cải thiện: chia nhỏ tác vụ JS dài, giảm JS chạy trên main thread, tránh render lại quá nhiều.
• CLS (Cumulative Layout Shift): độ xô lệch bố cục. Cải thiện: khai báo kích thước cho ảnh, video, quảng cáo; tránh chèn nội dung đẩy trang xuống; xử lý font.

Ngoài ra: code splitting và lazy load theo route, bỏ thư viện nặng không cần, nén và cache tài nguyên tĩnh.

Người phỏng vấn muốn nghe: bạn đo bằng dữ liệu người dùng thật (field data) lẫn Lighthouse, và biết điểm Lighthouse không phải là mục tiêu cuối.

• XSS: kẻ tấn công chèn script chạy trên trang của bạn. Phòng: framework tự escape khi render; tránh innerHTML, v-html, dangerouslySetInnerHTML với dữ liệu người dùng (nếu bắt buộc thì sanitize); cấu hình Content-Security-Policy.
• CSRF: trang lạ khiến trình duyệt gửi request kèm cookie của người dùng. Phòng: cookie SameSite=Lax hoặc Strict, CSRF token, kiểm tra Origin.
• CORS: là cơ chế trình duyệt nới lỏng same-origin policy, do server cấu hình. Nó không phải lớp bảo vệ API khỏi người gọi ngoài trình duyệt.

Lưu token:

• localStorage tiện nhưng script XSS nào cũng đọc được.
• Cookie HttpOnly + Secure + SameSite thì JS không đọc được, nhưng phải tính đến CSRF.

Người phỏng vấn muốn nghe: không có chỗ lưu nào an toàn tuyệt đối; chặn XSS mới là việc quan trọng nhất, vì có XSS thì mọi cách lưu đều bị lợi dụng.

"I'd say my greatest strength is ownership. When I take on a task, I make sure it works end to end, not just that the code is merged. For example, after releasing a new feature, I usually check the logs and metrics for the first few days. Last year this helped me catch a data issue early, before it affected many users."

Mẹo: một điểm mạnh kèm một ví dụ ngắn là đủ. Các từ hay dùng: "ownership", "attention to detail", "problem-solving", "fast learner". Nói "I'd say…" nghe tự nhiên hơn "My strong point is…".

Dùng STAR: Situation (bối cảnh), Task (nhiệm vụ), Action (bạn làm gì), Result (kết quả). Phần Action nên chiếm nhiều nhất.

Câu mẫu:

• S: "Lead muốn dùng một thư viện mới cho module báo cáo, em thấy thư viện đó còn ít người dùng và lo về bảo trì."
• T: "Em cần nêu rủi ro mà không làm chậm tiến độ."
• A: "Em gặp riêng anh, đưa so sánh hai phương án và đề xuất làm thử một bản nhỏ trong hai ngày để đánh giá."
• R: "Kết quả thử cho thấy thư viện cũ đáp ứng đủ, anh đồng ý giữ lại. Từ đó team có thói quen làm bản thử trước khi đổi công nghệ."

Người phỏng vấn muốn nghe: bạn tranh luận bằng dữ liệu, tôn trọng người khác, và chấp nhận quyết định cuối cùng kể cả khi không theo ý mình.