7.1K 422 40

Đã đăng vào Thứ Năm, 4:23 SA 11 phút đọc

1.0K

Phỏng vấn Middle - Senior Frontend có gì?

1. Sự khác biệt giữa cookies, localStorage và sessionStorage là gì?

Đơn giản phải không? Nhưng đây là lúc phân biệt giữa một developer thực sự hiểu sâu và một người chỉ biết sử dụng

Cookies giống như chiếc ví nhỏ trong túi quần - chỉ chứa được 4KB, nhưng lại theo bạn đi khắp nơi. Mỗi lần bạn giao tiếp với server, cookies được gửi kèm theo. Đó là lý do chúng hoàn hảo cho authentication tokens.

LocalStorage như chiếc tủ trong nhà bạn - chứa được nhiều hơn rất nhiều (5-10MB), tồn tại vĩnh viễn cho đến khi bạn xóa. Các cấu hình Dark mode ? Các User settings? Và những lúc đó LocalStorage là thứ bạn hãy nghĩ đến

SessionStorage là chiếc balo tạm thời - mang theo trong suốt chuyến đi (browser session), nhưng biến mất khi bạn đóng tab. Hoàn hảo cho form data tạm thời mà bạn không muốn user mất khi vô tình refresh trang.

2. "Làm sao để App của anh load nhanh hơn em nhỉ?" - Câu Hỏi Tách Biệt Junior và Senior

Với những câu hỏi này, một senior không chỉ biết câu trả lời - họ có đúc kết từ kinh nghiệm để có một hệ thống check list.

Hãy nhớ hoặc lưu lại Video này để thuộc nằm lòng nhé:

Bước 1: Polyfill - "Chúng ta cần hỗ trợ cả những browser cũ, nhưng vẫn muốn dùng features hiện đại". Polyfill hoạt động bằng cách detect browser capabilities và inject fallback code khi cần thiết.

Bước 2: Compression - "Gzip có thể giảm 70% payload. Đó là 70% thời gian loading được tiết kiệm!"

Bước 3: Minification & Uglification - "Biến code dễ đọc thành code máy hiểu - nhỏ hơn, nhanh hơn"

Quá trình Minification rút gọn code sẽ xóa hết khoảng trắng và chú thích trong code. Còn quá trình Uglification thì đổi tên biến dài thành ký tự đơn (ví dụ hàm getUserName sẽ thành chữ a), loại bỏ những đoạn code không dùng đến, và nhúng luôn những hàm đơn giản vào trong code

Bước 4: Code Splitting - "User không cần toàn bộ app ngay lập tức. Ship những gì cần thiết trước"

Ví dụ thực tế: admin dashboard chỉ được load khi admin user login

Bước 5: Tree Shaking - "Tại sao ship cả library khi bạn chỉ dùng 2 functions?" Với chuẩn module ES6, công cụ đóng gói có thể phân tích tĩnh code của bạn và tự động loại bỏ những phần không được sử dụng.

Tree Shaking" (rung cây) - hãy tưởng tượng code của bạn như một cây xoài, bạn chỉ cần 2 quả chín, nhưng thay vì hái cả cây về nhà, bạn rung nhẹ để những quả không cần thiết rụng đi, chỉ giữ lại những quả bạn thực sự dùng

Và đó là 5 bước cơ bản hãy nghĩ đến khi cần tối ưu tốc độ load một web bất kỳ

3. Optimize Hình Ảnh Lớn Trong E-Commerce

Bạn có 50 ảnh sản phẩm, mỗi cái 5MB. Làm sao để trang load nhanh mà vẫn giữ chất lượng?

Đây là lúc chứng tỏ bạn không phải chỉ là thợ code

Hãy nhớ những đầu mục sau:

Kích thước ảnh: Đừng ship ảnh 3000px chỉ để để hiển thị ở 800px
Để ý đến Format ảnh: Bạn có biết với định dạng WebP giảm kích thước 25-35% so với JPEG không?
Lazy loading thông minh: Load on scroll, nhưng phải đặt sẵn chiều rộng và chiều cao cho ảnh để tránh tình trạng layout bị dịch chuyển khi ảnh load xong.
CDN là vua: Ảnh được phân phối từ máy chủ biên gần người dùng nhất, có thể giảm độ trễ từ 200 mili giây xuống còn 20 mili giây. Các dịch vụ CDN hiện đại như Cloudinary còn cung cấp khả năng biến đổi ảnh ngay lập tức - tự động thay đổi kích thước, cắt ảnh, chuyển đổi định dạng dựa trên thiết bị của người dùng.

