Quay lại danh sách case study
Toi ưu hieu nang su kien Scroll
Tối ưu hóa sự kiện cuộn trang (scroll event) để tránh làm giật lag giao diện người dùng trên thiết bị di động.
Bối cảnh
Em xây dựng một tính năng vô hạn (infinite scroll) hoặc nút 'Lên đầu trang' dựa vào sự kiện window.onscroll.
Vấn đề cần xử lý
Hàm xử lý sự kiện scroll chạy liên tục hàng chục lần mỗi giây khi người dùng cuộn chuột, gây nghẽn luồng chính và tụt FPS.
Hướng xử lý đề xuất
Áp dụng kỹ thuật Debouncing hoặc Throttling để giới hạn tần suất thực thi của hàm xử lý sự kiện.
Câu trả lời mẫu khi phỏng vấn
Dạ thưa anh, em nhận thấy sự kiện scroll gọi callback quá nhiều lần gây tốn tài nguyên. Do đó em đã áp dụng hàm Throttle để đảm bảo cứ sau mỗi khoảng thời gian ví dụ 200ms thì hàm xử lý mới được gọi một lần, giúp giao diện mượt mà hơn rất nhiều ạ.
Trade-off
Sử dụng throttle làm giảm độ mượt phản hồi theo thời gian thực một chút, vì hành động của người dùng bị gom nhóm lại theo khoảng thời gian cố định.
Kết quả kỳ vọng
Hiệu năng trang web cải thiện rõ rệt, không bị đơ giật khi người dùng cuộn trang nhanh.
Bài học khi trả lời phỏng vấn
Nắm vững các kỹ thuật performance như debounce và throttle là điểm cộng lớn cho vị trí Frontend Intern.