Theo Khảo sát Stack Overflow mới nhất, có tới 27,42% tất cả các lập trình viên trên Stack Overflow tự coi mình là nhà phát triển front end. Nhu cầu tuyển dụng các vị trí front-end developer để xây dựng giao diện người dùng thanh lịch, trực quan, đáp ứng và tương tác tốt trên các thiết bị khác nhau, ngày càng cao. Nhưng vấn đề là khá nhiều các ứng viên đều bối rối hoặc không chắc chắn loại câu hỏi phỏng vấn mà họ có thể gặp. Biết những câu hỏi phù hợp là rất quan trọng đối với bất kỳ ai muốn vượt qua cuộc phỏng vấn xin việc ở vị trí front end developer.
Cho dù bạn là người mới mới vào nghề hay ứng viên đã có kinh nghiệm, hãy xem danh sách các câu hỏi và hướng dẫn trả lời phỏng vấn nhà phát triển front end bên dưới để có thể chuẩn bị tốt hơn cho buổi phỏng vấn. Ngoài các câu hỏi, bài viết cũng mang đến cho bạn một số nguồn tham khảo các câu hỏi phỏng front end khác.
Các kiến thức chính trong phỏng vấn front end developer
Bạn cần chú ý các lĩnh vực kiến thức và kỹ năng sau có thể gặp xuyên xuốt trong các câu hỏi phỏng vấn front end
- Hiểu biết tốt về JavaScript – đó là điều khá rõ ràng. Ngoài ngôn ngữ, bạn nên làm quen với các công cụ phân tích mã tĩnh (static code analysis tool).
- Kiến thức tốt về các frameworks, các thư viện thông dụng (tùy thuộc vào nhu cầu cụ thể của công ty bạn đang ứng tuyển): React, Angular, Vue.js, v.v.
- Nắm vững HTML5 và CSS, viết HTML chính xác về mặt ngữ nghĩa, triển khai hoàn hảo pixel của các thiết kế thành CSS, chú ý đến chi tiết, thiết kế responsive.
- Tiếng Anh – bạn phải có khả năng giao tiếp trôi chảy và đưa ra các luận điểm của mình một cách rõ ràng nếu công việc bạn cần làm với tiếng Anh nhiều.
- Trình duyệt – kiến thức thực tế về trình duyệt, cách chúng hoạt động và cách gỡ lỗi code của bạn trong trình duyệt.
- Kinh nghiệm thực tế làm việc với các API (Rest API và / hoặc GraphQL).
- Có kinh nghiệm làm việc với GIT repo.
- Có kinh nghiệm về kiểm thử.
Các câu hỏi phỏng vấn front end về kỹ thuật
1/Các câu hỏi phỏng vấn về HTML
Q1: doctype trong html là gì? Các loại Doctypes khác nhau là gì?
Khai báo kiểu tài liệu HTML, còn được gọi là DOCTYPE, là dòng mã đầu tiên được yêu cầu trong mọi tài liệu HTML hoặc XHTML. Khai báo DOCTYPE là một hướng dẫn cho trình duyệt web về phiên bản HTML mà trang được viết. Điều này đảm bảo rằng trang web được phân tích cú pháp giống nhau bởi các trình duyệt web khác nhau.
<!DOCTYPE html>
<meta charset="UTF-8">Có 3 loại Doctypes :
- Strict Doctype
- Transitional Doctype
- Frameset Doctype
Tham khảo thêm về DOCTYPE: What is the DOCTYPE Declaration in HTML?
Q2:Thuộc tính data- là gì?
Thuộc tính data – cho phép bạn lưu trữ thêm thông tin / dữ liệu trong DOM. Bạn có thể viết html hợp lệ với embedded private data. Bạn có thể dễ dàng truy cập thuộc tính dữ liệu bằng cách sử dụng javascript và do đó rất nhiều thư viện như knockout sử dụng nó.
<div id="myDiv" data-user="jsDude" data-list-size="5" data-maxage="180"></div>Tham khảo thêm về thuộc tính data- để chuẩn bị tốt hơn cho phỏng vấn Front end: How to Use HTML5 Data Attributes
Q4: Làm thế nào bạn có thể tạo public key trong html?
Trả lời: html có phần tử keygen giúp tạo khóa và gửi thông qua biểu mẫu (form).
<keygen name="name" challenge="challenge string" keytype="type" keyparams="pqg-params">Q5: Làm sao để đáp ứng được một trang có nhiều ngôn ngữ trong html?
Chúng ta có thể đặt ngôn ngữ HTML bằng cách đặt thuộc tính lang trong code
<html lang="en">
Tham khảo:
Q6: HTMLsemantic có nghĩa là gì?
HTML semactic có nghĩa là sử dụng thẻ thích hợp nhất cho nhiệm vụ hiện có. Nó có nghĩa là sử dụng các phần tử có ý nghĩa như <form>, <article> và <table> thay vì chỉ sử dụng <div> và <span>.
Q7: Khả năng truy cập Web là gì (Web Accessibility)?
Khả năng truy cập web có nghĩa là đảm bảo web có thể được sử dụng bởi người khuyết tật. Nó bao gồm việc đảm bảo người dùng chỉ sử dụng bàn phím có thể điều hướng trang web của bạn đồng thời đảm bảo một số người gặp khó khăn khi nghe hoặc nhìn cũng có thể sử dụng nó.
Q8: Sự khác biệt giữa thẻ và thuộc tính là gì?
Các thẻ(tag) HTML là các phần tử (element). Chẳng hạn <a>, <button> và <div>. Thuộc tính (attribute) HTML mô tả đặc điểm của các phần tử. Ví dụ src, class và id.
Ví dụ: Ví dụ: <p align = ”center”> Câu hỏi phỏng vấn front end </p>, trong đó ‘align’ là thuộc tính mà chúng ta căn chỉnh đoạn văn để hiển thị ở giữa.
Q9: Sự khác biệt giữa phần tử inline và phần tử block là gì?
Các phần tử inline không được có chiều cao hoặc chiều rộng. Ví dụ về các phần tử inline bao gồm span, a và img. Các phần tử khối (block) có dòng riêng và chiếm toàn bộ chiều rộng có sẵn. Ví dụ về các phần tử khối là div, p và h1.
Q10: Hãy so sánh Display none và visibility hidden
Cả display none (không hiển thị) và visibility hidden (hiển thị ẩn) sẽ ẩn phần tử khỏi trang. Sự khác biệt là với display none, không có không gian được phân bổ cho phần tử, trong khi với visibility hidden, một khoảng trống sẽ xuất hiện trên trang.
Q11: Hãy xem HTML5 như một nền tảng web mở. Các khối building block của HTML5 là gì?
Các building block của html5:
- Ngữ nghĩa (Semantics) – Cho phép bạn mô tả chính xác hơn nội dung.
- Khả năng kết nối – Cho phép giao tiếp với máy chủ theo những cách mới và sáng tạo.
- Ngoại tuyến và lưu trữ – Cho phép các trang web lưu trữ cục bộ dữ liệu ở phía client và hoạt động offline hiệu quả hơn.
- Đa phương tiện – Làm cho video và âm thanh trở thành công dân hạng nhất trong Open Web.
- Đồ họa và hiệu ứng 2D / 3D – Cho phép nhiều tùy chọn trình bày đa dạng hơn.
- Hiệu suất và tích hợp – Cung cấp khả năng tối ưu hóa tốc độ cao hơn và sử dụng phần cứng máy tính tốt hơn.
- Quyền truy cập thiết bị – Cho phép sử dụng các thiết bị đầu vào và đầu ra khác nhau.
- Tạo kiểu (Styling) – Để các tác giả viết các chủ đề phức tạp hơn.
Tham khảo thêm về HTML5 để trả lời tốt các câu hỏi Front End : https://developer.mozilla.org/en-US/docs/Web/Guide/HTML/HTML5
Q12: Mô tả sự khác biệt giữa cookie, sessionStorage và localStorage.
Tất cả các công nghệ được đề cập ở trên là cơ chế lưu trữ khóa-giá trị (key-value) ở phía client. Chúng chỉ có thể lưu trữ các giá trị dưới dạng chuỗi
cookie |
localStorage |
sessionStorage |
|
|---|---|---|---|
| Nơi khởi tạo | Client hoặc server. Server có thể dủng Set-Cookie header |
Client | Client |
| Hết hạn | Có thời gian sống | Lưu trữ vô thời hạn | Mất dữ liệu khi đóng tab |
| Liên tục trên các phiên trình duyệt | Tùy thuộc vào thời gian hết hạn được cấu hình | Có | Không |
| Gửi đến máy chủ với mọi yêu cầu HTTP | Cookies được tự động gửi qua Cookie header |
Không | Không |
| Lưu trữ tối đa (per domain) | 4kb | 5MB | 5MB |
| Truy cập | Bất kỳ cửa sổ nào | Bất kỳ cửa sổ nào | Trên cùng tab |
Q13: Hãy giải thích việc sử dụng phần tử canvas trong HTML5
<canvas> là phần tử trong HTML5 mà chúng ta có thể sử dụng để vẽ đồ họa sử dụng kịch bản (JavaScript). Phần tử này hoạt động như một container cho đồ họa và phần còn lại sẽ được thực hiện bởi kịch bản. Chúng ta có thể vẽ hình ảnh, đồ thị và một ít hình ảnh động Etcetera sử dụng phần tử <canvas>
<canvas id="canvas1" width="400" height="200"></canvas>Q14: Mô tả sự khác biệt giữa <script>, <script async> và <script defer>.
<script>– Phân tích cú pháp HTML bị chặn, tập lệnh được tìm nạp và thực thi ngay lập tức, phân tích cú pháp HTML tiếp tục sau khi tập lệnh được thực thi.<script async>– Tập lệnh sẽ được tìm nạp song song với việc phân tích cú pháp HTML và được thực thi ngay khi có sẵn (có thể là trước khi quá trình phân tích cú pháp HTML hoàn tất). Sử dụng không đồng bộ khi tập lệnh độc lập với bất kỳ tập lệnh nào khác trên trang, ví dụ: phân tích.<script defer>– Tập lệnh sẽ được tìm nạp song song với quá trình phân tích cú pháp HTML và được thực thi khi trang hoàn tất quá trình phân tích cú pháp. Nếu có nhiều trong số chúng, mỗi tập lệnh hoãn lại được thực thi theo thứ tự mà chúng gặp trong tài liệu. Nếu một tập lệnh dựa trên DOM được phân tích cú pháp đầy đủ, thì thuộc tínhdefersẽ hữu ích trong việc đảm bảo rằng HTML được phân tích cú pháp đầy đủ trước khi thực thi. Không có nhiều sự khác biệt khi đặt một<script>bình thường ở cuối<body>. Tập lệnh hoãn lại không được chứa document.write.
Lưu ý: Các thuộc tính async và defer bị bỏ qua đối với các tập lệnh không có thuộc tính src.
Q15: progressive rendering là gì?
Progressive rendering là tên được đặt cho các kỹ thuật được sử dụng để cải thiện hiệu suất của trang web (đặc biệt là cải thiện thời gian tải cảm nhận) để kết xuất nội dung hiển thị nhanh nhất có thể. Progressive rendering đã từng phổ biến hơn nhiều vào những ngày trước khi có internet băng thông rộng nhưng nó vẫn được sử dụng trong sự phát triển hiện đại khi kết nối dữ liệu di động ngày càng trở nên phổ biến (và không đáng tin cậy)!
Tham khảo thêm về Progressive rendering: https://stackoverflow.com/questions/33651166/what-is-progressive-rendering
Q16: DOM là gì?
- DOM là viết tắt của Document Object Model
- DOM là một API lập trình cho các tài liệu HTML và XML
- DOM đại diện cho các tài liệu HTML & XML dưới dạng các node và đối tượng. Vì vậy, nó có thể được điều khiển thông qua javascript
- Xây dựng DOM giống với cấu trúc dựa trên cây
Ví dụ:
<table>
<tbody>
<tr>
<td>Shady Grove</td>
<td>Aeolian</td>
</tr>
<tr>
<td>Over the River, Charlie</td>
<td>Dorian</td>
</tr>
</tbody>
</table>HTML ở trên được biểu diễn dưới dạng cấu trúc dựa trên cây như bên dưới. Biểu diễn đồ họa:
Xem nguồn của câu hỏi phỏng vấn front end này tại đây
Tìm hiểu thêm về DOM: Introduction to the DOM
Q17: Geolocation API trong HTML5 là gì?
Geolocation (định vị địa lý) API được sử dụng để chia sẻ vị trí thực của khách hàng với các trang web. Điều này giúp cung cấp nội dung dựa trên ngôn ngữ và trải nghiệm độc đáo cho người dùng, dựa trên vị trí của họ. Geolocation API hoạt động với một thuộc tính mới của đối tượng điều hướng toàn cầu và hầu hết các trình duyệt hiện đại đều hỗ trợ điều này.
var geolocation = navigator.geolocation;Q18: Hình ảnh raster và hình ảnh vector là gì?
- Hình ảnh raster – Hình ảnh raster được xác định bằng cách sắp xếp các pixel trong một lưới với màu sắc chính xác của pixel đó. Một số định dạng tập tin raster bao gồm PNG (.png), JPEG (.jpg), v.v.
- Hình ảnh vectơ – Hình ảnh vectơ được xác định bằng cách sử dụng các thuật toán với định nghĩa hình dạng và đường dẫn có thể được sử dụng để hiển thị hình ảnh trên màn hình được viết theo kiểu đánh dấu tương tự. Phần mở rộng của tập tin là .svg
Q19: Cách sử dụng thuộc tính novalidate cho thẻ biểu mẫu (form tag) được giới thiệu trong HTML5 là gì?
Giá trị của nó là kiểu boolean cho biết liệu dữ liệu đang được biểu mẫu gửi có được xác thực trước hay không. Bằng cách gán là false, các biểu mẫu có thể được gửi mà không cần xác thực, điều này cũng giúp người dùng tiếp tục sau đó.
Q20: Hãy mô tả cấu trúc bố cục của HTML.
Mỗi trang web đều có các thành phần khác nhau để hiển thị nội dung dự định và một giao diện người dùng cụ thể. Tuy nhiên, có một số thứ được tạo khuôn mẫu và được chấp nhận toàn cục để cấu trúc trang web, chẳng hạn như:
<header>: Lưu trữ thông tin bắt đầu về trang web.<footer>: Đại diện cho phần cuối cùng của trang.<nav>: Menu điều hướng của trang HTML.<article>: Nó là một tập hợp thông tin.<section>: Nó được sử dụng bên trong khối bài viết để xác định cấu trúc cơ bản của một trang.<aside>: Nội dung thanh bên của trang.
Q21: Hãy cho biết cách tối ưu hóa hiệu suất khi tải nội dung trang web
Để tối ưu hóa thời gian tải trang web, chúng ta cần tối ưu hóa tải nội dung của trang web bằng những cách sau:
- Lưu trữ CDN – CDN hoặc mạng phân phối nội dung là các máy chủ được phân phối theo địa lý để giúp giảm độ trễ.
- Nén tập tin – Đây là một phương pháp giúp giảm kích thước của nội dung để giảm việc truyền dữ liệu
- Nối tập tin – Điều này làm giảm số lượng cuộc gọi HTTP
- Giảm thiểu (Minify) tập lệnh – Điều này làm giảm kích thước tệp tổng thể của tệp js và CSS
- Tải xuống song song – Lưu trữ nội dung trong nhiều miền phụ có thể giúp vượt qua giới hạn tải xuống là 6 nội dung trên mỗi miền của tất cả các trình duyệt hiện đại. Điều này có thể được định cấu hình nhưng hầu hết người dùng thông thường không bao giờ sửa đổi các cài đặt này.
- Tải chậm (lazy loading) – Thay vì tải tất cả các nội dung cùng một lúc, các nội dung không quan trọng có thể được tải khi cần thiết
Q22: Web workers là gì?
Web worker là một tập lệnh chạy ở chế độ nền (tức là trong một chuỗi khác) mà trang không cần đợi nó hoàn thành. Người dùng có thể tiếp tục tương tác với trang trong khi Web worker chạy ở chế độ nền. Workers sử dụng việc truyền thông điệp dạng luồng để đạt được tính song song.
Q23: Viết code cần thiết để tạo một <canvas> 500 pixel x 500 pixel.
Viết code cần thiết để tạo một <canvas> 500 pixel x 500 pixel. Trong đó, sơn một hình vuông 200 pixel x 200 pixel màu xanh lam với góc trên cùng bên trái của hình vuông nằm cách cả cạnh trên và cạnh trái của canvas là 100 pixel.
<canvas id="c" width="500" height="500"></canvas>
<script>
var canvas = document.getElementById( "c" );
var drawing_context = canvas.getContext( "2d" );
drawing_context.fillStyle = "blue";
drawing_context.fillRect( 100, 100, 200, 200 );
</script>2/ Các câu hỏi phỏng vấn về CSS
Q24: CSS là gì?
CSS là viết tắt của Cascading Style Sheet. Nó là một ngôn ngữ tạo kiểu phổ biến được sử dụng với HTML để thiết kế các trang web. Nó cũng có thể được sử dụng với bất kỳ tài liệu XML nào bao gồm XML thuần túy, SVG và XUL.
Tìm hiểu thêm: CSS: Cascading Style Sheets
Q25: CSS framework là gì?
Về bản chất, một CSS framework bao gồm một số bảng định kiểu ( stylesheets) CSS sẵn sàng để các nhà phát triển và nhà thiết kế web sử dụng. Các bảng định kiểu được chuẩn bị để sử dụng cho các chức năng thiết kế web tiêu chuẩn: thiết lập màu sắc, bố cục, phông chữ, thanh điều hướng, v.v. Nói chung, bảng định kiểu được hỗ trợ và mở rộng bởi các công nghệ kịch bản khác như SASS và JavaScript.
Với CSS framework, người dùng có một biểu định kiểu CSS hoàn chỉnh và họ chỉ phải viết code HTML với các lớp, cấu trúc và ID chính xác để thiết lập một trang web. CSS framework đã tích hợp sẵn các lớp cho các phần tử trang web phổ biến – chân trang, thanh trượt, thanh điều hướng, menu bánh hamburger, bố cục dựa trên cột, v.v.
Q26: Hãy cho biết các cách khác nhau để tích hợp CSS vào trang HTML
Có ba cách để có thể tích hợp một kiểu CSS nhất định:
- Tích hợp kiểu bằng cách sử dụng các style-tags trong phần head của trang HTML.
- Tích hợp style của mình bằng cách sử dụng inline-styling
- Viết CSS trong một tập tin riêng biệt và thêm nó vào trang HTML bằng cách sử dụng thẻ liên kết.
Q26: BEM là gì? Tại sao lại cần dùng BEM?
BEM là viết tắt của Block, Element và Modifier. Đó là quy ước đặt tên CSS để viết các lớp CSS rõ ràng hơn và dễ đọc hơn.
BEM cũng nhằm mục đích viết các khối CSS độc lập để sử dụng lại chúng sau này trong dự án khác nhau.
Q27: Ưu nhược điểm khi sử dụng External Style Sheets?
Ưu điểm:
- Style của một số documents có thể được kiểm soát từ trang web bằng cách sử dụng chúng.
- Nhiều phần tử HTML có thể có nhiều documents, nơi có thể tạo các lớp.
- Để tập hợp các kiểu trong những trường hợp phức tạp, các chiến lược chọn và nhóm được sử dụng.
Nhược điểm:
- Tải xuống bổ sung dự kiến sẽ nhập các documents có thông tin kiểu (style).
- Để hiển thị các documents, mẫu bên ngoài phải được xếp chồng lên nhau
- Không thực tế cho các small style definitions.
Q28: Box model trong CSS là gì? Thuộc tính CSS nào là một phần của nó?
Một hộp hình chữ nhật được bao quanh mọi phần tử HTML. Box model (mô hình hình hộp) được sử dụng để xác định chiều cao và chiều rộng của hình hộp chữ nhật. Hộp CSS bao gồm Chiều rộng và chiều cao (hoặc trong trường hợp không có, giá trị mặc định và nội dung bên trong), phần đệm (padding), đường viền (bordder), lề (margin).Nội dung:
- Content: Nội dung thực tế của hộp nơi đặt văn bản hoặc hình ảnh.
- Padding: Khu vực bao quanh nội dung (Khoảng trống giữa đường viền và nội dung).
- Border: Khu vực bao quanh phần đệm.
- Margin: Khu vực bao quanh đường viền.
Q29: Thiết kế responsive là gì?
Không chỉ để chuẩn bị cho các câu hỏi phỏng vấn, nắm vững về thiết kế responsive là yêu cầu bắc buộc phải biết với các front end developer
Thiết kế đáp ứng (responsive) cho phép các trang web ‘thích ứng’ với các kích thước màn hình khác nhau mà không ảnh hưởng đến khả năng sử dụng và trải nghiệm người dùng. Văn bản, phần tử giao diện người dùng và hình ảnh thay đổi tỷ lệ và thay đổi kích thước tùy thuộc vào chế độ xem. Thiết kế đáp ứng cho phép các nhà phát triển viết một bộ code HTML, CSS và JavaScript cho nhiều thiết bị, nền tảng và trình duyệt. Thiết kế đáp ứng phù hợp với thiết bị và phù hợp với triết lý phát triển phổ biến của Không lặp lại chính mình (Don’t Repeat Yourself -DRY).
Q30: CSS selector là gì?
CSS selector là một chuỗi xác định các phần tử mà một khai báo cụ thể áp dụng. Nó cũng được coi là liên kết giữa tài liệu HTML và style sheet. Nó tương đương với các phần tử HTML. Có một số loại bộ chọn khác nhau trong CSS:
- CSS Element Selector
- CSS Id Selector
- CSS Class Selector
- CSS Universal Selector
- CSS Group Selector
Q31: Mục đích của z-index là gì và nó được sử dụng như thế nào?
Z-index giúp xác định thứ tự ngăn xếp của các phần tử được định vị có thể chồng lên nhau. Giá trị mặc định của z-index là 0 và có thể là số dương hoặc số âm.
Phần tử có chỉ số z cao hơn luôn được xếp chồng lên trên so với chỉ số thấp hơn. Z-Index có thể nhận các giá trị sau:
- Tự động (auto): Đặt thứ tự ngăn xếp bằng với cha mẹ của nó.
- Số (number): Sắp xếp thứ tự ngăn xếp.
- Khởi tạo (Initial): Đặt thuộc tính này thành giá trị mặc định của nó (0).
- Kế thừa (Inherit): Kế thừa thuộc tính này từ phần tử mẹ của nó.
Q32: Sự khác biệt giữa “resetting” và “normalizing” CSS là gì? Khi nào nên chọn resetting?
- Resetting: loại bỏ tất cả kiểu trình duyệt mặc định trên các phần tử. Ví dụ:
margin,padding,font-sizecủa tất cả các phần tử được đặt lại như cũ. Bạn sẽ phải khai báo lại kiểu dáng cho các yếu tố kiểu chữ phổ biến. - Normalizing: Chuẩn hóa bảo tồn các kiểu mặc định hữu ích thay vì “unstyling” mọi thứ. Nó cũng sửa lỗi cho các phụ thuộc trình duyệt phổ biến.
Chọn resetting khi bạn có thiết kế trang web rất tùy chỉnh hoặc độc đáo, và bạn cần phải thực hiện nhiều kiểu của riêng mình và không cần giữ nguyên bất kỳ kiểu mặc định nào.
Q33: Mô tả Float và cách nó hoạt động
Thuộc tính float CSS đặt một phần tử ở bên trái hoặc bên phải vùng chứa của nó, cho phép các phần tử văn bản và nội tuyến quấn quanh nó. Phần tử bị xóa khỏi luồng bình thường của trang, mặc dù vẫn còn lại một phần của luồng (trái ngược với vị trí tuyệt đối).
Tham khảo: float
Q34: Block Formatting Contextlà gì? Nó hoạt động thế nào?
Block Formatting Context(BFC) là một phần của hiển thị CSS trực quan của một trang web trong đó các hộp khối được bố trí. Floats, absolutely positioned elements, inline-blocks, table-cells, table-captions, và elements có phần tràn khác với phần hiển thị (ngoại trừ khi giá trị đó đã được truyền đến chế độ xem) thiết lập ngữ cảnh định dạng khối mới.
Biết cách thiết lập Block Formatting Context là rất quan trọng vì nếu không làm như vậy, hộp chứa sẽ không chứa floated children. Điều này tương tự như việc thu hẹp lề nhưng nguy hiểm hơn vì bạn sẽ thấy toàn bộ các hộp sụp đổ theo những cách kỳ lạ.
BFC là một HTML box đáp ứng ít nhất một trong các điều kiện sau:
- Giá trị của float không phải là none.
- Giá trị của vị trí không phải là tĩnh cũng không phải là tương đối.
- Giá trị của màn hình là table-cell, table-caption, inline-block, flex hoặc inline-flex.
- Giá trị của overflow không hiển thị.
- Trong BFC, cạnh ngoài bên trái của mỗi hộp chạm vào cạnh trái của khối chứa (đối với định dạng từ phải sang trái, các cạnh bên phải chạm vào).
Q35: Pseudo-elements là gì? Hãy cho biết syntax của nó?
Pseudo-elements là từ khóa được thêm vào bộ chọn cho phép người ta tạo kiểu cho một phần cụ thể của phần tử đã chọn. CSS được sử dụng để áp dụng các kiểu trong HTML mark- up. Trong một số trường hợp không thể mark-up hoặc tạo kiểu thêm cho tài liệu, thì có một tính năng có sẵn trong CSS được gọi là Pseudo-elements. Nó sẽ cho phép mark-up thêm vào tài liệu mà không làm ảnh hưởng đến tài liệu thực tế. Nó có thể được sử dụng để:
- Tạo kiểu cho chữ cái đầu tiên, dòng hoặc phần tử
- Để chèn một nội dung
Syntax
Selector: :pseudo-element {
property1 :value;
property2 :value;
}Q36: Hãy giải thích các CSS sprite và cách bạn triển khai chúng trên một trang hoặc site.
CSS sprites kết hợp nhiều hình ảnh thành một hình ảnh lớn hơn. Đây là một kỹ thuật thường được sử dụng cho các icones. Cách thực hiện:
- Sử dụng trình tạo sprite gói nhiều hình ảnh thành một và tạo CSS thích hợp cho nó.
- Mỗi hình ảnh sẽ có một lớp CSS tương ứng với các thuộc tính
background-image,background-positionvàbackground-sizeđược xác định. - Để sử dụng hình ảnh đó, hãy thêm lớp tương ứng vào phần tử của bạn.
Ưu điểm của CSS sprites:
- Giảm số lượng yêu cầu HTTP cho nhiều hình ảnh (chỉ yêu cầu một yêu cầu duy nhất cho mỗi spritesheet). Nhưng với HTTP2, việc tải nhiều hình ảnh không còn là vấn đề nữa.
- Tải xuống trước các nội dung sẽ không được tải xuống cho đến khi cần, chẳng hạn như hình ảnh chỉ xuất hiện khi: di chuột qua trạng thái giả. Chớp mắt sẽ không được nhìn thấy.
Q37: Có bao nhiêu cách CSS có thể được tích hợp dưới dạng một trang web?
Có 3 cách:
- Inline: thuật ngữ được sử dụng khi mã CSS có thuộc tính của các phần tử
<p style = "color: skyblue;"> xin chào mọi người! </p>- External: tập tin CSS riêng biệt được tạo trong không gian làm việc và sau đó liên kết chúng trong mọi trang web được tạo
<head>
<link rel="text/css"
href="your_CSS_file_location"/>
</head>- Internal: phần tử đầu của trang web có internal CSS được triển khai trong đó:
<head>
<style>
p{
color:lime;
background-color:black;
}
</style>
</head>Q38: Ưu điểm của việc sử dụng Translate() thay vì absolute position là gì?
Translate() không khiến trình duyệt kích hoạt repaint và bố cục mà thay vào đó, chỉ hoạt động trên trình tổng hợp. Absolute position kích hoạt repaint hoặc chỉnh sửa DOM. Vì vậy, Translate() mang lại hiệu suất tốt hơn
Q39: Giải thích thuộc tính vị trí (possition) CSS?
- Absolute: Để đặt một phần tử chính xác nơi bạn muốn đặt nó. Absolute position thực sự được đặt so với phần tử gốc. Nếu không có trang gốc nào thì vị trí tương đối với chính trang đó (nó sẽ mặc định tất cả các cách sao lưu vào phần tử).
- Relative: Tương đối với chính nó. Vị trí đặt: tương đối; trên một phần tử và không có thuộc tính định vị nào khác, nó sẽ không ảnh hưởng đến định vị của nó. Nó cho phép sử dụng z-index trên phần tử và nó giới hạn phạm vi của các phần tử con được định vị tuyệt đối. Bất kỳ phần tử con nào sẽ được định vị tuyệt đối trong khối đó.
- Fixed: Phần tử được định vị liên quan đến chế độ xem hoặc chính cửa sổ trình duyệt. Khung nhìn không thay đổi nếu bạn cuộn và do đó phần tử cố định sẽ ở ngay vị trí cũ.
- Static: Mặc định tĩnh cho mọi phần tử trang. Lý do duy nhất bạn muốn đặt một phần tử ở vị trí: static là để xóa một cách một số vị trí đã áp dụng cho một phần tử nằm ngoài tầm kiểm soát của bạn.
- Sticky: Sticky positioning là sự kết hợp giữa định vị tương đối và cố định. Phần tử được coi là vị trí tương đối cho đến khi nó vượt qua ngưỡng được chỉ định, tại thời điểm đó, phần tử được coi là vị trí cố định.
Q40: Grid system là gì?
CSS Grid Layout là hệ thống bố cục mạnh mẽ nhất hiện có trong CSS. Nó là một hệ thống 2 chiều, có nghĩa là nó có thể xử lý cả cột và hàng, không giống như flexbox phần lớn là hệ thống 1 chiều
3/ Các câu hỏi phỏng vấn JavaScript
Các câu hỏi phỏng vấn JavaScript là phần quan trọng trong phỏng vấn Front End. Hãy cùng xem một số câu hỏi thông dụng:
Q41: Hãy giải thích về event delegation
Event delegation là một kỹ thuật liên quan đến việc thêm event listeners vào một phần tử mẹ thay vì thêm chúng vào các phần tử con. Listeners sẽ kích hoạt bất cứ khi nào sự kiện được kích hoạt trên các phần tử con do sự kiện làm nổi bong bóng (bubbling up) DOM. Lợi ích của kỹ thuật này là:
- Memory footprint giảm xuống vì chỉ cần một trình xử lý duy nhất trên phần tử mẹ, thay vì phải đính kèm các trình xử lý sự kiện trên mỗi phần tử con.
- Không cần phải hủy liên kết trình xử lý khỏi các phần tử bị xóa và liên kết sự kiện cho các phần tử mới.
Q42: Giải thích cách hoạt động của this trong JavaScript
Không có lời giải thích đơn giản nào cho this; nó là một trong những khái niệm khó hiểu nhất trong JavaScript. Giá trị của this phụ thuộc vào cách hàm được gọi. Các quy tắc sau được áp dụng:
- Nếu từ khóa
newđược sử dụng khi gọi hàm, thì bên trong hàm này là một đối tượng hoàn toàn mới. - Nếu
apply, callhoặcbindđược sử dụng để gọi / tạo một hàm, thì bên trong hàm này là đối tượng được truyền vào dưới dạng đối số. - Nếu một hàm được gọi là một phương thức, chẳng hạn như
obj.method ()– thìthislà đối tượng mà hàm là thuộc tính của nó. - Nếu một hàm được gọi dưới dạng một lệnh gọi hàm miễn phí, nghĩa là nó được gọi mà không có bất kỳ điều kiện nào ở trên, thì đây là đối tượng toàn cục. Trong trình duyệt, nó là đối tượng
window. Nếu ở chế độ nghiêm ngặt ('use strict'),thissẽ làundefinedthay vì đối tượng toàn cục. - Nếu áp dụng nhiều quy tắc trên, quy tắc nào cao hơn sẽ được ưu tiên và sẽ đặt giá trị này.
- Nếu hàm là một arrow function ES2015, nó sẽ bỏ qua tất cả các quy tắc ở trên và nhận
thiscủa phạm vi xung quanh tại thời điểm nó được tạo.
Q43: Sự khác biệt giữa các host objects và native objects là gì?
- Native objects là các đối tượng là một phần của ngôn ngữ JavaScript được xác định bởi đặc tả ECMAScript, chẳng hạn như
String,Math,RegExp,Object,Function, v.v. - Host objects được cung cấp bởi môi trường thời gian chạy (trình duyệt hoặc Node), chẳng hạn như
window,XMLHTTPRequest, v.v.
Q44: Ưu điểm và nhược điểm của việc sử dụng Ajax là gì?
Ưu điểm:
- Tương tác tốt hơn. Nội dung mới từ máy chủ có thể được thay đổi động mà không cần tải lại toàn bộ trang.
- Giảm kết nối đến máy chủ vì tập lệnh và biểu định kiểu chỉ phải được yêu cầu một lần.
- Trạng thái có thể được duy trì trên một trang. Các biến JavaScript và trạng thái DOM sẽ vẫn tồn tại vì trang vùng chứa chính không được tải lại.
Nhược điểm:
- Các trang web động khó đánh dấu hơn.
- Không hoạt động nếu JavaScript đã bị tắt trong trình duyệt.
- Một số trình duyệt web không thực thi JavaScript và sẽ không nhìn thấy nội dung đã được tải bởi JavaScript.
- Các trang web sử dụng Ajax để tìm nạp dữ liệu có thể sẽ phải kết hợp dữ liệu từ xa đã tìm nạp với các mẫu phía máy khách để cập nhật DOM. Để điều này xảy ra, JavaScript sẽ
- phải được phân tích cú pháp và thực thi trên trình duyệt và các thiết bị di động cấp thấp có thể phải vật lộn với điều này.
Q45: "use strict" là gì? Những thuận lợi và khó khăn khi sử dụng nó là gì?
"use strict" là một câu lệnh được sử dụng để bật chế độ nghiêm ngặt cho toàn bộ tập lệnh hoặc các chức năng riêng lẻ. Chế độ nghiêm ngặt (strict mode) là một cách để chọn tham gia một biến thể JavaScript bị hạn chế.
Ưu điểm:
- Làm cho nó không thể vô tình tạo ra các biến toàn cục.
- Thực hiện các bài tập mà nếu không sẽ không đưa ra một ngoại lệ.
- Làm cho các nỗ lực xóa thuộc tính không thể xóa được ném ra (nơi mà trước đó nỗ lực chỉ đơn giản là không có tác dụng).
- Yêu cầu tên tham số hàm là duy nhất.
- điều này không được xác định trong bối cảnh toàn cầu.
- Nó bắt một số blooper mã hóa phổ biến, đưa ra các ngoại lệ.
- Nó vô hiệu hóa các tính năng khó hiểu hoặc không được nghĩ ra.
Nhược điểm:
- Nhiều tính năng còn thiếu mà một số nhà phát triển có thể đã quen.
- Không còn quyền truy cập vào function.caller và function.arguments.
- Việc kết hợp các tập lệnh được viết ở các chế độ nghiêm ngặt khác nhau có thể gây ra sự cố.
Q46: Sự khác biệt giữa Set, WeakSet, Map và WeakMap trong JavaScript là gì?
WeakSetvàSetđều là tập hợp các giá trị duy nhất. Sự khác biệt chính làWeakSetchỉ lưu trữ đối tượng và không thể chứa các giá trị tùy ý thuộc bất kỳ loại nào, nhưng cácSetthì có thể.- Sets hữu ích khi bạn cần nối từng dữ liệu một vào cấu trúc dữ liệu nhưng cũng muốn loại bỏ các phần trùng lặp. Các hoạt động tập hợp có giá trị trung bình là
O(1), điều này làm cho chúng tiết kiệm thời gian. WeakMapvàMaplà tập hợp các cặp khóa / giá trị. Sự khác biệt chính là trongWeakMap, các khóa phải là các đối tượng. TrongMap, các khóa có thể thuộc bất kỳ loại nào.- Cũng cần biết rằng các giá trị
WeakMapkhông thể được lặp lại và chúng giữ một tham chiếu yếu (weak reference) đến khóa. Ví dụ: nếu bạn xóa thủ công một khóa được tham chiếu trongWeakMap, khóa đó sẽ được thu gom.
Q47: Khi nào bạn sử dụng document.write ()?
document.write () ghi một chuỗi văn bản vào một luồng tài liệu được mở bởi document.open (). Khi document.write () được thực thi sau khi trang được tải, nó sẽ gọi document.open để xóa toàn bộ tài liệu (đã xóa <head> và <body>!) Và thay thế nội dung bằng giá trị tham số đã cho. Do đó, nó thường được coi là nguy hiểm và dễ bị lạm dụng.
Q48: Sự khác biệt giữa let, const và var là gì?
Ban đầu, var là tùy chọn duy nhất mà JavaScript có để xác định các biến. Trong ES6, chúng ta có const và let là các tùy chọn bổ sung.
- Các biến được xác định bằng
constkhông thể được gán lại. - Các biến
Constvàletlà phạm vi khối. - Biến
Varlà function scoped. - Các biến được xác định bằng
varđược sử dụng theo cơ chế hoisting
Q49: Làm cách nào để bạn kiểm tra xem một biến có phải là một số trong JavaScript hay không?
Để kiểm tra xem một biến có phải là số hay không, chúng ta có thể sử dụng hàm isNaN () trong JavaScript. Nó xác định xem một giá trị có phải là một số hay không.
Q50: CoffeeScript là gì?
CoffeeScript là một ngôn ngữ lập trình nhỏ có thể biên dịch thành JavaScript. Nó giúp viết mã JavaScript tốt hơn bằng cách cung cấp cho bạn cú pháp nhất quán hơn và tránh tính chất bất thường của ngôn ngữ JavaScript. Quy tắc cơ bản cho Coffee Script:
- Vấn đề về khoảng trắng: Không có dấu ngoặc nhọn trong CoffeeScript
- Không có dấu ngoặc đơn: Các hàm nhận đối số không yêu cầu dấu ngoặc đơn
Q51: Clousure là gì?
Closure là tạo một phạm vi từ vựng đóng bên trong một phạm vi khác, vì vậy phạm vi bên trong có thể truy cập phạm vi bên ngoài. Closure được tạo khi hàm được tạo. Closure là làm cho các biến và phương thức ở chế độ riêng tư trong phạm vi.
Currying là một ví dụ của việc closure. Nó thường tự trả về khi tạo ra lexical environment. Môi trường này bao gồm bất kỳ biến cục bộ nào nằm trong phạm vi tại thời điểm closure được tạo. Nó giống như một nhà máy nhỏ để sản xuất một sản phẩm với các chức năng cụ thể từ các thành phần đó.
function add(n){
var num = n
return function addTo(x){
return x + num
}
}
addTwo = add(2)
addTwo(5)Không có cách rõ ràng nào để tạo các phương thức private trong JS, nhưng closure có thể ‘private’ các phương thức.
Q52: Hãy giải thích về ‘Hoisting’
Hoisting là hành vi mặc định trong JavaScript, di chuyển tất cả các khai báo lên trên cùng của phạm vi hiện tại và cho phép các biến có thể được sử dụng trước khi khai báo. Quá trình khởi tạo sẽ không bị kéo lên. Hosts chỉ để khai báo.
Ví dụ dưới đây sẽ kéo x, y ở trên cùng:
var x = 1
console.log(x + “ — -”+y) // 1 — -undefined
var y = 2Q53: JavaScript templating là gì? Bạn biết những thư viện nào?
JavaScript templating đề cập đến phương pháp liên kết dữ liệu phía client được triển khai bằng ngôn ngữ JavaScript. Cách tiếp cận này trở nên phổ biến nhờ JavaScript được sử dụng nhiều hơn, khả năng xử lý của ứng dụng khách tăng lên và xu hướng chuyển các phép tính cho trình duyệt web của khách hàng. Các thư viện JavaScript templating phổ biến là AngularJS, Backbone.js, Ember.js, Handlebars.js, và Mustache.js. Một phương pháp thường xuyên là sử dụng dấu ngoặc nhọn kép (tức là {{key}}) để gọi các giá trị của khóa đã cho từ các tập tin dữ liệu, thường là các đối tượng JSON.
Một số câu hỏi hành vi
Một số câu hỏi hành vi bạn có thể gặp trong phỏng vấn Front End
Q54: Hãy mô tả ngắn gọn về trang web hoặc ứng dụng web cuối cùng mà bạn đã làm việc, bạn đã thực hiện những bước nào để đảm bảo nó thân thiện với người dùng và có thể truy cập?
Gợi ý:
- Các nhà tuyển dụng sẽ tìm kiếm những ứng viên có kinh nghiệm trực tiếp triển khai các tiêu chuẩn về usability và accessibility.
- Các câu trả lời cho câu hỏi phỏng vấn Front End này có thể đề cập đến việc thực hiện kiểm tra người dùng trên các thiết bị khác nhau, đảm bảo trang web hoặc ứng dụng hoạt động liên tục và trực quan cho dù người dùng tương tác với nó như thế nào.
Q55: Hãy kể về khoảng thời gian bạn gặp phải những phản ứng từ stakeholder trong một dự án mà bạn đang thực hiện. Bạn đã xử lí tình huống đó như thế nào?
Gợi ý:
- Nhà tuyển dụng mong muốn những ứng viên đã phản hồi một cách chuyên nghiệp, lắng nghe và biết giải thích quan điểm của mình.
- Những câu trả lời có thể bao gồm cách ứng viên thuyết phục các bên liên quan thử theo cách của họ, hoặc cách đề xuất một thỏa hiệp mà đã được chấp nhận trong thực tế dự án.
Q56: Mô tả trải nghiệm của bạn về một dự án web khó khăn có sự tham gia của nhiều bên liên quan. Bạn đã hoàn thành dự án như thế nào?
Gợi ý:
- Nhà tuyển dụng luôn tìm kiếm các dấu hiệu cho thấy ứng viên đã chịu trách nhiệm và thúc đẩy phần còn lại của nhóm.
- Những câu trả lời tốt sẽ cho thấy ứng viên đã hỏi những câu hỏi thông minh đối với những người liên quan, đưa ra các chi tiết để mọi người hiểu được các yêu cầu về thiết kế và chức năng.
Một số nguồn câu hỏi tham khảo
Một số nguồn câu hỏi dùng cho bài viết này và một số tài liệu tham khảo dành cho phỏng vấn Front End developer
- Front End Interview Handbook
- Các câu hỏi phỏng vấn Front End
- Câu hỏi thường gặp trong vòng tuyển dụng Front end Developer
- 10 câu hỏi thông dụng về JavaScript cho phỏng vấn Front end Developers
Bạn có biết?
tham gia cộng đồng ITguru trên Linkedin, Facebook và các kênh mạng xã hội khác có thể giúp bạn nhanh chóng tìm được những chủ đề phát triển nghề nghiệp và cập nhật thông tin về việc làm IT mới nhất
Linkedin Page:
Facebook Group:
cơ hội việc làm IT : ITguru.vn
