Vượt qua vòng sơ tuyển, các lập trình viên sẽ phải đối diện với các câu hỏi phỏng vấn Front end nhằm đánh giá và kỹ năng để có thể đảm nhận trong các dự án. Bài viết này tổng hợp những câu hỏi phổ biến nhất, giúp bạn có thể tự tin chuẩn bị và tăng tỷ lệ trúng tuyển trong vòng phỏng vấn này. Cùng Fastlance lật dở bí kíp qua nội dung sau đây.
DOM trong HTML là gì?
Đây là câu hỏi phỏng vấn Front end phổ biến. DOM hay The Document Object Model là giao diện lập trình chuẩn, cho phép các ngôn ngữ lập trình (như JavaScript) tương tác trực tiếp với cấu trúc của một trang web. DOM đại diện cho tài liệu HTML dưới dạng một cây cấu trúc các đối tượng, từ đó mở ra khả năng điều khiển và thay đổi động các yếu tố trên trang.
Thẻ Meta là gì?
Thẻ Meta là phần mô tả ngắn gọn, sẽ hiển thị ngay bên dưới tiêu đề trang web trên trang kết quả tìm kiếm. Phần nội dung trên thẻ Meta cần ngắn gọn, hấp dẫn để thu hút người tìm kiếm thông tin click vào trang của bạn.
Phân biệt ID Selector và Class Selector trong CSS
Trong CSS, cả ID Selector và Class Selector đều được áp dụng các kiểu cho phân tử HTML. Tuy nhiên, mỗi mẫu sẽ có cách sử dụng khác nhau:
ID Selector:
- Tính duy nhất: Mỗi ID chỉ được sử một lần duy nhất cho toàn bộ tài liệu trên HTML.
- Độ uy tiên cao: ID Selector có độ ưu tiên nhất trong các loại ưu tiên.
- Cú pháp: #id_name
Class Selector:
- Tính duy nhất : Mỗi class có thể áp dụng cho nhiều phân tử khác nhau.
- Độ ưu tiên thấp hơn: So với ID Selector, Class có độ ưu tiên thấp hơn.
- Cú pháp: .class_name
Phân biệt relative, fixed, absolute và statically positioned element
Khi thực hiện một dự án về công nghệ thông tin, lập trình viên cần biết đến 4 thuộc tính quan trọng như: static, relative, absolute. Hãy tìm tìm hiểu và phân tích sự khác biệt của các thuộc tính trên để có thể đáp chuẩn khi gặp câu hỏi phỏng vấn Front end này.
Static: Vị trí mặc định, không di chuyển
- Ý nghĩa: Đây là giá trị mặc định của mọi phần tử. Khi bạn không khai báo thuộc tính position cho một phần tử nào đó, nó sẽ tự động có giá trị là static.
- Đặc điểm: Phần tử sẽ được đặt tại vị trí tự nhiên của nó trong dòng chảy nội dung và không bị ảnh hưởng bởi các thuộc tính top, bottom, left, right.
Relative: Di chuyển so với vị trí gốc
- Ý nghĩa: Khi bạn đặt position: relative cho một phần tử, bạn có thể điều chỉnh vị trí của nó so với vị trí ban đầu của nó bằng cách sử dụng các thuộc tính top, bottom, left, right.
- Đặc điểm: Phần tử vẫn giữ nguyên vị trí trong bố cục chung của trang, nhưng vị trí hiển thị của nó sẽ được dịch chuyển so với vị trí gốc.
Absolute: Định vị tuyệt đối so với một phần tử khác
- Ý nghĩa: Khi bạn đặt position: absolute cho một phần tử, bạn có thể đặt nó ở bất kỳ vị trí nào trên trang, không phụ thuộc vào vị trí ban đầu của nó.
- Đặc điểm: Phần tử sẽ được lấy ra khỏi dòng chảy nội dung và được định vị so với phần tử cha gần nhất có thuộc tính position khác static (thường là relative).
Fixed: Định vị cố định so với cửa sổ trình duyệt
- Ý nghĩa: Khi bạn đặt position: fixed cho một phần tử, phần tử đó sẽ được cố định tại một vị trí nhất định trên màn hình và sẽ không di chuyển khi bạn cuộn trang.
- Đặc điểm: Phần tử sẽ được lấy ra khỏi dòng chảy nội dung và được định vị so với cửa sổ trình duyệt.
Phân biệt Long-polling, Websockets và Server-sent Events
Long – polling, Websockets và Server-sent Events là những công nghệ giao tiếp thời gian thực giúp các ứng dụng chat, các bảng tin cập nhật liên tục hay các trò chơi trực tuyến có thể hiển thị thông tin nhanh chóng và mượt mà. Dưới đây là cách phân biệt những phương thức trên.
- Long- polling: Hình thức hoạt động của Long-polling là khi một client (ví dụ: trình duyệt) gửi yêu cầu đến server, kết nối sẽ được giữ mở cho đến khi server có dữ liệu mới để gửi trở lại hoặc đạt đến giới hạn thời gian chờ. Sau khi đã nhận được dữ liệu, client sẽ lập tức gửi một yêu cầu mới để tiếp tục chờ đợi dữ liệu tiếp theo. Điều này giúp cho hoạt động của Long-polling trở nên đơn giản nhưng lại tốn nhiều tài nguyên, độ trễ cao.
- WebSockets: WebSockets hoạt động với một kết nối duy nhất, hai chiều giữa client và server. Điều này cho phép cả hai có thể gửi và nhận bất kỳ lúc nào mà không cần phải mở nhiều kết nối. Khi đó sẽ mang lại hiệu suất cao, độ trễ thấp, phù hợp với các ứng dụng đòi hỏi giao tiếp tại thời gian thực như trò chơi trực tuyến, chat.
- Server – Sent Events (SSE): Là giải pháp đơn giản hơn WebSockets, nhưng SSE chỉ hỗ trợ 1 chiều, tức là cho phép server gửi dữ liệu đến client. SSE sử dụng một kết nối HTTP duy nhất, nhưng server có thể gửi nhiều sự kiện dữ liệu đến client mà không cần phải có yêu cầu từ client.
Cors là gì?
Câu hỏi phỏng vấn Front – end: Cors là gì? đã không còn quá xa lạ với nhiều ứng viên. Cors là từ viết tắt của Cross-Origin Resource Sharing là một cơ chế bảo mật do trình duyệt web áp đặt, cho phép các trang web từ các miền khác nhau có thể tương tác và chia sẻ dữ liệu với nhau. Điều này có nghĩa là, một trang web trên domain A có thể gửi yêu cầu đến một server khác trên domain B để lấy dữ liệu, miễn là server đó cho phép.
Hoisting là gì?
Hoisting là hành vi kéo lên mặc định của JavaScript. Khi trình duyệt độc mã JavaScript, nó sẽ thực hiện một bước sơ bộ là kéo tất cả các khai báo biến và khai báo hàm lên đầu phạm vi của chúng (phạm vi này có thể là cục bộ hoặc toàn bộ).
Phân biệt Cookies, Session Storage, Local Storage
Cookies, Session Storage, Local Storage là 3 dạng lưu trữ phổ biến nhưng nhiều ứng viên vẫn chưa thể phân biệt, và không thể ghi điểm trong vòng câu hỏi phỏng vấn Front end.
- Cookies: là những đoạn dữ liệu nhỏ được gửi từ máy chủ web đến trình duyệt của bạn và được lưu trữ trên thiết bị của bạn. Có giới hạn về kích thước và số lượng cookie của mỗi trang web. Cookie thường được sử dụng để lưu trữ thông tin cá nhân, màu sắc, ngôn ngữ, trạng thái đăng nhập, giỏ hàng, hành vi người dùng để hiển thị quảng cáo,…
- Local Storage: là một vùng bộ nhớ lớn hơn nhiều so với Cookies, cho phép lưu trữ một lượng dữ liệu đáng kể, có thể lên đến 5 MB. Thường được sử dụng để lưu trữ các dữ liệu không cần thiết gửi đến máy chủ, chẳng hạn như: cài đặt ứng dụng , lưu trữ dữ liệu tạm thời,…
- Session Storage: tương tự như Local Storage, nhưng dữ liệu chỉ được lưu trữ trong một phiên làm việc duy nhất và có kích thước giới hạn. Session Storage thường được dùng để lưu trữ các dữ liệu chỉ cần thiết trong một phiên làm việc như trạng thái của một form để người dùng có thể quay lại chỉnh sửa hoặc dữ liệu tạm thời.
Pseudo-class là gì?
Pseudo-class là một từ khóa đặc biệt được thêm vào bộ chọn CSS để xác định một trạng thái cụ thể của một phần tử HTML. Nhờ đó, chúng ta có thể áp dụng các kiểu CSS khác nhau cho cùng một phần tử, tùy thuộc vào trạng thái hiện tại của nó. Ví dụ, bạn có thể thay đổi màu sắc của một liên kết khi con trỏ chuột di chuyển qua nó.
Phân biệt giữa PUT và POST
Trong giao tiếp giữa trình duyệt và máy chủ, hai phương thức HTTP phổ biến nhất để gửi dữ liệu là PUT và POST. Mặc dù cả hai đều được sử dụng để gửi dữ liệu đến máy chủ, nhưng chúng có những mục đích và cách hoạt động khác nhau.
- PUT: Khi bạn sử dụng phương thức PUT, bạn đang yêu cầu máy chủ thay thế hoàn toàn một tài nguyên có sẵn bằng dữ liệu mới được gửi kèm theo trong yêu cầu.
- POST: Phương thức POST linh hoạt hơn, nó được sử dụng để gửi dữ liệu đến máy chủ để thực hiện một hành động nào đó, mà không nhất thiết phải liên quan đến việc thay thế một tài nguyên cụ thể.
Qua 10 câu hỏi phỏng vấn Front end kể trên, hy vọng giúp bạn có thể trang bị được những kiến thức để vượt qua những thử tháng phía trước của nhà tuyển dụng và hoàn thành phần thi tốt nhất. Nếu có thắc mắc, hãy liên hệ Fastlance để được giải đáp chi tiết nhé.
