Trung BìnhReact iconReact

Cách optimize infinite scroll list. Giải thích virtual scrolling concept.

Virtual scrolling là kỹ thuật chỉ render những item đang hiển thị trong viewport, còn những item ngoài tầm nhìn sẽ bị loại khỏi DOM.

  • Nhờ vậy dù danh sách có hàng chục ngàn item, trình duyệt chỉ cần xử lý vài chục DOM node tại một thời điểm, tiết kiệm bộ nhớ và giữ hiệu năng mượt mà.
  • Các thư viện phổ biến để implement gồm react-window và @tanstack/react-virtual.
  • Đánh đổi là code phức tạp hơn, khó styling các item có chiều cao động, và cần tính toán vị trí scroll chính xác.

Xem toàn bộ React cùng filter theo level & chủ đề con.

Mở danh sách React