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

CyberSoft Academy 15 Tháng Mười Hai, 2017 Lập Trình Front End Leave a comment 13,296 Views

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

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?
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?
CORS?
Bạn đã học được gì trong ngày hôm qua/tuần này??
Điều gì về lập trình làm bạn hứng thú?
Một thử thách về mặt kĩ thuật bạn đã trải qua gần đây là gì và bạn đã giải quyết nó như thế nào?
Bạn cân nhắc những Giao diện người dùng (UI), Vấn đề bảo mật (Security), Hiệu suất (Performance), Khả năng tối ưu cho các bộ máy tìm kiếm (SEO), Khả năng bảo trì (Maintainability) hay Công nghệ (Technology) nào khi xây dựng một ứng dụng/trang web?
Hãy nói về môi trường lập trình mà bạn muốn.
Những hệ thống quản lý phiên bản (version control systems) nào mà bạn đã sử dụng và cảm thấy quen thuộc?
Bạn có thể trình bày mạch làm việc (workflow) của bạn khi bạn tạo một trang web không?
Nếu bạn có 5 stylesheet khác nhau, bạn sẽ tích hợp chúng vào trang như thế nào là tốt nhất?
Bạn có thể trình bày sự khác nhau giữa progressive enhancement và graceful degradation không?
Bạn sẽ tối ưu các tài nguyên (assets/resources) của một website như thế nào?
Một trình duyệt sẽ tải bao nhiêu tài nguyên cùng một lúc từ một tên miền (domain) cho trước?
Các exception là gì?
Nêu 3 cách để giảm tải trang web (perceived hoặc thời gian tải thực tế (actual load time)).
Nếu bạn tham gia vào một dự án và họ xài nút Tab trong khi bạn sử dụng nút dấu cách (spaces), bạn sẽ làm gì?
Trình bày cách bạn sẽ làm một trang slideshow đơn giản.
Nếu bạn có thể chuyên sâu về một công nghệ (technology) trong năm nay thì nó sẽ là công nghệ gì?
Giải thích tầm quan trọng của các standards và standards bodies.
Flash of Unstyled Content là gì? Bạn tránh FOUC như thế nào?
Giải thích ARIA và screenreaders là gì, và làm thế nào để làm cho một trang web có thể truy cập được.
Giải thích một vài ưu và khuyết điểm của CSS animations so với JavaScript animations.
CORS là từ viết tắt của cái gì và nó đề cập đến vấn đề nào?

Hỏi về HTML

Tác dụng của doctype?
Khác nhau giữa HTML và XHTML là gì?
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ữ?
Thuộc tính data- dùng để làm gì?
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 cookie, sessionStorage 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ì?
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?
* Điểm khác biệt giữa class và ID trong CSS là gì?
Sự khác nhau giữa “resetting” và “normalizing” CSS là gì? Bạn sẽ chọn cái nào, và tại sao
Trình bày về Floats và cách chúng hoạt động.
Trình bày về z-index và làm thế nào để nội dung stack với nhau được định hình.
Trình bày về BFC (Block Formatting Context) và cách nó hoạt động.
Các kĩ thuật clearing khác nhau là những kĩ thuật nào và phù hợp với hoàn cảnh nào?
Giải thích về CSS sprites, và làm thế nào để bạn thực hiện chúng trên một trang web.
Những kĩ thuật thay thế hình ảnh nào mà bạn thích và bạn sử dụng từng kĩ thuật đó khi nào?
Bạn sẽ tiếp cận như thế nào để khắc phục các vấn đề về trình bày trên một trình duyệt cụ thể?
Bạn sẽ cung cấp các trang của bạn trên các trình duyệt hạn chế tính năng như thế nào?

Bạn sẽ sử dụng kĩ thuật hay quy trình nào?

