Tuyển tập câu hỏi phỏng vấn Front-end - Lập trình website thật dễ

Tuyển tập câu hỏi phỏng vấn Front-end

Mục đích của trang là tổng hợp lại danh sách các câu hỏi tham khảo phỏng vấn cho vị trí lập trình viên Front-end.

Với mong muốn giúp những ai đang sắp được phỏng vấn chuẩn bị tốt hơn, đồng thời giúp ôn lại các kiến thức về front-end một cách vững chắc nhất.

Hỏi chung

  • Những điểm nào mà bạn thích, hoặc không thích về lập trình?
  • Khác nhau giữa UI và UX?
    • Thiết kế UX (UX Design) đề cập đến thuật ngữ User Experience Design (Thiết kế trải nghiệm người dùng), trong khi UI Design là viết tắt của User Interface Design (Thiết kế giao diện người dùng). Cả hai yếu tố này rất quan trọng đối với một sản phẩm và chúng làm việc chặt chẽ với nhau. Nhưng bất chấp mối quan hệ của chúng, vai trò của chúng rất khác nhau, đề cập đến các phần khác nhau của quá trình và tính kỷ luật của thiết kế. Trường hợp của thiết kế UX là lĩnh vực phân tích và kỹ thuật nhiều hơn trong khi UI gần giống với công việc thiết kế đồ hoạ, mặc dù các trách nhiệm phức tạp hơn.

  • Nói về môi trường làm việc mà bạn mong muốn?
  • Ba cách để giảm dung lượng tải trang?
    • 1 Tối ưu ảnh Tối ưu hóa dung lượng ảnh là cách cơ bản trong việc cải thiện thời gian tải trang. Photoshop và các ứng dụng chỉnh sửa hình ảnh khác không có hiệu quả với việc nén hình ảnh, khiến nhiều KB thừa được tải cùng theo từng truy vấn
    • 2 ClouldflareCloudFlare — một dịch vụ mà bạn có thể bắt đầu miễn phí, cung cấp cho bạn vô số cải thiện: Dịch vụ CDN (Content Delivery Network) Nén JavaScript, CSS và HTML Dịch vụ sao lưu thời gian chết Ngăn chặn DDOS Phân phối tài nguyên dựa theo vị trí người dùng
    • 3 Lazyload các nguồn tài nguyên
  • CORS?
    • Cross-origin resource sharing (CORS) là một cơ chế đặc biệt cho phép resource đặt tại một domain này có thể được request từ một domain khác với domain đó. CORS tận dụng HTTP headers để hỗ trợ browser quyết định xem trường hợp nào có thể cho phép thực hiện cross-domain request và trường hợp nào không. Về cơ bản, khi chúng ta thực hiện 1 cross-origin request, browser sẽ gửi kèm header Origin có giá trị là domain hiện tại.

Hỏi về HTML

  • Tác dụng của doctype?
    • !Doctype không phải là một tag HTML, !Doctype chỉ cho trình duyệt web biết được phiên bản ngôn ngữ đánh dấu (markup language) nào được sử dụng trong trang web.
  • Khác nhau giữa HTML và XHTML là gì?
    • XHTML là HTML viết dưới dạng XML.
    • XHTML là viết tắt của Extensible HyperText Markup Language (Ngôn ngữ HTML mở rộng)
    • XHTML gần giống hệt HTML
    • XHTML chặt chẽ hơn HTML
    • XHTML là HTML được viết dưới dạng ứng dụng của XML
    • XHTML được hỗ trợ bởi tất cả trình duyệt lớn
  • Có vấn đề gì không nếu lưu trang MIME dạng application/xhtml+xml?
  • Điều gì mà bạn cần phải chú ý nếu xây dựng và phát triển các trang web đa ngôn ngữ?
  • HTML Sematic là gì?
  • Thuộc tính data- dùng để làm gì?
    • Thuộc tính data-* được giới thiệu trong HTML5 dùng để lưu trữ dữ liệu trực tiếp trên trang HTML. Trong đó * phải gồm ít nhất một ký tự trở lên và không dùng chữ in hoa. Sử dụng thuộc tính data-* chúng ta có thể lưu trữ dữ liệu trên trang HTML mà không cần phải gửi yêu cầu (thường thông qua AJAX) lên máy chủ. Dữ liệu này sau đó có thể lấy ra thông qua JavaScript.
  • Nếu HTML5 là nguồn mở, thẻ HTML nào mà bạn sẽ phát triển thêm?
  • Khác nhau giữa cookiesessionStorage và localStorage.
  • Khác nhau giữa <script><script async> và <script defer>.
  • Tại sao nên đặt <link> trong thẻ <head></head> và đặt <script> sau thẻ </body>. Ngoại lệ khi nào?

Hỏi về CSS

  • CSS framework là gì?
  • Phân biệt position absolute và relative
  • Flexbox là gì?
  • Phân biệt display: block và display: inline
  • Có mấy cách để sử dụng CSS trên trang web?
  • Lợi / hại của việc sử dụng External Style Sheets?
  • Giải thích Ruleset là gì?
  • Case-sensitivity – ngôn ngữ css có phân biệt hoa thường khi nào?
  • Khác nhau giữa Class selector và Id selector?
  • Pseudo-elements là gì?
  • Cách nào đổi khôi phục thuộc tính mặc định của một đối tượng?
  • Ex: thẻ <a class="color1 color2"> có màu đỏ, sau đó bị class color2 đè lên thành màu xanh. Cú pháp nào để khôi phục lại thành màu trước đó?
  • z-index dùng để làm gì?
  • Tại sao @import chỉ có thể sử dụng ở đầu file?
  • SASS là gì?
  • Phân biệt mixin

