Tối ưu hiệu năng danh sách vô hạn (Infinite Scroll)

Áp dụng kỹ thuật ảo hóa danh sách (Virtual List), chỉ render các item hiển thị trong vùng nhìn thấy của khung nhìn (viewport) và tái sử dụng DOM node.

Để xử lý danh sách lớn hàng chục ngàn dòng mà không giật lag, em không render toàn bộ DOM mà áp dụng kỹ thuật virtualization. Em tính toán chiều cao của container, vị trí cuộn hiện tại để chỉ render những item nằm trong viewport cộng thêm một khoảng đệm nhỏ. Khi user cuộn, các phần tử khuất sẽ được tái sử dụng để hiển thị dữ liệu mới.

Code phức tạp hơn khi tính toán động chiều cao của các dòng có nội dung co giãn linh hoạt và khó hỗ trợ tính năng tìm kiếm toàn văn bản trong trình duyệt.

Giảm số lượng DOM node từ 10.000 xuống chỉ còn khoảng 30-50 node, giữ FPS luôn ổn định ở mức 60.

Hiệu năng DOM là nút thắt cổ chai lớn nhất trong Frontend; kiểm soát số lượng DOM node là chìa khóa để ứng dụng mượt mà.