Câu hỏi phỏng vấn dành cho lập trình viên Front-end

Lập trình viên Front-end là người sử dụng các ngôn ngữ HTML, CSS hay ngôn ngữ Javascript để thiết kế ra các giao diện ứng dụng hoặc trang web cho người dùng. Đây cũng là hướng đi khá phổ biến của nhiều bạn trẻ IT hiện nay. 

Và nếu bạn là lập trình viên Front-end và đang chuẩn bị cho một buổi phỏng vấn, bạn có thể tham khảo bộ câu hỏi dưới đây để giúp mình bình tĩnh và tự tin hơn trước nhà tuyển dụng nhé!

Câu hỏi phỏng vấn dành cho Fresher Front-end

Định nghĩa HTML meta tags

• Meta tags được chuyển đổi dưới dạng cặp name/value
• Meta tags có thể bao gồm dữ liệu về encode, tiêu đề, mô tả,…
• Meta tags phù hợp với thẻ ở đầu trang HTML
• Meta tags không được hiển thị trên trang nhưng sẽ được hiển thị trên trình duyệt.

Khác nhau giữa div và span

DIV	SPAN
Nó được sử dụng để tách các element là block-line, line break before  và after	Thẻ <span> được sử dụng để nhóm các inline elements trong tài liệu HTML
Nó chứa global attribute cho các element bên trong tài liệu HTML	Nó bao gồm certain, global và event attributes
Đôi khi thẻ <p> được sử dụng bên trong thẻ <div>	Trong một đoạn, thẻ <span> được sử dụng trong CSS style cho một số từ nhất định với phông chữ đã chọn.
Trong thẻ div, đường viền với chiều rộng, chiều cao và các màu pixel được chỉ định để nhấn mạnh front end document	Trong thẻ span, chúng ta sử dụng các màu đã được chỉ định được sử dụng để mô tả Front-end document.

React JS là gì?

ReactJS là một thư viện JavaScript Front-end mã nguồn mở. ReactJS được sử dụng chủ yếu để xây dựng giao diện người dùng, đặc biệt là cho one-page applications. Ngoài ra, nó còn cho phép xử lý layer cho web và ứng dụng mobile. React cho phép các lập trình viên xây dựng các ứng dụng web lớn, có thể sửa đổi dữ liệu mà không cần tải lại trang. 

Ưu điểm của React là nhanh chóng, có thể mở rộng và dễ dàng sử dụng. Nó chỉ hoạt động trên các user interfaces trong ứng dụng và tương ứng với view MVC template. Nó có thể được sử dụng với sự kết hợp của các frameworks hoặc thư viện JavaScript khác, như AngularJS trong MVC.

>>> Tham khảo: Khoá học Reactjs online với các dự án thực hành chất lượng (mellori.vn)

Mô tả những ưu điểm của REST web services

Những ưu điểm của REST web services là:

• Learning curve rất đơn giản vì nó hoạt động trên giao thức HTTP
• Không có contract rõ ràng giữa server và client
• REST có thể được kiểm tra dễ dàng trên trình duyệt.
• Hỗ trợ nhiều công nghệ để chuyển giao  như image, JSON, XML, text,…
• Nó là một protocol nhẹ

Browser hiển thị giao diện người dùng (UI) như thế nào?

Nhiệm vụ chính của rendering engine là highlight trang được yêu cầu trên màn hình của trình duyệt. Rendering engine có thể hiển thị hình ảnh và tài liệu XML, HTML. Nếu bạn đang sử dụng các plugins bổ sung, engine cũng có thể hiển thị các tài liệu khác nhau như PDF. 

• Nhận requested document: Nội dung của requested document được rendering engine lấy từ HTML’s networking layer.
• Xây dựng DOM tree: Phiên dịch HTML thành parsed tree và thiết lập DOM tree
• Xây dựng CSSOM (CSS Object Model): Đăng cấu trúc của DOM tree, nó xác định một link tag trong head section, tham chiếu style sheet kiểu external style.css CSS. Sau đó, nó phân tích tệp CSS trong CSSOM tree, thứ mà browser có thể hiểu là DOM tree
• Xây dựng Render tree: Sử dụng HTML DOM tree cùng với styling data của CSSOM tree để thiết lập render tree. Render tree là graphical depiction của HTML với corresponding CSS, nó cho phép vẽ nội dung theo đúng thứ tự. Mọi node trong Render Tree được coi là một renderer. Render tree sẽ như sau:
  • Layout: Khi renderer được phát triển và tích hợp vào cây đó, nó không có kích thước hoặc vị trí. Layout là quá trình tính toán các giá trị này. Chẳng hạn, root renderer được đặt ở vị trí 0,0. Để tính toán thông tin hình học cho từng renderer yêu cầu nó, bố cục sẽ di chuyển recursive qua một phần của hệ thống phân cấp hoàn chỉnh của render. Khi bắt đầu quá trình bố trí cần phải cung cấp cho mỗi node tọa độ chính xác của nó để biết vị trí xuất hiện trên màn hình.
  • Vẽ Render Tree: Render Tree được duyệt qua trong stage này và phương thức paint() được cho là hiển thị nội dung trên màn hình. Để tốt cho UX, công cụ render sẽ cố gắng hiển thị các mục trên màn hình nhanh nhất có thể. Nó sẽ không dừng lại cho đến khi tất cả HTML được parsed để phát triển và bố trí render tree.

