Quay lại danh sách case study
Tối ưu hiệu suất hiển thị danh sách dài bằng kỹ thuật ảo hóa
Giải pháp giải quyết tình huống trang web giật lag khi render danh sách hàng nghìn dòng dữ liệu.
Bối cảnh
Hệ thống quản trị admin của một công ty logistics cần hiển thị bảng danh sách lịch sử vận đơn gồm hơn năm nghìn dòng dữ liệu trong một trang duy nhất.
Vấn đề cần xử lý
Trình duyệt bị treo và giật lag nghiêm trọng (jank) do DOM phải gánh quá nhiều phần tử HTML cùng lúc.
Hướng xử lý đề xuất
Áp dụng kỹ thuật ảo hóa danh sách (virtualization), chỉ render những dòng dữ liệu hiển thị trong khung nhìn (viewport) của người dùng.
Câu trả lời mẫu khi phỏng vấn
Dạ thưa anh, khi render hàng nghìn phần tử DOM, trình duyệt sẽ bị nghẽn ở bước layout và paint. Để giải quyết, em đề xuất sử dụng thư viện hỗ trợ ảo hóa danh sách như react-window hoặc tự xây dựng logic tính toán vị trí cuộn. Cách này giúp DOM chỉ giữ lại khoảng vài chục phần tử thực tế đang hiển thị trên màn hình, giúp trang chạy mượt mà ở mức 60 khung hình trên giây.
Trade-off
Code phức tạp hơn một chút vì phải tính toán chiều cao động của từng dòng và vị trí cuộn thanh cuộn, nhưng đổi lại hiệu suất ứng dụng tăng lên vượt bậc.
Kết quả kỳ vọng
Bảng dữ liệu hoạt động mượt mà, thời gian tải trang ban đầu giảm hẳn và không còn hiện tượng đơ trình duyệt.
Bài học khi trả lời phỏng vấn
Không bao giờ render trực tiếp danh sách dữ liệu quá lớn lên DOM mà phải luôn nghĩ đến các giải pháp phân trang hoặc ảo hóa.