Giới Thiệu
Nhân dịp năm mới Giáp Thìn 2024, chúc các bạn một năm mới an khang, thịnh vượng và tràn đầy hạnh phúc! Năm mới là thời điểm tuyệt vời để ôn lại kiến thức Front End và chuẩn bị cho các cơ hội mới. Hãy cùng khám phá một số câu hỏi phỏng vấn thú vị về Front End mà mình đã sưu tầm nhé!
Lĩnh Vực JavaScript
Câu Hỏi 1: Debounce và Throttle trong JavaScript là gì và khác nhau như thế nào?
Giải thích: Trong JavaScript, Debounce và Throttle là hai kỹ thuật được sử dụng để kiểm soát số lần thực thi hàm trong một khoảng thời gian nhất định nhằm tối ưu hiệu suất ứng dụng.
- Debounce: Chỉ thực thi hàm sau khi một khoảng thời gian nhất định trôi qua mà không có lời gọi nào khác. Điều này rất hữu ích trong việc giảm số lần xử lý không cần thiết.
javascript
function debounce(func, wait) {
let timeout;
return function() {
const context = this, args = arguments;
clearTimeout(timeout);
timeout = setTimeout(() => func.apply(context, args), wait);
};
}- Throttle: Giới hạn số lần thực thi hàm không quá một lần trong mỗi khoảng thời gian xác định. Thích hợp cho các hành động cần cập nhật thường xuyên mà không bị quá tải.
javascript
function throttle(func, limit) {
let inThrottle;
return function() {
const context = this, args = arguments;
if (!inThrottle) {
func.apply(context, args);
inThrottle = true;
setTimeout(() => inThrottle = false, limit);
}
};
}Điểm Khác Biệt:
- Debounce thực thi khi không có hoạt động nào trong khoảng thời gian đã chỉ định; Throttle thực hiện giới hạn tần suất một hàm trong khoảng thời gian xác định.
Câu Hỏi 2: Phân biệt setTimeout, Promise và Async/Await?
Giải thích: Đây là những cơ chế xử lý bất đồng bộ trong JavaScript:
- setTimeout: Thiết lập một timer để gọi một hàm sau thời gian đã chỉ định.
- Promise: Đại diện cho kết quả của một hoạt động bất đồng bộ, với các trạng thái như pending, fulfilled, hoặc rejected.
- Async/Await: Cú pháp giúp làm việc với các Promise một cách dễ dàng hơn, gần giống với mã đồng bộ.
Câu Hỏi 3: ['1','2','3'].map(parseInt) trả về kết quả gì và lý do?
Giải thích: Kết quả là [1, NaN, NaN]. Điều này do cách thức hoạt động của map và tham số thứ hai (chỉ số) mà parseInt nhận được từ map.
Câu Hỏi 4: Giải thích nguyên nhân dẫn tới fetch gửi 2 request với request đầu trả về status code 204?
Giải thích: Đó là một phần của quy trình kiểm tra CORS, bao gồm một yêu cầu preflight (OPTIONS) trước khi gửi yêu cầu thực.
Lĩnh Vực HTTP/HTTPS và Trình Duyệt
Câu Hỏi 5: Trình duyệt xác minh tính hợp lệ của chứng chỉ SSL/TLS như thế nào?
Giải thích: Quá trình này bao gồm việc kiểm tra thời hạn, xác minh chữ ký, kiểm tra chuỗi tin cậy và đảm bảo tên miền khớp với chứng chỉ.
Câu Hỏi 6: Ưu và nhược điểm của việc sử dụng thẻ img, iframe, script để gửi yêu cầu cross-domain?
Thẻ img:
- Ưu điểm: Đơn giản, tương thích rộng rãi, không bị chính sách Same-Origin.
- Nhược điểm: Chỉ hỗ trợ GET, không thể xử lý dữ liệu trả về.
Thẻ iframe:
- Ưu điểm: Tích hợp nội dung phức tạp, hỗ trợ nhiều loại nội dung.
- Nhược điểm: Vấn đề giao tiếp và bảo mật.
Thẻ script:
- Ưu điểm: Thực thi mã JavaScript từ domain khác, tương thích rộng rãi.
- Nhược điểm: JSONP có thể gặp rủi ro bảo mật.
Câu Hỏi 7: Phân biệt HTTP và HTTPS?
Giải thích: HTTP là giao thức truyền tải thông tin mà không mã hóa, trong khi HTTPS sử dụng giao thức SSL/TLS để mã hóa dữ liệu.
Câu Hỏi 8: Phân biệt Cookie, sessionStorage và localStorage?
Giải thích: Mỗi phương thức có mục đích và phương thức lưu trữ khác nhau:
- Cookie: Lưu trữ dữ liệu phiên, gửi cùng yêu cầu HTTP.
- sessionStorage: Lưu trữ tạm thời trong phiên duyệt, không gửi đi.
- localStorage: Lưu trữ dữ liệu lâu dài, không có thời gian hết hạn.
Câu Hỏi 9: Ngăn chặn tấn công XSS cho cookie bằng các flag nào?
Giải thích: Sử dụng các cờ HttpOnly, Secure và SameSite để tăng cường bảo mật cho cookie, giảm thiểu nguy cơ bị tấn công.
Kết Luận
Bài viết trên đã giúp bạn ôn lại kiến thức cơ bản về Front End thông qua các câu hỏi phỏng vấn. Hãy tiếp tục học hỏi và thực hành để nâng cao kỹ năng lập trình của mình!
source: viblo
