Phỏng vấn Middle - Senior Frontend có gì?
Anh em có biết điều gì khiến một developer giỏi lại có thể thất bại trong phỏng vấn không? Không phải vì họ không biết code. Không phải vì họ thiếu kinh nghiệm với React. Mà chính là vì họ tập trung sai trọng tâm!
Phần lớn các cuộc phỏng vấn không thực sự kiểm tra kỹ năng viết code của anh em (có thể một số công ty có coding interview). Thay vào đó, các câu hỏi sẽ đào sâu vào những thứ mà hầu hết developer junior và mid-level thường bỏ qua trong công việc hàng ngày - những kiến thức về performance, optimization, security.
Và đó chính là lý do tại sao nhiều developer xịn xò vẫn thất bại.
Hôm nay, Sydexa sẽ chia sẻ 6 câu hỏi xuất hiện nhiều nhất - những câu hỏi có thể quyết định bạn có được offer cao và có cái tết ấm hay không, bắt đầu thôi!
Ngoài ra nếu muốn đào sâu hơn nữa, học các kiến thức chuyên sâu hơn từ giảng viên là chuyên gia có hơn 10 năm kinh nghiệm frontend và từng là kỹ sư tại Shopee Singapo thì bạn có thể tham khảo khoá học React Nâng Cao bên dưới của Sydexa nha!
Sydexa Team
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 đề
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ó!
Ngoài ra nếu muốn đào sâu hơn nữa, học các kiến thức chuyên sâu hơn từ giảng viên là chuyên gia có hơn 10 năm kinh nghiệm frontend và từng là kỹ sư tại Shopee Singapo thì bạn có thể tham khảo khoá học React Nâng Cao bên dưới của Sydexa nha!
Sydexa Team
