Câu hỏi & gợi ý trả lời
Q1. Box Model trong CSS là gì và nó bao gồm những thành phần nào?
Box Model là khung bao quanh mỗi phần tử HTML, bao gồm: Content, Padding, Border và Margin. Việc hiểu Box Model giúp bạn kiểm soát chính xác kích thước và khoảng cách hiển thị của layout, đặc biệt là sự khác biệt khi dùng 'box-sizing: border-box' (tính cả padding/border vào width) so với 'content-box' mặc định.
Q2. CSS Specificity là gì? Các selector được ưu tiên như thế nào?
Specificity là độ ưu tiên (trọng số) mà trình duyệt dùng để quyết định style nào sẽ được áp dụng nếu có sự trùng lặp. Độ ưu tiên giảm dần theo thứ tự: Inline styles > ID selectors > Class/Attribute/Pseudo-class selectors (như .class, [type='text'], :hover) > Element (tag) selectors.
Q3. Khác biệt giữa 'position: relative', 'absolute', 'fixed' và 'sticky'?
Relative giữ đối tượng ở vị trí tự nhiên; Absolute đặt đối tượng dựa theo tổ tiên gần nhất có position khác 'static'; Fixed cố định trên màn hình kể cả khi cuộn; Sticky giúp phần tử giữ vị trí cố định khi cuộn đến một ngưỡng (threshold) nhất định.
Q4. Event Bubbling và Event Capturing khác nhau như thế nào?
Đây là hai giai đoạn lan truyền sự kiện. Capturing là sự kiện đi từ gốc (document/window) xuống phần tử mục tiêu; Bubbling là ngược lại, từ phần tử mục tiêu trồi lên các phần tử cha. Mặc định các trình duyệt dùng Bubbling; bạn có thể dùng 'event.stopPropagation()' để ngăn chặn sự lan truyền này.
Q5. Closures trong JavaScript là gì?
Closure là khái niệm một hàm 'nhớ' được phạm vi (scope) nơi nó được định nghĩa, ngay cả khi nó được thực thi bên ngoài phạm vi đó. Nó cho phép hàm truy cập các biến của phạm vi cha, giúp tạo ra các biến private hoặc factory functions hiệu quả.
Q6. Sự khác biệt giữa 'var', 'let' và 'const'?
Var có phạm vi là function, bị hoisting và có thể bị re-declare. Let và Const có phạm vi block (chỉ trong dấu {}), không bị hoisting khởi tạo (nằm trong Temporal Dead Zone), giúp code an toàn và tường minh hơn; Const không cho phép gán lại giá trị.
Q7. 'Hoisting' trong JavaScript hoạt động ra sao?
Hoisting là cơ chế JS đưa các khai báo (declaration) lên đầu phạm vi thực thi trước khi mã chạy. Với 'var', biến được hoisted và khởi tạo là 'undefined'. Với 'let'/'const', chúng cũng được hoisted nhưng không được khởi tạo, dẫn đến lỗi ReferenceError nếu truy cập trước khi khai báo.
Q8. Sự khác biệt giữa '===' và '=='?
== (loose equality) thực hiện ép kiểu (type coercion) trước khi so sánh, dễ gây lỗi logic. === (strict equality) so sánh cả giá trị và kiểu dữ liệu (data type), đảm bảo tính chính xác và an toàn. Luôn khuyến khích dùng === trong lập trình hiện đại.
Q9. CORS là gì? Tại sao phải cần đến nó?
CORS (Cross-Origin Resource Sharing) là cơ chế bảo mật của trình duyệt, ngăn chặn các yêu cầu HTTP gửi đến một domain khác với domain hiện tại (Same-Origin Policy). Nếu server không phản hồi đúng headers cho phép (như Access-Control-Allow-Origin), trình duyệt sẽ chặn phản hồi để bảo vệ dữ liệu người dùng.
Q10. So sánh Promise và Async/Await?
Cả hai đều xử lý bất đồng bộ. Promise dùng chuỗi '.then().catch()' dễ gây callback hell nếu lồng nhau nhiều. Async/Await là cú pháp đẹp hơn (syntactic sugar) trên Promise, giúp viết code bất đồng bộ trông giống tuần tự (synchronous), dễ đọc và debug hơn.
Q11. Local Storage, Session Storage và Cookies khác nhau thế nào?
Local Storage lưu trữ dữ liệu vĩnh viễn (cho đến khi xóa thủ công); Session Storage chỉ lưu trong phiên làm việc của tab; cả hai không được gửi lên server. Cookies có kích thước nhỏ (~4KB), luôn được gửi lên server trong mỗi request và có thời hạn hết hiệu lực cụ thể.
Q12. Virtual DOM trong các framework như React hoạt động như thế nào?
Virtual DOM là bản sao nhẹ (lightweight object) của real DOM. Khi state thay đổi, framework so sánh Virtual DOM cũ và mới (diffing process), sau đó chỉ cập nhật những phần thực sự thay đổi lên real DOM thực tế, giúp tối ưu hiệu năng và render nhanh hơn.
Q13. Thế nào là Prototypal Inheritance?
JS sử dụng cơ chế kế thừa nguyên mẫu (prototype). Mỗi object khi tạo ra có một liên kết nội bộ đến một object khác gọi là Prototype. Nếu một thuộc tính/phương thức không tìm thấy trên object đó, JS sẽ lục tìm trong Prototype của nó, cứ thế tạo thành chuỗi Prototype Chain.
Q14. Arrow Function khác gì Regular Function?
Arrow function gọn hơn và quan trọng nhất là không có 'this' riêng; nó kế thừa 'this' từ phạm vi bao quanh (lexical scope). Điều này loại bỏ các lỗi sai context gây ra do 'this' bị thay đổi khi gọi callback hoặc sự kiện.
Q15. Tại sao phải tối ưu Critical Rendering Path?
Critical Rendering Path là các bước trình duyệt thực hiện để chuyển đổi HTML/CSS/JS thành pixels trên màn hình. Tối ưu quá trình này (ví dụ: gộp file, lazy loading, defer script) giúp giảm thời gian First Contentful Paint, cải thiện trải nghiệm người dùng ngay từ lúc trang bắt đầu tải.