Như chúng ta đã biết khi trình duyệt web tải một lượng dữ liệu xuống để hiển thị (ví dụ 10000 bản ghi) sẽ rất chậm, đơ, hiệu năng thấp ảnh hưởng tới khá nhiều trải nghiệm người dùng (UX).
Chính vì thế là người ta đã sinh ra phương pháp cải thiện đó là virtual scroll, chỉ render những phần trong view point (khung nhìn) của người dùng. Thay vì hiển thị hết 10000 phần tử HTML thì chỉ cần hiển thị hơn chục phần tử.
Khi ta cuộn thì 1 số phần tử sẽ bị loại khỏi DOM để tối ưu và thanh cuộn sinh ra là thanh cuộn ảo. Chính vì thế cho dù có hiển thị 1000 phần tử thì trên màn hình chúng ta chỉ render tầm 20 phần tử giúp cho trải nghiệm người dùng mượt mà
Ảnh cơ chế minh họa
DEMO
Chúng ta thử tạo ra list 10000 phần tử và xem fps và GPU khi render các list item:
Kết quả hiển thị: Khi cuộn nhiều hao GPU chiếm 10.7 MB, ngoài ra nếu có thêm ảnh sẽ tốn nhiều nữa
Chúng ta sửa lại source code với React Virtualized
Kết quả hiển thị thì thấy GPU sử dụng giảm hơn hẳn và cũng đỡ bị giật lác khi cuộn hiển thị dữ liệu:
Như vậy, mình đã trình bày xong về cách sử dụng virtual scroll với React. Demo mình có để trên GitHub, mọi người có thể clone về chạy thử:
https://github.com/chungred/react-virtualized-example
Ngoài ra mình cũng có làm video demo về React Virtualized, các bạn có thể tham khảo:
https://www.facebook.com/100005085249224/videos/808634120156962/
