JS数组实现虚拟滚动技巧分享

最近发现不少小伙伴都对文章很感兴趣，所以今天继续给大家介绍文章相关的知识，本文《JS数组实现虚拟滚动方法解析》主要内容涉及到等等知识点，希望能帮到你！当然如果阅读本文时存在不同想法，可以在评论中表达，但是请勿使用过激的措辞~

虚拟滚动通过只渲染可视区域内的数据来提升性能，其核心是根据滚动位置动态计算需渲染的数据范围。1. 计算可视区域数据范围：基于scrollTop、itemHeight和visibleHeight，得出startIndex = Math.floor(scrollTop / itemHeight)，endIndex = Math.min(startIndex + Math.ceil(visibleHeight / itemHeight), data.length)。2. 处理滚动条高度：设置容器高度为totalHeight = data.length * itemHeight，以模拟完整列表的滚动高度。3. 优化滚动性能：使用节流函数throttle限制滚动事件触发频率，如throttledScrollHandler = throttle(handleScroll, 50)。4. 处理不同高度数据项：维护itemHeights和cumulativeHeights数组，通过二分查找findStartIndex确定起始索引，并累加高度计算endIndex。5. 处理占位元素：通过绝对定位或外层容器的高度占位，确保滚动条正常显示。6. React中实现：使用useState管理startIndex，useRef绑定容器，监听scroll事件更新渲染范围，结合absolute定位渲染可视项，并设置总高度保持滚动条比例，最终实现高效虚拟滚动。

JavaScript数组实现虚拟滚动，本质上是只渲染可视区域内的数据，而非全部数据，从而提高性能。核心在于根据滚动位置动态计算需要渲染的数据范围。

解决方案

虚拟滚动主要通过监听滚动事件，计算可视区域内的起始索引和结束索引，然后从完整的数据集中截取相应的数据进行渲染。这个过程需要精确计算，并且要考虑到滚动条的高度和数据项的高度。

如何计算可视区域的数据范围？

首先，你需要知道每个数据项的高度（假设所有项高度一致），以及可视区域的高度。然后，根据滚动条的scrollTop值，就可以计算出可视区域的起始索引。

const itemHeight = 30; // 每个数据项的高度
const visibleHeight = 600; // 可视区域的高度
const scrollTop = // 获取滚动条的scrollTop值

const startIndex = Math.floor(scrollTop / itemHeight);
const endIndex = Math.min(startIndex + Math.ceil(visibleHeight / itemHeight), data.length); //data是你的完整数据

计算出startIndex和endIndex后，就可以使用data.slice(startIndex, endIndex)来获取需要渲染的数据。

如何处理滚动条的高度？

虚拟滚动需要模拟一个完整的滚动条，即使只渲染了部分数据。这通常通过设置容器的高度来实现，容器的高度等于数据总数乘以每个数据项的高度。

const totalHeight = data.length * itemHeight;
// 设置容器的style.height = totalHeight + 'px';

如何优化滚动性能？

频繁的滚动事件触发会导致大量的计算和渲染，影响性能。可以使用节流或防抖技术来优化滚动事件的处理。

function throttle(func, delay) {
  let timeoutId;
  let lastExecTime = 0;

  return function(...args) {
    const context = this;
    const currentTime = new Date().getTime();

    if (!timeoutId) {
      if (currentTime - lastExecTime >= delay) {
        func.apply(context, args);
        lastExecTime = currentTime;
      } else {
        timeoutId = setTimeout(() => {
          func.apply(context, args);
          lastExecTime = new Date().getTime();
          timeoutId = null;
        }, delay - (currentTime - lastExecTime));
      }
    }
  };
}

const throttledScrollHandler = throttle(handleScroll, 50); // 50ms节流
// 监听滚动事件，调用throttledScrollHandler

如何处理不同高度的数据项？

如果数据项的高度不一致，需要维护一个高度缓存，记录每个数据项的高度。在计算可视区域的数据范围时，需要遍历高度缓存，累加高度，直到达到scrollTop值。 这会增加计算的复杂度，但能更精确地实现虚拟滚动。

const itemHeights = []; // 存储每个数据项的高度
let cumulativeHeights = [0]; // 存储累计高度，第一个元素为0