* Những cách khác nhau nào để ẩn giấu 1 element một cách trực quan (và làm cho chúng chỉ hiển thị với người đọc qua màn hình)?
* Bạn đã bao giờ sử dụng một hệ thống grid chưa, và nếu có, bạn thích cái nào hơn?
* Bạn đã bao giờ sử dụng các media queries hay các layout/CSS cụ thể cho mobile chưa?
* Bạn có quen với việc trình bày/tạo dáng cho SVG?
* Bạn tối ưu các trang web cho việc in ấn như thế nào?
* Một vài điểm kiểu “A đây rồi” trong việc viết CSS hiệu quả?
* Các ưu/khuyết điểm của việc sử dụng các CSS preprocessors?
* Trình bày những điểm bạn thích và không thích về các CSS preprocessors mà bạn đã sử dụng.
* Bạn sẽ thực hiện thách thức trong các thiết kế web có sử dụng các font không phải tiêu chuẩn (non-standard fonts) như thế nào?
* Giải thích cách mà một trình duyệt quyết định những element nào tương ứng với một CSS selector.
* Trình bày về các pseudo-elements và thảo luận xem chúng dùng để làm gì.
* Giải thích những hiểu biết của bạn về box model và làm thế nào bạn báo với trình duyệt trong CSS để render layout của bạn trong các box models khác nhau.
* Đoạn code này “`* { box-sizing: border-box; }“` sẽ làm điều gì? Những ưu điểm của nó là gì?
* Liệt kê các giá trị của thuộc tính `display` mà bạn có thể nhớ.
* Sự khác nhau giữa inline và inline-block là gì?
* Sự khác nhau giữa một thành phần có thuộc tính `position` với giá trị: relative, fixed, absolute, hoặc có vị trí tĩnh (statically positioned element)?
* Chữ cái ‘C’ trong CSS là viết tắt của từ Cascading. Mức độ ưu tiên được xác định trong việc gán style như thế nào (cho vài ví dụ)? Bạn có thể tận dụng hệ thống này như thế nào?
* Những framework CSS nào bạn đã sử dụng trên máy của bạn, hoặc trong sản phẩm nào đó? Bạn sẽ thay đổi/cải tiến chúng như thế nào?
* Bạn có bao giờ sử dụng CSS Flexbox hay Grid chưa?
* Responsive design khác adaptive design như thế nào?
* Bạn có bao giờ làm việc với các thiết bị màn hình retina chưa? Nếu có, bạn đã sử dụng khi nào và dùng những kĩ thuật nào?
* Có những lý do nào bạn muốn sử dụng `translate()` hơn thay vì *absolute positioning* không, hoặc ngược lại? Và tại sao?

Hỏi về Javascript