Grid system trong CSS là gì?

Grid System là một hệ thống lưới, bao gồm nhiều dòng và nhiều cột, số lượng dòng bao nhiêu tùy thuộc vào thiết kế của bạn nhưng số lượng cột trên mỗi dòng luôn luôn là 12. Kích thước trong Grid System tính bằng cột, mỗi cột này sẽ chiếm một % nhất định kích thước của layout.

Giải thích về user-centered design

User Centered Design (UCD) là một quá trình thiết kế và quản lý lấy người dùng làm trung tâm. Khi đó, họ sẽ đặt mình vào vị trí người dùng, sử dụng các phương pháp phân tích, thống kê, lập kế hoạch, đánh giá dữ liệu để phác thảo lên một mô hình thiết kế và giải quyết cho các vấn đề liên quan đến quan điểm của người dùng. 

ClickJacking là gì?

Clickjacking là một hình thức tấn công đánh lừa người dùng nhấp chuột vô ý vào một đối tượng trên website. Khi nhấp chuột vào một đối tượng trên màn hình, người dùng nghĩ là mình đang click vào đối tượng đó nhưng thực chất họ đang bị lừa click vào một đối tượng khác đã bị làm mờ hay ẩn đi. 

Kẻ tấn công có thể sử dụng kỹ thuật tấn công này cho nhiều mục đích như đánh cắp tài khoản người dùng, lừa click vào quảng cáo để kiếm tiền, lừa like page hoặc nguy hiểm hơn là cài một webshell lên máy chủ web.

Khi nào và tại sao nên dùng Webpack

Khi tạo một ứng dụng giao diện người dùng phức tạp với hàng tá các “tài sản” non-code static như CSS, fonts, images,… thì dĩ nhiên bạn nên sử dụng Webpack bởi vì nó rất hữu ích.

Nếu bạn có một ứng dụng nhỏ không có quá nhiều static resources và bạn chỉ phải tạo một file JavaScript để hỗ trợ khách hàng, thì Webpack sẽ không cần thiết bởi nó tốn nhiều chi phí.

Nêu 3 cách để giảm thời gian load trang

Có rất nhiều yếu tố ảnh hưởng đến thời gian load trang nhưng dưới đây là 3 cách tốt nhất để tối ưu:

• Tối ưu hình ảnh: Nên upload lên page những hình ảnh, video có đúng tỷ lệ và kích thước
• Browser Cache: Sử dụng cache để tăng tốc độ cho các trang mà bạn đã truy cập.
• Tối ưu hoá và nén nội dung: Nén nội dung của trang web giúp giảm đáng kể thời gian tải của trang.
• StyleSheet Reference ở trên cùng: Thiết lập StyleSheet Reference ở header của tài liệu cho phép trang load nhanh hơn

Tại sao “data – the attribute” trong HTML không còn được sử dụng phổ biến nữa?

Data-* attributes của HTML được sử dụng để lưu trữ dữ liệu tùy chỉnh, dữ liệu riêng tư đối với ứng dụng web hoặc trang. Những dữ liệu tùy chỉnh này được sử dùng để cá nhân hóa JavaScript của người dùng theo hành động của họ trên trang web.

Tuy nhiên, ngày nay nó không được sử dụng phổ biến nữa vì người dùng có thể thay đổi attribute một cách dễ dàng chỉ bằng cách sử dụng bảng điều khiển kiểm tra trình duyệt.

Kể những điểm mạnh của CoffeeScript mà JavaScript không có?

• Viết ít làm nhiều
• Dễ hiểu bởi nó là các syntax đơn giản
• Là ngôn ngữ lập trình an toàn và đáng tin cậy
• Có thể đọc và bảo trì
• Kế thừa Class-based
• Không có từ khóa var
• Tránh các ký hiệu có vấn đề bởi nó không yêu cầu sử dụng dấu ngoặc đơn và dấu chấm phẩy
• Hỗ trợ thư viện phong phú

Câu hỏi phỏng vấn dành cho Front-end đã có kinh nghiệm

Stringify là gì?

stringify() là một hàm kinh điển trong Javascript để chuyển một Object sang JSON. Có rất nhiều thư viện sử dụng JSON. stringify() như res. json() trong Express, post() trong Axios và cả Webpack stats.

Nêu các element của CSS Box Model

CSS Box Model gồm các yếu tố

• Content – Hiển thị nội dung chính và văn bản của trang web.
• Padding – Phần bao quanh nội dung
• Border – Lớp bên ngoài của padding
• Margin – Khu vực bên ngoài Border

Progressive Rendering là gì?

