詳解JS如何解決大數(shù)據(jù)下滾動頁面卡頓問題

更新時間：2023年07月28日 11:29:28 作者：demo123567

之前遇到不分頁直接獲取到全部數(shù)據(jù)，前端滾動查看數(shù)據(jù)，頁面就挺卡頓的，所以這篇文章來和大家聊聊如何解決這一問題，感興趣的小伙伴可以了解下

前言

之前遇到不分頁直接獲取到全部數(shù)據(jù)，前端滾動查看數(shù)據(jù)，頁面就聽卡頓的，當然這和電腦瀏覽器性能啥的還是有點關系。但根源還是一次性渲染數(shù)據(jù)過多導致的，因此就想到解決這個問題，最常見就是虛擬滾動，實現(xiàn)只渲染當前可見的部分，這樣瀏覽器一次性渲染的數(shù)據(jù)少了。本文介紹虛擬列表和虛擬Table的實現(xiàn)，基于React + ts技術棧。

虛擬列表

虛擬列表通過僅渲染當前可見區(qū)域的列表項來解決這個問題。它利用瀏覽器的滾動事件，根據(jù)用戶可見區(qū)域的大小和滾動位置動態(tài)地計算應該渲染哪些列表項。這樣，即使數(shù)據(jù)量很大，也只有當前可見的列表項會被渲染，大大減少了DOM元素的數(shù)量，提高了頁面性能和響應性。結合下圖想象一下

實現(xiàn)虛擬列表的方法主要涉及以下步驟：

計算可見區(qū)域：根據(jù)容器的尺寸（假如500px）和每一項的高度（50px），計算出可見的列表項數(shù)量。然后可視的數(shù)據(jù)就是10個。
監(jiān)聽滾動事件：在容器上添加滾動事件監(jiān)聽，以便實時獲取滾動位置。為了容器可滾動，需要在容器內添加空的帶有高度的元素，將父元素撐開，然后可滾動。獲取scrollTop的高度，就能計算出當前顯示第一項的下標（scrollTop / itemHeight），動態(tài)更新數(shù)據(jù)。

基于上面的思路，封裝一個滾動列表組件。

import _ from "lodash";
import React, { useEffect, useState } from "react";
import { listData } from "./data";
type ListType = {
  itemHeight?: number; // 每一項的高度
  visibleHeight?: number; // 可見高度
  total?: number; // 數(shù)據(jù)總數(shù)
  dataSource?: any[]; // 全部數(shù)據(jù)
};
// 為了看效果我模擬的數(shù)據(jù)
const myList = Array.from(Array(1000), (item, index) => ({name: `名字${item}`, id: index}));
const List = (props: ListType) => {
  const {
    itemHeight = 54,
    visibleHeight = 540,
    total = 130,
    dataSource = myList,
  } = props;
  const [showData, setShowData] = useState<any>([]);
  const [offset, setOffset] = useState<any>({ top: 0, bottom: 0 });
  const visibleCount = Math.ceil(visibleHeight / itemHeight);
  useEffect(() => {
    const list = _.slice(dataSource, 0, visibleCount);
    const bottom = (total - visibleCount) * itemHeight;
    setOffset({ top: 0, bottom });
    setShowData(list);
  }, [dataSource]);
  const onScroll = (event: React.UIEvent<HTMLDivElement>) => {
    const target = event.currentTarget;
    const startIdx = Math.floor(target.scrollTop / itemHeight);
    const endIdx = startIdx + visibleCount;
    setShowData(dataSource.slice(startIdx, endIdx));
    const top = startIdx * itemHeight;
    const bottom = (total - endIdx) * itemHeight;
    setOffset({ top, bottom });
  };
  return (
    <div
      className="virtual"
      style={{
        height: visibleHeight,
        width: "100%",
        overflow: "auto",
        border: "1px solid #d9d9d9",
      }}
      onScroll={onScroll} // 在父元素上添加滾動事件監(jiān)聽
    >
      {/* 可視數(shù)據(jù) 為了滾動數(shù)據(jù)一直在可視區(qū)。加上頂部偏移 */}
      <div style={{ height: visibleHeight, marginTop: offset.top }}>
        {_.map(showData, (item, index: any) => {
          return (
            <div
              style={{
                display: "flex",
                alignItems: "center",
                height: itemHeight,
                borderBottom: "1px solid #d9d9d9",
              }}
              key={index}
            >
              {item.name}
            </div>
          );
        })}
      </div>
      {/* 底部占位 */}
      <div style={{ height: offset.bottom }} />
    </div>
  );
};
export default List;

虛擬Table