Ý nghĩa của biến this.
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 null, undefined 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ì? giải thích
ES6 Function* là gì? giải thích
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) ?
* Giải thích về event delegation
* Giải thích cách mà `this` hoạt động trong JavaScript
* Giải thích cách mà prototypal inheritance hoạt động
* Bạn nghĩ gì về AMD so với CommonJS?
* Giải thích tại sao đoạn code sau không hoạt động như một IIFE: `function foo(){ }();`.
* Cần thay đổi gì để làm nó trở thành một IIFE?
* Sự khác nhau giữa một biến: chứa `null`, chứa `undefined` hoặc chưa được khai báo (undeclared) là gì?
* Bạn sẽ kiểm tra các trạng thái này như thế nào?
* Một closure là gì, và bạn sẽ sử dụng nó như thế nào / tại sao bạn sử dụng nó?
* Một trường hợp sử dụng điển hình cho các anonymous functions?
* Bạn tổ chức code của bạn như thế nào? (module pattern, classical inheritance?)
* Sự khác nhau giữa host objects và native objects là gì?
* Nêu sự khác nhau giữa: `function Person(){}`, `var person = Person()`, và `var person = new Person()`?
* Sự khác nhau giữa `.call` và `.apply` là gì?
* Giải thích về `Function.prototype.bind`.
* Bạn sẽ sử dụng `document.write()` khi nào?
* Sự khác nhau giữa feature detection, feature inference, và việc sử dụng UA string là gì?
* Giải thích về Ajax bằng nhiều thông tin chi tiết nhất có thể.
* Những ưu và khuyết điểm của việc sử dụng Ajax là gì?
* Giải thích cách JSONP làm việc (và nó thật sự không phải là Ajax như thế nào).
* Bạn đã bao giờ sử dụng JavaScript templating chưa?
* Nếu có, bạn đã sử dụng những thư viện nào?
* Giải thích về “hoisting”.
* Trình bày về event bubbling.
* Trình bày sự khác nhau giữ một “attribute” và một “property”?
* Tại sao việc mở rộng các object được xây dựng sẵn trong JavaScript không phải là một ý tưởng tốt?
* Sự khác nhau giữa event `load` và event `DOMContentLoaded` của document?
* Sự khác nhau giữa `==` and `===` là gì?
* Giải thích về same-origin policy và sự liên quan của nó với JavaScript.
* Làm cho hàm này hoạt động:
“`javascript
duplicate([1,2,3,4,5]); // [1,2,3,4,5,1,2,3,4,5]
“`
* Tại sao lại gọi là Ternary expression, từ “Ternary” có nghĩa gì?
* `“use strict”;` là gì? Những điểm lợi và hại khi sử dụng nó?
* Tạo một vòng lặp `for` cho output từ `1` đến `100`, trong đó output **”fizz”** thay cho số chia hết cho `3`, **”buzz”** thay cho số chia hết cho `5` và **”fizzbuzz”** thay cho số chia hết cho cả `3` và `5`.
* Tại sao, nói chung, việc không làm ảnh hưởng đến global scope của một website là một điều tốt?
* Tại sao bạn sẽ không sử dụng những thứ như event `load`? Event này có điểm bất lợi nào không? Bạn có biết cách thay thế nào khác, và tại sao bạn sẽ sử dụng chúng?
* Giải thích một ứng dụng đơn trang (single page app) là gì và làm sao để làm chúng thân thiện với việc SEO.
* Mức độ trải nghiệm của bạn là như thế nào đối với các Promise và/hoặc polyfills của chúng?
* Những điểm lợi và hại của việc sử dụng các Promise thay cho các callback?
* Nêu một vài ưu và khuyết điểm của việc viết code JavaScript trong một ngôn ngữ mà sẽ dùng để biên dịch thành JavaScript.
* Bạn sử dụng những công cụ và kỹ thuật nào để gỡ lỗi (debug) cho JavaScript?
* Bạn sử dụng những cấu trúc nào để lặp xuyên suốt qua tất cả các thuộc tính (property) trong object và các item trong array?
* Giải thích sự khác nhau giữa các mutable object và immutable object.
* Nêu ví dụ cho một immutable object trong JavaScript?
* Những ưu/khuyết điểm của tính bất biến (immutability)?
* Làm thế nào để đạt được tính bất biến trong code của bạn?
* Giải thích sự khác nhau giữa các hàm đồng bộ (synchronous function) và hàm không đồng bộ (asynchronous function).
* Event loop là gì?
* Sự khác biệt giữa call stack và task queue là gì?
* Giải thích sự khác nhau trong các cách sử dụng `foo` sau đây: giữa `function foo() {}` và `var foo = function() {}`
* Sự khác biệt giữa các biến được tạo bằng việc sử dụng `let`, `var` hoặc `const` là gì?

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 ?
* Vài điểm lợi và bất lợi trong việc kiểm thử code của bạn là gì?
* Bạn sẽ sử dụng những công cụ nào để kiểm thử chức năng của code của bạn?
* Sự khác nhau giữa một unit test và một functional/integration test là gì?
* Mục đích của một công cụ kiểm tra code style (code style linting tool) là gì?

Hỏi về Performance

* Bạn sử dụng những công cụ nào để tìm ra một lỗi hiệu suất trong code của bạn?
* Chỉ ra vài cách mà bạn có thể cải thiện hiệu suất cuộn trang (scrolling performance) trên website của bạn?
* Giải thích sự khác nhau giữa layout, painting và compositing.
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.

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ó).
* Theo truyền thống, tại sao việc cung cấp các tài nguyên của trang web từ nhiều tên miền khác nhau là việc có lợi hơn?
* Hãy trình bày một cách toàn diện nhất quá trình từ lúc bạn nhập vào URL của một trang web đến khi nó hoàn thành việc tải và hiện thị trên màn hình của bạn.
* Những điểm khác nhau giữa Long-Polling, Websockets và Server-Sent Events?
* Giải thích các request header và response header sau:
* Sự khác nhau giữa Expires, Date, Age và If-Modified-…
* Do Not Track
* Cache-Control
* Transfer-Encoding
* ETag
* X-Frame-Options
* Các HTTP methods là gì? Liệt kê tất cả HTTP methods mà bạn biết, và giải thích chúng.

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

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 đó.

Nguồn: Lê Văn Duyệt.

Bình luận

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

Related Articles