Progressive rendering là kỹ thuật render hình ảnh dần dần. Ban đầu, hình sẽ nhiễu với độ phân giải thấp, sau khi quá trình render diễn ra, mỗi pixel trong hình sẽ được thêm nhiều sampler để tinh chỉnh chất lượng cuối cùng.

Trong một image tag, lợi ích của thuộc tính srcset là gì?

srcset được sử dụng khi bạn muốn tạo một số độ phân giải của hình ảnh chính xác trên vài thiết bị. Để cải thiện UI, trình duyệt sẽ hiển thị độ phân giải thấp trên các thiết bị cấp thấp và độ phân giải cao của hình ảnh trên các thiết bị cao cấp.

Khác nhau giữa MySQL và MongoDB là gì?

• MySQL: là Hệ thống quản lý cơ sở dữ liệu quan hệ (RDBMS), sử dụng SQL làm ngôn ngữ tiêu chuẩn để xử lý cơ sở dữ liệu của nó, sử dụng cấu trúc dạng bảng để lưu trữ dữ liệu.
• MongoDB: là một cơ sở dữ liệu NoSQL sử dụng cấu trúc giống như JSON để sắp xếp các phần tử dữ liệu. Để sửa đổi và truy cập dữ liệu trong MongoDB, lập trình viên phải sử dụng Ngôn ngữ truy vấn MongoDB (MQL).

Anonymous function trong JS là gì?

Hàm ẩn danh (Anonymous Function) trong JavaScript là các hàm không có tên. Nó có thể được sử dụng như một đối số cho các hàm khác hoặc như một hàm tự thực thi ngay lập tức.

Đề xuất một số cách về cách khắc phục sự cố browser-specific styling?

Để khắc phục sự cố về browser-specific styling, bạn có thể thực hiện các cách sau:

• Tạo stylesheet cho các biến trình duyệt khác nhau bằng cách sử dụng server-side rendering.
• Sử dụng thư viện để có sẵn code để quản lý về browser-specific styling như bootstrap
• Reset hoặc Normalize CSS

Bạn biết gì về CSS image sprites?

CSS image sprites là một phương thức dùng để gộp nhiều ảnh nền cần sử dụng vào một file hình duy nhất, thường sử dụng thuộc tính background-position để xác định vị trí thành phần ảnh nền cần sử dụng.

Những khó khăn khi sử dụng CSS Preprocessor?

• Cần phải có công cụ hỗ trợ preprocessor
• File preprocessor không thể được thực hiện trực tiếp trên trình duyệt.
• Re-compilation của preprocessor chậm
• Cần phải học thêm các công cụ bổ sung

Khác nhau giữa attribute và property

Attributes là một element của HTML trong khi các properties là một phần của Document Object Model (DOM).

Value và type là các Attributes của HTML nhưng khi statement được trình duyệt đọc và parses đoạn code này, nó sẽ tạo một DOM với properties như accept, autofocus, accessKey, baseURI, checked, childElementCount, align, alt, childNodes, children, classList, className, attributes, and clientHeight.

Đề xuất những cách nào để tối ưu trang font-end

• Tăng cường phản hồi của máy chủ
• Sử dụng JavaScript và External CSS thay vì nội bộ hoặc nội tuyến
• Sử dụng framework để đảm bảo giao diện người dùng phản ứng nhanh hơn với các thiết bị khác nhau.
• Sử dụng các thư viện mã nguồn mở để quản lý vấn đề về browser-specific styling
• Sử dụng progressive loading như Lazy Loading để nâng cao khả năng hiển thị  của các element nặng như video, hình ảnh
• Kết nối style sheet ở header và script ở đầu body tag của HTML
• Sử dụng bộ nhớ trình duyệt để giữ dữ liệu riêng tư của người dùng.

Khác nhau giữa == và ===

• Toán tử == là so sánh trừu tượng (abstract equality), nó thực hiện các chuyển đổi loại cần thiết trước khi so sánh đẳng thức. Cú pháp so sánh: a == b.
• Toán tử === là so sánh cân bằng nghiêm ngặt (strict equality), nó sẽ không thực hiện chuyển đổi loại. 

Tại sao chúng ta sử dụng “use strict” statement?

Use strict là chế độ sử dụng nghiêm ngặt. Khi một đoạn lệnh được khai báo sử dụng nghiêm ngặt, tất cả các dòng mã ở phía dưới dòng khai báo use strict sẽ được quản lý theo một cách nghiêm ngặt hơn về cú pháp.

Một số câu hỏi thường gặp khác

• Tôi cần chuẩn bị những gì khi phỏng vấn lập trình viên Front-end?
• Tại sao chúng tôi nên thuê bạn làm lập trình viên Front-end?
• Khó khăn nhất mà bạn gặp phải khi trở thành lập trình viên Front-end là gì?
• Mức lương phổ biến của lập trình viên Front-end là bao nhiêu?
• Các lập trình viên Front-end thường sử dụng những ngôn ngữ lập trình nào?

Như vậy, bài viết này đã tổng hợp cho bạn các câu hỏi phỏng vấn phổ biến nhất dành cho các lập trình viên Front-end.