Responsive Images: Hãy ship ảnh khác nhau cho mobile vs desktop, Mobile nhận ảnh nhỏ, desktop nhận ảnh lớn

4. Code Quality - Đảm bảo chất lượng dự án

Khi được hỏi về việc đảm bảo chất lượng code trong dự án lớn hãy nhớ những check list sau:

Linter & Prettier: Đồng nhất style, bắt lỗi sớm. ESLint bắt lỗi logic, Prettier xử lý định dạng - cả nhóm không lãng phí thời gian anh em trah cãi nhau về dùng tab hay dấu cách

Unit & E2E Tests: Kiểm thử đơn vị với Jest hoặc Vitest cho logic nghiệp vụ, kiểm thử đầu cuối với Playwright

Quét các Dependency: Thư mục node_modules có thể chứa hàng nghìn gói - mỗi gói là một rủi ro bảo mật tiềm ẩn. Các công cụ như npm audit, Snyk liên tục giám sát và cảnh báo về các lỗ hổng.

Kiểm tra khả năng tiếp cận của trang: Kiểm thử với trình đọc màn hình và điều hướng bàn phím đảm bảo ứng dụng ai cũng dùng được.

Lighthouse CI: Giúp phát hiện ngay khi hiệu năng bị giảm - không cần đợi người dùng phàn nàn.

5. XSS Attack Là Gì? Làm Sao Phòng Chống?

Ví dụ ai đó comment một đoạn code JavaScript code trên Facebook post của bạn. Khi người khác xem comment đó, code được thực thi, gửi password của họ về cho hacker." đó chính là XSS Attack

Vậy phòng chống như nào?

Sanitize mọi input: Không tin tưởng bất kỳ data nào từ user, làm sạch data trước khi lưu Tránh dùng dangerouslySetInnerHTML: React đặt tên như vậy là có lý do đó! CSP Headers: Lớp phòng thủ cuối cùng - báo cho trình duyệt chỉ chạy mã từ nguồn tin cậy, Ngay cả khi kẻ tấn công chèn được mã độc, trình duyệt sẽ từ chối thực thi

<meta http-equiv="Content-Security-Policy" content="script-src 'self'">

Nhưng đây là điều nhiều developer không biết - Framework của bạn đã bảo vệ bạn rồi! chúng tự động escape mọi content bạn render.

Khi bạn viết:

<div>{userInput}</div>

React âm thầm biến mọi thứ nguy hiểm thành vô hại.

Những ký tự như <, >, & được escape tự động. User có thể nhập <script>alert('hack')</script> thoải mái - nó sẽ hiển thị như text thuần túy, không thực thi. Đó là lớp bảo vệ mặc định mạnh mẽ.

Hãy nhớ chỉ bypass lớp bảo vệ này của React (như dùng dangerouslySetInnerHTML) khi THỰC SỰ cần thiết và bạn đã làm sạch data kỹ càng bạn nhé

6. CDN - Người Hùng Thầm Lặng

User ở Việt Nam không cần lấy các tài nguyên như ảnh, file js từ server ở Mỹ - họ lấy từ Singapore, gần hơn, nhanh hơn.

User ở Việt Nam khi muốn tải tài nguyên
DNS chỉ dẫn request đến edge server gần nhất (ví dụ ở Ngay đống đa)
Edge server đã có sẵn tài nguyên đã được cache sẵn

Và kết quả là thời gian tải tài nguyên nhanh hơn nhiều lần

Lời nói cuối

Sau tất cả những câu hỏi kỹ thuật, điều làm nên sự khác biệt không phải là bạn biết bao nhiêu, mà là cách bạn tư duy để giải quyết vấn đề

Junior nghĩ về features.

Mid-level nghĩ về code quality.

Senior nghĩ về trade-offs và impact

Công ty sẽ không tuyển người biết nhiều nhất về React. Họ tuyển người có thể giải quyết vấn đề thực tế, người hiểu rằng mỗi quyết định kỹ thuật đều có giá của nó!!!

Nếu thấy hay thì cho mình xin một bookmark ở phía bên trái để bài viết đến được nhiều người hơn nha

Chúng mình có tạo Group cho các bạn cùng chia sẻ và học hỏi về frontend nâng cao, các câu phỏng vấn khó nha 😄😄😄

Các bạn tham gia để gây dựng cộng đồng Frontend Việt Nam thật lớn mạnh nhé 😍😍😍

Cộng Đồng Frontend Nâng Cao Việt Nam: https://www.facebook.com/groups/seniorfrontendvietnam

Kênh TikTok: https://www.tiktok.com/@sydexa.com

Kênh youtube: https://www.youtube.com/@sydexa.official

basic reactjs frontend Coding phong van frontend build react