Tối ưu Render Danh Sách 🚀

Chắc hẳn anh em làm frontend đã từng gặp rất nhiều bài toán render danh sách trong quá trình phát triển web. Đâu đó chúng ta có thể gặp trong các combo box, các scroll view, ... Nếu ít kinh nghiệm và xử lý thông thường, với một list data dài trung bình từ 2000 bản ghi, chúng ta sẽ phải mất 1s chờ đợi để cây DOM hiển thị đủ.

Với xu hướng nâng cao trải nghiệm người dùng hiện tại, chúng ta không thể để một trang web khiến cho người dùng chờ đợi lâu đến như vậy được. Cho nên ngày hôm nay mình sẽ chia sẻ cho ae cách tối ưu hiệu năng và nâng cao trải nghiệm người dùng bằng những kỹ thuật mà mình biết nhé. Let’s go!

Bài toán: Xử lý Data có 10000 bản ghi danh sách nhân viên

Mình sẽ chia các cách từ cơ bản đến phức tạp để giải bài toán trên như sau:

Kỹ thuật 1: Infinite Scroll

Kỹ thuật đầu tiên mình biết khi học JS đó chính là Infinite Scroll.

Giải thích về kỹ thuật này:
Thay vì load toàn bộ danh sách 10000 bản ghi ra cùng lúc thì chúng ta có thể load danh sách bản ghi tầm 20 người. Trong đó, có 10 người sẽ ở vùng nhìn thấy, còn 10 người sẽ ở vùng không nhìn thấy. Khi người dùng cuộn chuột đến người thứ 18 thì tiếp tục load thêm 20 người nữa.

Ưu điểm:

• Kỹ thuật này sẽ làm tăng tốc độ tải trang.

Nhược điểm:

• Cây DOM sau mỗi lần load sẽ ngày càng phình to dẫn đến quá tải.

Từ nhược điểm của phương pháp trên, chúng ta có thể nâng cao hơn một chút với kỹ thuật Virtual Scrolling.

Giải thích về kỹ thuật này:
Lúc này, thay vì trực tiếp thêm 20 phần tử vào cây DOM mỗi khi loading data, chúng ta sẽ giới hạn số lượng phần tử hiển thị trên cây DOM là 20. Khi người dùng cuộn, các phần tử ngoài vùng nhìn thấy sẽ bị loại bỏ và các phần tử mới sẽ được thêm vào, giúp giữ cho cây DOM luôn nhỏ gọn và hiệu quả.

Mình biết đến kỹ thuật này khi bắt đầu học React.

Giải thích kỹ thuật Virtual Scrolling với thư viện react-window:
Chúng ta sẽ sử dụng một thư viện có tên là react-window để triển khai virtual scrolling.

Đọc đoạn code ví dụ dưới đây:

import React from "react";
import { FixedSizeList as List } from "react-window";

const App = () => {
  // Giả sử chúng ta có một danh sách dài 10.000 mục
  const data = Array.from({ length: 10000 }, (_, index) => `Item ${index + 1}`);

  // Hàm render mỗi item trong danh sách
  const renderRow = ({ index, style }) => (
    <div style={style}>{data[index]}</div>
  );

  return (
    <div style={{ height: 400, width: "100%" }}>
      {/* Sử dụng List component để render danh sách */}
      <List
        height={400}        // Chiều cao của vùng hiển thị
        itemCount={data.length}   // Số lượng phần tử trong danh sách
        itemSize={35}        // Chiều cao của mỗi item
        width={300}          // Chiều rộng của vùng hiển thị
      >
        {renderRow}
      </List>
    </div>
  );
};

export default App;

• FixedSizeList: Là một component trong thư viện react-window giúp render các danh sách có chiều cao và chiều rộng cố định. Khi sử dụng FixedSizeList, bạn không cần phải lo lắng về việc tính toán lại kích thước của các phần tử trong danh sách, vì các phần tử này có kích thước cố định.

• itemCount: Xác định số lượng phần tử có trong danh sách. Đây là thuộc tính quan trọng để react-window biết cần phải render bao nhiêu mục trong danh sách, mặc dù chỉ có một số lượng nhỏ mục được hiển thị tại một thời điểm.

• itemSize: Chiều cao của mỗi item trong danh sách, tính bằng pixel (px). Điều này cần được chỉ định khi sử dụng FixedSizeList, vì react-window cần biết kích thước của từng mục để tính toán số lượng phần tử có thể hiển thị trong một khu vực nhất định.

• height và width: Là kích thước của vùng hiển thị danh sách. Chỉ các phần tử nằm trong vùng này mới được render. Các phần tử bên ngoài vùng hiển thị sẽ không được render, giúp giảm tải cho bộ nhớ và tăng hiệu suất render.

• renderRow: Là hàm để render ra các phần tử trong danh sách. Hàm này nhận vào đối tượng chứa index (vị trí của phần tử trong danh sách) và style (chứa các kiểu cần thiết để áp dụng cho phần tử, như vị trí, chiều cao, chiều rộng, v.v.). Hàm này chịu trách nhiệm hiển thị nội dung của mỗi mục trong danh sách.

Kết quả sau khi chạy mặc dù danh sách có tận 10000 phần tử, tuy nhiên chỉ có khoảng từ 10 đến 20 phần tử được render tại thời điểm hiện tại tuỳ theo kích thước của vùng nhìn thấy. Khi chúng ta cuộn xuống thư viện sẽ xử lý thay thế các phần tử cho nhau một cách mượt mà, mà không làm chậm ứng dụng.

Với những kỹ thuật như Infinite Scroll và Virtual Scrolling, chúng ta đã có thể giải quyết vấn đề hiệu suất khi render các danh sách dài, đặc biệt là với những ứng dụng web yêu cầu xử lý dữ liệu lớn. Nhờ việc chỉ render các phần tử cần thiết trong tầm nhìn, chúng ta không chỉ giảm thiểu tải cho trình duyệt mà còn nâng cao trải nghiệm người dùng với giao diện mượt mà, không bị giật lag.

Tuy nhiên, mỗi kỹ thuật đều có ưu điểm và nhược điểm riêng, và việc lựa chọn giải pháp nào phù hợp còn tùy thuộc vào nhu cầu cụ thể của dự án. Nếu bạn cần một giải pháp nhanh chóng và đơn giản, Infinite Scroll có thể là lựa chọn tốt. Nhưng nếu bạn cần tối ưu hơn nữa với danh sách lớn, Virtual Scrolling là một bước tiến quan trọng. Chắc chắn, những kỹ thuật này sẽ giúp ứng dụng của bạn không chỉ hiệu quả hơn mà còn trở nên thân thiện với người dùng hơn.

Chúc các bạn áp dụng thành công các kỹ thuật này trong các dự án của mình, và đừng quên thử nghiệm thêm các thư viện như react-window hoặc react-virtualized để cải thiện hơn nữa trải nghiệm người dùng!