虛擬表格和虛擬列表的思路差不多，是虛擬列表的一種特殊形式，通常用于處理大型的表格數(shù)據(jù)。類似于虛擬列表，虛擬表格也只渲染當前可見區(qū)域的表格單元格，以優(yōu)化性能并減少內存占用。在ant design4+的版本，也是給出了虛擬列表的實現(xiàn)方式的，基于‘react-window'，大家也可以研究研究。我這里就是根據(jù)ant 提供的api components重寫渲染的數(shù)據(jù)；獲取到可視區(qū)起點和終點下標，然后只展示當前可視的數(shù)據(jù)。思路和上面的列表基本一樣，直接上代碼

import React, { useEffect, useRef, useState } from "react";
import { Table } from "antd";
import _ from "lodash";
type TableType = {
  itemHeight?: number; // 每一項的高度
  visibleHeight?: number; // 可見高度
  total?: number; // 數(shù)據(jù)總數(shù)
  dataSource?: any[]; // 全部數(shù)據(jù)
};
// 為了看效果我模擬的數(shù)據(jù)
const myList = Array.from(Array(1000), (item, index) => ({name: `名字${item}`, id: index}));
const VirtualTable = (props: TableType) => {
  const {
    itemHeight = 54,
    visibleHeight = 540,
    total = 130,
    dataSource = myList,
  } = props;
  const [point, setPoint] = useState<any>([0, 20]);
  const [offset, setOffset] = useState<any>({top:0, bottom: 0 });
  const tabRef = useRef<any>();
  const containRef = useRef<any>();
  const visibleCount = Math.ceil(visibleHeight / itemHeight);
  useEffect(() => {
    const bottom = (total - visibleCount) * itemHeight;
    setOffset({ bottom });
    setPoint([0, visibleCount]);
    const scrollDom = tabRef?.current?.querySelector(".ant-table-body");
    console.log("aaa",scrollDom);
    if (scrollDom) {
      containRef.current = scrollDom;
      containRef.current.addEventListener("scroll", onScroll);
      return () => {
        containRef.current.removeEventListener("scroll", onScroll);
      };
    }
  }, [myList]);
  const onScroll = (e: any) => {
    const startIdx = Math.floor(e?.target?.scrollTop / itemHeight);
    const endIdx = startIdx + visibleCount;
    const bottom = (total - endIdx) * itemHeight;
    const top = startIdx * itemHeight;
    setOffset({top,bottom});
    setPoint([startIdx, endIdx]);
  };
  const columns = [
    { title: "ID", dataIndex: "id", width: 150 },
    { title: "名字", dataIndex: "name", width: 150 },
  ];
  return (
    <Table
      ref={tabRef}
      className="virtual-table"
      pagination={false}
      columns={columns}
      dataSource={dataSource}
      scroll={{ y: visibleHeight }}
      components={{
        body: {
          wrapper: ({ className, children }: any) => {
            return (
              <tbody className={className}>
                {children?.[0]}
                <tr style={{height: offset.top}}/>
                {_.slice(children?.[1], point?.[0], point?.[1])}
                <tr style={{height: offset.bottom}}></tr>
              </tbody>
            );
          },
        },
      }}
    />
  );
};
export default VirtualTable;

在上面的代碼里，用到Ant Design的Table組件中的components.body.wrapper定制表格內容區(qū)域的包裝器組件。它的作用是對表格的內容進行包裝，并且可以自定義一些顯示邏輯。components.body.wrapper函數(shù)接收一個對象參數(shù)，其中包含以下參數(shù)：

className: 傳遞給tbody標簽的類名。它是一個字符串，包含了tbody標簽的類名，可以用于自定義樣式。
children: 表格的內容區(qū)域的子元素，即表格的數(shù)據(jù)行和列。

在給定的代碼中，components.body.wrapper函數(shù)接收了一個參數(shù)對象，該對象包含className和children屬性。在函數(shù)內部，它會將children分割成三部分：

children?.[0]：這是表格的標題行，即表頭部分，對應于<thead>標簽。
{_.slice(children?.[1], point?.[0], point?.[1])}：這是表格的數(shù)據(jù)行，根據(jù)point的取值進行了切片，只渲染point范圍內的數(shù)據(jù)行，對應于<tr>標簽。
<tr style={{height: offset.bottom}}></tr>：這是底部占位行，用于確保在滾動時能正確顯示表格的底部內容，對應于<tr>標簽，并通過style設置高度為offset.bottom。

其中，point和offset是通過其他邏輯計算得到的，可能是在組件的其他部分定義或使用的變量。

通過自定義components.body.wrapper函數(shù)，您可以對表格內容進行更加靈活的渲染和定制。在這種情況下，它主要用于實現(xiàn)虛擬表格的功能，只渲染可見區(qū)域的數(shù)據(jù)行，從而優(yōu)化大型表格的性能。