Hỏi về Javascript

  • Ý nghĩa của biến this.
  • Liệt kê các function làm việc với array
  • Phân biệt var/let/const
  • Functional programing là gì?
  • Phân biệt call, apply và bind
  • Package-lock.json là gì?
  • Sử dụng AMD và CommonJS có tốt hay không? Tại sao tốt hoặc không tốt?
  • Nếu viết theo kiểu IIFE, tại sao đoạn mã sau bị lỗi? function foo(){ }();
    • Sửa lại
  • Khác nhau giữa nullundefined hoặc chưa khai báo?
    • Cách kiểm tra từng trường hợp trên.
  • Khác nhau giữa host objects và native objects là gì?
  • Javascript closure là gì?
  • ES6 Yeild là gì?
  • ES6 Function* là gì?
  • callback có phải là một phần của V8 hay không ?
  • Khác biệt của arrow function là gì ?
  • Phân biệt let,const,var khi nào thì dùng nó ?
  • Promise trong JS là gì ?
  • Có nên dùng nhiều callback lồng nhau (callback hell) ?
  • Cách handle exception
  • Observation là gì?

ReactJS

  • Các project mình dùng starter kit nào không?
  • Virtual DOM là gì và cơ chế hoạt động như nào?
  • Data binding theo mấy chiều?

Hỏi về Testing

  • Có nên sử dụng các công cụ Lint Style hay không? Tại sao?
  • Có nên áp dụng unit test hay không ?
  • Bạn có biết về TDD không ? nêu thử 1 vài framework ?

Hỏi về Performance

  • Bạn hay xài công cụ nào để kiểm tra lỗi về hiệu suất tải trên trình duyệt?
  • Giải thích sự khác nhau giữa layout, painting và compositing.
  • Lazyload javascript

Hỏi về Network

  • Tại sao lưu resource (js/css/…) trên nhiều domain sẽ tốt hơn?
  • Sự khác nhau giữa Long-Polling, Websockets và Server-Sent?
  • Giải thích ý nghĩa của mấy cái HTTP Header sau:
    • Diff. between Expires, Date, Age and If-Modified-…
    • Do Not Track
    • Cache-Control
    • Transfer-Encoding
    • ETag
    • X-Frame-Options
  • HTTP action là gì?
  • Phân biệt các method HTTP(khi nào thì dùng nó).

Hỏi về Coding

Hỏi: foo có giá trị là bao nhiêu?

var foo = 10 + '20';

Hỏi: Viết hàm add để thực hiện được câu lệnh sau:

add(2, 5); // 7
add(2)(5); // 7

Hỏi: Kết quả trả về của hàm lệnh sau là gì?

"i'm a developer".split("").reverse().join("");

Hỏi: Giá trị của window.foo là gì?

( window.foo || ( window.foo = "bar" ) );

Hỏi: Kết quả của 2 lệnh alert là gì?

var foo = "Hello";
(function() {
  var bar = " World";
  alert(foo + bar);
})();
alert(foo + bar);

Hỏi: Giá trị của foo.length trong trường hợp sau?

var foo = [];
foo.push(1);
foo.push(2);

Hỏi: Giá trị của foo.x trong trường hợp sau?

var foo = {n: 1};
var bar = foo;
foo.x = foo = {n: 2};

Hỏi: Các lệnh sau sẽ in ra console cái gì?

console.log('one');
setTimeout(function() {
  console.log('two');
}, 0);
console.log('three');

Hỏi: Các lệnh sau sẽ in ra console cái gì?

baz = function() {
 return "some thing cool";
}
foo = false;
console.log (foo && baz());
console.log (foo || baz());

Hỏi: Cho var string = ['1','3','4','10','2','5','9','7','8','6'] in ra kết quả sau

10 9 8 7
6 5 4 
3 2 
1

Hỏi chơi cho vui

  • Những dự án nào mà bạn cho là thú vị đã từng làm qua?
  • Bạn hay sử dụng các công cụ (tools) nào?
  • Bạn thích tính năng nào của Internet Explorer nhất?
  • Bạn cho biết cách để đo thời gian chạy của một đoạn code javascript, chính xác tới ms?
  • Cho 8 viên bi trong đó có 7 viên cùng khối lượng và 1 viên còn lại nặng hơn ?
  • Cho 1 cái cân -|- (kiểu vậy). Làm sao để tìm viên bi nặng hơn nhanh nhất ?
  • Cho 2 sợi dây. Đốt 2 sợi dây đó thì mất 1 tiếng. Hỏi trong 45 phút thì làm sao có thể đốt được 2 sợi dây đó.
Tuyển tập câu hỏi phỏng vấn Front-end
5 (100%) 4 votes
Hai thẻ thay đổi nội dung bên dưới.
Chia sẻ kiến thức, kinh nghiệm liên quan đến lập trình và thiết kế website là niềm vui của mình. Nếu có câu hỏi hay thắc mắc làm thế nào để làm website bán hàng, giới thiệu công ty thì liên hệ mình nhé. SĐT 01632 434 165, Mình sẽ hỗ trợ hết sức có thể. Thân Ái và Quyết Thắng

Ý kiến của bạn

Call Now