Frontend Interview (v)

Cấp độ người mới bắt đầu

Sự khác biệt giữa `id` và `class` trong HTML/CSS?

Một id là một định danh duy nhất cho một phần tử HTML. Một class là một định danh có thể được tái sử dụng và áp dụng cho nhiều phần tử.

ID vs Class trong HTML

Bạn nên sử dụng id khi cần xác định một phần tử duy nhất thông qua CSS hoặc JavaScript. Sử dụng class khi cần xác định một nhóm các phần tử DOM.

Trong CSS:

#id { /* chọn một phần tử cụ thể với id đó */ }
.class { /* chọn tất cả các phần tử có class đó */ }

Bạn có thể giải thích mô hình hộp (box model) trong CSS không?

Mô hình hộp trong CSS mô tả các hộp hình chữ nhật được tạo ra cho các phần tử trong DOM. Mô hình hộp bao gồm các lớp sau:

Nội dung (Content): Phần bên trong cùng, nơi xuất hiện văn bản và hình ảnh.
Lề trong (Padding): Khoảng cách giữa nội dung và đường viền.
Đường viền (Border): Bao quanh phần tử.
Lề ngoài (Margin): Khoảng cách bên ngoài đường viền, tách phần tử với phần tử khác.

Bằng cách kiểm soát từng lớp riêng lẻ, bạn có thể xác định giao diện của mỗi phần tử trong giao diện người dùng.

Sự khác biệt giữa `inline`, `inline-block` và `block` trong CSS?

Inline: Không có chiều rộng hoặc chiều cao, không bắt đầu trên một dòng mới và chỉ chiếm không gian cần thiết.
- Ví dụ: <span>, <a>.
Inline-block: Giống như inline, nhưng có thể đặt chiều rộng và chiều cao.
- Ví dụ: <img>.
Block: Bắt đầu trên một dòng mới và mặc định chiếm toàn bộ chiều rộng có sẵn.
- Ví dụ: <div>, <p>.

Một số thực hành tốt nhất về SEO khi cấu trúc tài liệu HTML?

Về HTML:

Sử dụng HTML có nghĩa (Semantic HTML): <header>, <nav>, <article>, <section>, <footer>.
Cấu trúc tiêu đề hợp lý: <h1> chỉ dùng một lần trên mỗi trang, sau đó là <h2>, <h3>,...
Thẻ meta: Bao gồm các thẻ <meta> quan trọng như mô tả, từ khóa, viewport.
Thuộc tính alt cho hình ảnh: Giúp cải thiện khả năng tiếp cận và SEO.

Ngoài ra:

Liên kết nội bộ: Giúp công cụ tìm kiếm thu thập dữ liệu và hiểu cấu trúc trang.
Thiết kế thân thiện với di động: Đảm bảo trang web phản hồi tốt trên thiết bị di động.
Tối ưu tốc độ tải trang: Tối ưu hóa hình ảnh, mã và bộ nhớ đệm.

Document Object Model (DOM) là gì?

DOM là một API đại diện cho cấu trúc của một trang HTML như một cây nút (node tree), trong đó mỗi nút đại diện cho một phần của tài liệu (thẻ HTML, thuộc tính hoặc văn bản).

Cấp độ trung cấp

Sự khác biệt giữa đơn vị `em` và `rem` trong CSS?

em phụ thuộc vào kích thước phông chữ của phần tử cha.
rem phụ thuộc vào kích thước phông chữ của phần tử gốc (<html>).

Làm thế nào để tạo bố cục Flexbox?

Đặt display: flex trên phần tử cha.
Định nghĩa thuộc tính flex cho các phần tử con (flex: 1).

Bạn có thể giải thích về tính đặc hiệu (specificity) trong CSS không?

CSS sử dụng tính đặc hiệu để xác định quy tắc nào được áp dụng khi có xung đột:

Kiểu nội tuyến (inline styles) có độ ưu tiên cao nhất.
ID selectors (#id) ưu tiên hơn class.
Class selectors (.class) ưu tiên hơn kiểu thẻ (p, div).
Kiểu thẻ (type selectors) có độ ưu tiên thấp nhất.

Đóng (Closures) trong JavaScript là gì?

Khi một hàm được định nghĩa bên trong một hàm khác, nó có thể truy cập các biến của hàm bên ngoài ngay cả khi hàm đó đã kết thúc. Đây được gọi là closure.

Closures hữu ích để tạo các biến riêng tư hoặc lưu trạng thái trong các ứng dụng JavaScript.

Cấp độ nâng cao

Biến CSS là gì, và khi nào nên sử dụng?

Biến CSS (--variable-name) giúp lưu trữ và tái sử dụng giá trị trên toàn bộ tệp CSS, giúp dễ dàng quản lý và thay đổi giao diện của trang web.

:root {
  --main-color: #3498db;
}
body {
  color: var(--main-color);
}

SSR (Server-Side Rendering) là gì, và khi nào nên sử dụng?

SSR là kỹ thuật render HTML trên máy chủ thay vì trình duyệt. Điều này hữu ích khi cần:

Trang web nội dung lớn: Tin tức, blog.
Ứng dụng SEO quan trọng.
Hiệu suất cao hơn trên lần tải đầu tiên.

Tree Shaking là gì và giúp cải thiện hiệu suất như thế nào?

Tree Shaking là kỹ thuật loại bỏ mã JavaScript không sử dụng trong quá trình bundle, giúp giảm kích thước file và tăng tốc tải trang.