Các bảng và danh sách siêu lớn có thể làm giảm đáng kể hiệu suất của trang web. Tính năng ảo hoá có thể giúp bạn!
react-window là một thư viện cho phép hiển thị hiệu quả các danh sách lớn.
Dưới đây là ví dụ về một danh sách chứa 1.000 hàng đang được kết xuất bằng react-window. Hãy thử di chuyển nhanh nhất có thể.
Tại sao thông tin này hữu ích?
Đôi khi, bạn cần hiển thị một bảng hoặc danh sách lớn chứa nhiều hàng. Việc tải từng mục trên danh sách như vậy có thể ảnh hưởng đáng kể đến hiệu suất.
Ảo hoá danh sách hay "cửa sổ hoá" là khái niệm chỉ kết xuất những gì người dùng nhìn thấy. Số lượng phần tử được hiển thị ban đầu chỉ là một tập hợp con rất nhỏ của toàn bộ danh sách và "cửa sổ" nội dung hiển thị sẽ di chuyển khi người dùng tiếp tục cuộn. Điều này giúp cải thiện cả hiệu suất kết xuất và cuộn của danh sách.