function calculateCumulativeHeights() {
  let sum = 0;
  for (let i = 0; i < data.length; i++) {
    // 假设你可以获取到每个data[i]元素渲染后的高度，比如通过 getBoundingClientRect()
    const element = document.getElementById(`item-${i}`); // 假设每个item有唯一的id
    if(element){
      itemHeights[i] = element.getBoundingClientRect().height;
    } else {
      itemHeights[i] = itemHeight; // 默认高度，或者在渲染后更新
    }
    sum += itemHeights[i];
    cumulativeHeights[i + 1] = sum;
  }
}

// 找到startIndex：二分查找cumulativeHeights中第一个大于等于scrollTop的索引
function findStartIndex(scrollTop) {
  let low = 0;
  let high = cumulativeHeights.length - 1;
  let bestIndex = high; // 默认值

  while (low <= high) {
    const mid = Math.floor((low + high) / 2);
    if (cumulativeHeights[mid] >= scrollTop) {
      bestIndex = mid;
      high = mid - 1;
    } else {
      low = mid + 1;
    }
  }
  return Math.max(0, bestIndex - 1); // 确保不小于0
}

// 计算endIndex：找到startIndex后，累加高度直到超出visibleHeight
function calculateEndIndex(startIndex, visibleHeight) {
  let sum = 0;
  let endIndex = startIndex;
  for (let i = startIndex; i < data.length; i++) {
    sum += itemHeights[i];
    if (sum > visibleHeight) {
      endIndex = i;
      break;
    }
    endIndex = i;
  }
  return Math.min(endIndex + 1, data.length);
}

// 滚动处理函数
function handleScroll() {
  const scrollTop = // 获取滚动条的scrollTop值
  const startIndex = findStartIndex(scrollTop);
  const endIndex = calculateEndIndex(startIndex, visibleHeight);
  const visibleData = data.slice(startIndex, endIndex);
  // 渲染visibleData
}

// 初始化时计算累计高度
calculateCumulativeHeights();

如何处理占位元素？

为了保证滚动条的正确显示，通常需要在可视区域的上方和下方添加占位元素，用于填充未渲染的数据项。占位元素的高度等于未渲染的数据项的高度之和。

虚拟滚动在React中的实现？

在React中，可以使用react-window或react-virtualized等库来实现虚拟滚动。这些库提供了高性能的虚拟滚动组件，可以简化虚拟滚动的实现。当然，你也可以自己实现，通过state管理startIndex和endIndex，并在滚动事件中更新state。

import React, { useState, useRef, useEffect } from 'react';

const VirtualizedList = ({ data, itemHeight }) => {
  const [startIndex, setStartIndex] = useState(0);
  const containerRef = useRef(null);
  const visibleCount = 20; // 可视区域容纳的item数量，可以动态计算

  const handleScroll = () => {
    if (!containerRef.current) return;
    const scrollTop = containerRef.current.scrollTop;
    const newStartIndex = Math.floor(scrollTop / itemHeight);
    setStartIndex(newStartIndex);
  };

  useEffect(() => {
    if (containerRef.current) {
      containerRef.current.addEventListener('scroll', handleScroll);
    }
    return () => {
      if (containerRef.current) {
        containerRef.current.removeEventListener('scroll', handleScroll);
      }
    };
  }, []);

  const visibleData = data.slice(startIndex, Math.min(startIndex + visibleCount, data.length));
  const totalHeight = data.length * itemHeight;

  return (
    <div ref={containerRef} style={{ height: '600px', overflowY: 'scroll' }}>
      <div style={{ height: totalHeight + 'px', position: 'relative' }}>
        {visibleData.map((item, index) => (
          <div
            key={index}
            style={{
              position: 'absolute',
              top: (startIndex + index) * itemHeight + 'px',
              left: 0,
              width: '100%',
              height: itemHeight + 'px',
              borderBottom: '1px solid #eee'
            }}
          >
            {item}
          </div>
        ))}
      </div>
    </div>
  );
};

export default VirtualizedList;

这段代码展示了React中虚拟滚动的一个基本实现，关键点在于根据滚动位置动态计算startIndex，并只渲染visibleData。totalHeight用于模拟完整滚动条，position: absolute和top用于定位每个渲染的item。

本篇关于《JS数组实现虚拟滚动技巧分享》的介绍就到此结束啦，但是学无止境，想要了解学习更多关于文章的相关知识，请关注golang学习网公众号！