- **正确答案**：不定高虚拟列表是一种前端优化技术，用于在渲染大量数据时提升性能。其核心思想是只渲染可视区域内及少量缓冲区域的元素，而非将所有数据项一次性渲染到页面中。对于“不定高”场景，每个列表项的高度可能不同，因此需要动态计算可视区域内的元素及其位置。 - **解答思路**： 1. 监听滚动事件，获取当前滚动的位置。 2. 根据滚动位置和容器高度，计算出当前可视区域应显示的数据索引范围。 3. 动态渲染这些数据项，并为每个项分配合适的位置（通过绝对定位或transform）。 4. 对于不定高的情况，需要预先缓存每一项的实际高度，或者在首次渲染时测量并记录它们的高度。 5. 设置一个占位容器（如一个空的div），使用样式控制可视区域外的内容不被渲染，从而减少DOM节点数量。 - **深度知识讲解**：考点主要涉及以下几个方面： 1. **虚拟滚动原理**： - 虚拟滚动也称为窗口化（Windowing），目的是避免渲染大量DOM节点，节省内存和提高渲染效率。 - 常见于长列表、表格、日历等组件中。 2. **不定高处理难点**： - 固定高度的虚拟列表只需简单计算即可知道可视区域应该显示哪些项。 - 不定高则需要额外存储每项的高度信息，或在首次渲染后动态测量，增加了复杂度。 - 可以采用异步测量策略，比如在组件挂载后用 `getBoundingClientRect()` 获取实际高度。 3. **性能优化技巧**： - 防抖/节流滚动事件，防止频繁触发重绘。 - 使用 `requestAnimationFrame` 控制渲染节奏。 - 利用 `transform` 替代 `top` 进行定位，利用GPU加速。 - 缓存已计算好的高度信息，避免重复计算。 4. **相关数据结构**： - 高度数组：保存每个item的真实高度。 - 累加高度数组：保存从第一个item到第n个item的总高度，用于快速二分查找可视区域起始index。 - 可视区索引范围：通过二分查找确定当前可见的start和end index。 5. **实现步骤详解**： - 初始化时创建一个高度数组来记录每个item的高度。 - 创建一个累加高度数组，用于后续快速定位滚动位置对应的索引。 - 滚动时根据当前scrollTop，使用二分查找确定可视区域的起始索引。 - 计算出可视区域内的数据子集，并设置偏移量（offset）让内容看起来是在整个列表中的位置。 - 使用CSS transform 或绝对定位渲染可视区域内的数据项。 - **代码示例**（React + JavaScript 实现简要版）： ```javascript class VirtualList extends React.Component { constructor(props) { super(props); this.state = { visibleCount: 0, // 可视区域内item数 startIndex: 0, // 起始索引 heights: [], // 每个item的高度数组 positions: [] // 每个item的累计位置 }; this.containerRef = React.createRef(); } componentDidMount() { const { data } = this.props; const heights = data.map(() => 0); // 初始值为0，后面异步测量 const positions = []; let offset = 0; for (let i = 0; i < data.length; i++) { positions.push(offset); offset += heights[i]; // 后续会更新heights后再重新计算positions } this.setState({ heights, positions }); this.calculateHeights(); // 异步测量真实高度 } calculateHeights = () => { const items = document.querySelectorAll('.virtual-item'); const { heights } = this.state; items.forEach((item, index) => { if (!heights[index] || heights[index] === 0) { heights[index] = item.offsetHeight; } }); this.setState({ heights }, this.updatePositions); }; updatePositions = () => { const { heights } = this.state; const positions = []; let offset = 0; for (let i = 0; i < heights.length; i++) { positions[i] = offset; offset += heights[i]; } this.setState({ positions }); }; handleScroll = () => { const container = this.containerRef.current; const scrollTop = container.scrollTop; const { positions } = this.state; // 二分查找找到startIndex let low = 0, high = positions.length - 1; let mid; while (low <= high) { mid = Math.floor((low + high) / 2); if (positions[mid] <= scrollTop && (mid === positions.length - 1 || positions[mid + 1] > scrollTop)) { break; } else if (positions[mid] < scrollTop) { low = mid + 1; } else { high = mid - 1; } } const startIndex = mid; const clientHeight = container.clientHeight; let endIndex = startIndex; while (endIndex < positions.length && positions[endIndex] - scrollTop < clientHeight + 100) { endIndex++; } this.setState({ startIndex, visibleCount: endIndex - startIndex }); }; render() { const { data } = this.props; const { startIndex, visibleCount, positions, heights } = this.state; const visibleData = data.slice(startIndex, startIndex + visibleCount); return (

{visibleData.map((item, index) => { const realIndex = startIndex + index; return (

{item.label}

); })}

); } } ``` - **扩展知识点**： - **滚动行为优化**： - 使用 passive scroll listener 提升滚动流畅性。 - 避免 layout thrashing，合并 DOM 读写操作。 - **异步渲染与骨架屏**： - 在数据加载完成前展示骨架屏，提升用户体验。 - 使用 Web Worker 测量高度，避免阻塞主线程。 - **第三方库推荐**： - react-virtualized - react-window - vue-virtual-scroll-list - **移动端适配**： - 移动端设备屏幕较小，虚拟滚动更显重要。 - 注意触控滚动事件兼容性。 - **服务端渲染支持**： - 如果项目使用 SSR，需注意虚拟列表在服务端无法准确测量高度，可先渲染少量内容，待客户端激活后再进行虚拟化处理。总结：不定高虚拟列表的核心在于如何高效地管理可视区域内的元素，尤其是当每个元素高度不确定时，必须结合异步测量和缓存机制来保证性能和准确性。

字节抖音直播一面

全站热榜

创作者周榜