Câu hỏi & gợi ý trả lời
Q1. HTML semantic tags là gì và tại sao nên dùng?
Semantic tags (như <header>, <article>, <footer>) là các thẻ phản ánh rõ ý nghĩa nội dung bên trong thay vì chỉ định hình thức hiển thị. Chúng giúp cải thiện SEO, tăng tính accessibility cho trình đọc màn hình và giúp code dễ bảo trì hơn.
Q2. CSS Box Model hoạt động như thế nào?
Box Model gồm 4 lớp từ trong ra ngoài: Content, Padding, Border và Margin. Theo chuẩn W3C, width/height chỉ tính cho Content, nhưng với 'box-sizing: border-box', width/height đã bao gồm cả padding và border, giúp tính toán layout trực quan hơn.
Q3. Phân biệt CSS Flexbox và CSS Grid?
Flexbox là mô hình bố cục 1 chiều (xử lý hàng hoặc cột độc lập), tối ưu cho component nhỏ hoặc căn chỉnh. Grid là mô hình 2 chiều (xử lý cả hàng và cột đồng thời), thích hợp cho việc xây dựng bố cục tổng thể của trang web.
Q4. Độ đặc thù (Specificity) trong CSS được tính như thế nào?
Specificity quyết định quy tắc CSS nào được ưu tiên áp dụng. Thứ tự ưu tiên từ cao xuống thấp: Inline styles > IDs (#id) > Classes, Attributes, Pseudo-classes (.class, :hover) > Elements, Pseudo-elements (div, p).
Q5. Hoisting trong JavaScript là gì?
Hoisting là cơ chế JS dịch chuyển các khai báo biến (với var) và hàm (function declaration) lên đầu scope của chúng trước khi thực thi. Biến khai báo bằng let/const cũng bị hoist nhưng nằm trong Temporal Dead Zone (TDZ) nên không thể truy cập trước khi khởi tạo.
Q6. Closure trong JavaScript là gì? Nêu ứng dụng thực tế.
Closure là hàm ghi nhớ và truy cập được các biến trong lexical scope của nó ngay cả khi hàm đó chạy bên ngoài scope ban đầu. Ứng dụng phổ biến là tạo private variables (đóng gói dữ liệu) hoặc trong currying và factory functions.
Q7. Event Delegation là gì và lợi ích mang lại?
Event Delegation là kỹ thuật gắn một event listener duy nhất lên phần tử cha để quản lý sự kiện cho các phần tử con dựa trên cơ chế Event Bubbling. Giúp tiết kiệm bộ nhớ và tự động áp dụng cho các phần tử con được thêm động vào DOM.
Q8. Phân biệt toán tử '==' và '===' trong JavaScript?
'==' (loose equality) thực hiện ép kiểu dữ liệu (type coercion) trước khi so sánh, dễ dẫn đến kết quả bất ngờ. '===' (strict equality) so sánh cả giá trị lẫn kiểu dữ liệu mà không ép kiểu, đảm bảo an toàn và nên được ưu tiên sử dụng.
Q9. Phân biệt Promise và Async/Await?
Async/await thực chất là syntactic sugar được xây dựng trên Promise, giúp viết code bất đồng bộ trông giống như đồng bộ. Giúp tránh callback hell, dễ đọc và dễ xử lý ngoại lệ bằng khối try/catch chuẩn mực hơn.
Q10. CORS (Cross-Origin Resource Sharing) là gì?
CORS là cơ chế bảo mật của trình duyệt cho phép hoặc giới hạn việc tài nguyên trên web được yêu cầu từ một domain khác domain gốc. Cơ chế này hoạt động dựa trên các HTTP headers do server phản hồi (như Access-Control-Allow-Origin).
Q11. Phân biệt DOM thật và Virtual DOM?
DOM thật là cây cấu trúc đại diện cho toàn bộ trang web; mỗi thay đổi nhỏ kích hoạt reflow/repaint tốn chi phí hiệu năng. Virtual DOM là bản sao lightweight trong bộ nhớ; thư viện thực hiện diffing để cập nhật tối ưu hóa lên DOM thật.
Q12. Memory leak trong JS là gì và cách phòng tránh?
Memory leak xảy ra khi ứng dụng giữ lại các tham chiếu đến đối tượng không còn dùng đến, khiến garbage collector không thể giải phóng bộ nhớ. Phòng tránh bằng cách gỡ event listeners, clear timers (setInterval) và dọn dẹp tài nguyên trong cleanup hooks khi component unmount.