Quay lại danh sách case study
Tối ưu hóa hiệu năng render cho trang thương mại điện tử lớn
Giải pháp xử lý danh sách sản phẩm dài hàng nghìn dòng gây nghẽn giao diện trên thiết bị di động tầm trung.
Bối cảnh
Dự án thương mại điện tử có lượng truy cập lớn tại Việt Nam gặp tình trạng giật lag nghiêm trọng khi người dùng cuộn trang danh sách sản phẩm có hơn hai nghìn mục.
Vấn đề cần xử lý
Trình duyệt phải render toàn bộ DOM nodes cùng lúc, dẫn đến thời gian tính toán layout và paint vượt quá ngưỡng chịu đựng, làm chỉ số Interaction to Next Paint rất cao.
Hướng xử lý đề xuất
Áp dụng kỹ thuật ảo hóa danh sách (virtualization) chỉ render các item hiển thị trong khung nhìn viewport, kết hợp debouncing sự kiện cuộn trang.
Câu trả lời mẫu khi phỏng vấn
Khi đối mặt với bài toán này ở dự án trước, tôi đã phân tích bằng Chrome DevTools và nhận ra nghẽn cổ chai nằm ở số lượng DOM node quá lớn. Giải pháp tôi đề xuất là triển khai thư viện ảo hóa như react-window hoặc tự viết thành phần virtualization nhẹ bằng vanilla JavaScript. Qua đó, số lượng DOM node được giữ cố định khoảng hai mươi phần tử, giúp cải thiện hiệu năng cuộn mượt mà đạt chuẩn 60fps.
Trade-off
Việc ảo hóa làm phức tạp hơn trong việc hỗ trợ các item có chiều cao động (dynamic height) và gây khó khăn cho tính năng tìm kiếm văn bản trong trang (Ctrl+F).
Kết quả kỳ vọng
Giảm thời gian tải ban đầu xuống năm mươi phần trăm và loại bỏ hoàn toàn hiện tượng giật lag trên các thiết bị di động cấu hình thấp.
Bài học khi trả lời phỏng vấn
Không nên render vô hạn dữ liệu lên DOM mà phải luôn áp dụng tư duy phân trang hoặc ảo hóa từ giai đoạn thiết kế kiến trúc.