Virtual Scroll / Windowing: Hiển thị 100.000 phần tử trên React và Vue mượt mà

Virtual Scroll / Windowing: Hiển thị 100.000 phần tử trên React và Vue mượt mà | Shanverse

Codeplain text

1visibleStart = floor(scrollTop / itemHeight)2visibleCount = ceil(viewportHeight / itemHeight)3startIndex = max(0, visibleStart - overscan)4endIndex = min(itemCount, visibleStart + visibleCount + overscan)5totalHeight = itemCount × itemHeight6offsetY = startIndex × itemHeight

Codetypescript

1type VirtualRange = {2  start: number;3  end: number;4  offsetY: number;5  totalHeight: number;6};78function calculateVirtualRange(9  itemCount: number,10  itemHeight: number,11  viewportHeight: number,12  scrollTop: number,13  overscan: number,14): VirtualRange {15  if (itemCount < 0) throw new Error("itemCount must be non-negative");16  if (itemHeight <= 0) throw new Error("itemHeight must be positive");1718  const safeScrollTop = Math.max(0, scrollTop);19  const visibleStart = Math.floor(safeScrollTop / itemHeight);20  const visibleCount = Math.ceil(viewportHeight / itemHeight);21  const start = Math.max(0, visibleStart - overscan);22  const end = Math.min(23    itemCount,24    visibleStart + visibleCount + overscan,25  );2627  return {28    start,29    end,30    offsetY: start * itemHeight,31    totalHeight: itemCount * itemHeight,32  };33}

Codetypescript

1let scheduled = false;2let latestScrollTop = 0;34function onScroll(event: Event) {5  latestScrollTop = (event.currentTarget as HTMLElement).scrollTop;67  if (scheduled) return;8  scheduled = true;910  requestAnimationFrame(() => {11    scheduled = false;12    updateVirtualWindow(latestScrollTop);13  });14}

Codetypescript

1import { useRef } from "react";2import { useVirtualizer } from "@tanstack/react-virtual";34type RowData = {5  id: string;6  title: string;7};89function VirtualList({ rows }: { rows: RowData[] }) {10  const parentRef = useRef<HTMLDivElement>(null);1112  const virtualizer = useVirtualizer({13    count: rows.length,14    getScrollElement: () => parentRef.current,15    estimateSize: () => 48,16    overscan: 8,17    getItemKey: (index) => rows[index].id,18  });1920  return (21    <div22      ref={parentRef}23      style={{ height: 600, overflow: "auto" }}24      role="list"25      aria-label="Results"26    >27      <div28        style={{29          height: virtualizer.getTotalSize(),30          position: "relative",31        }}32      >33        {virtualizer.getVirtualItems().map((virtualRow) => {34          const row = rows[virtualRow.index];3536          return (37            <div38              key={virtualRow.key}39              role="listitem"40              aria-posinset={virtualRow.index + 1}41              aria-setsize={rows.length}42              style={{43                position: "absolute",44                top: 0,45                left: 0,46                width: "100%",47                height: virtualRow.size,48                transform: `translateY(${virtualRow.start}px)`,49              }}50            >51              {row.title}52            </div>53          );54        })}55      </div>56    </div>57  );58}

Codetypescript

1const virtualizer = useVirtualizer({2  count: rows.length,3  getScrollElement: () => parentRef.current,4  estimateSize: () => 72,5  overscan: 10,6});78// Gắn vào row:9<div10  ref={virtualizer.measureElement}11  data-index={virtualRow.index}12  style={{13    position: "absolute",14    width: "100%",15    transform: `translateY(${virtualRow.start}px)`,16  }}17>18  <DynamicRow row={rows[virtualRow.index]} />19</div>

Codejavascript

1<script setup lang="ts">2import { computed, ref } from "vue";3import { useVirtualizer } from "@tanstack/vue-virtual";45const props = defineProps<{6  rows: Array<{ id: string; title: string }>;7}>();89const parentRef = ref<HTMLElement | null>(null);1011const options = computed(() => ({12  count: props.rows.length,13  getScrollElement: () => parentRef.value,14  estimateSize: () => 48,15  overscan: 8,16  getItemKey: (index: number) => props.rows[index].id,17}));1819const virtualizer = useVirtualizer(options);20const virtualRows = computed(() => virtualizer.value.getVirtualItems());21const totalSize = computed(() => virtualizer.value.getTotalSize());22</script>2324<template>25  <div ref="parentRef" class="viewport" role="list">26    <div class="scroll-space" :style="{ height: `${totalSize}px` }">27      <div28        v-for="virtualRow in virtualRows"29        :key="virtualRow.key"30        role="listitem"31        class="row"32        :style="{33          height: `${virtualRow.size}px`,34          transform: `translateY(${virtualRow.start}px)`,35        }"36      >37        {{ rows[virtualRow.index].title }}38      </div>39    </div>40  </div>41</template>4243<style scoped>44.viewport {45  height: 600px;46  overflow: auto;47}4849.scroll-space {50  position: relative;51}5253.row {54  position: absolute;55  inset-inline: 0;56  top: 0;57}58</style>

Virtual Scroll / Windowing: Hiển thị 100.000 phần tử trên React và Vue mượt mà

Vì sao render 100.000 phần tử bị lag?

Comments

Virtual Scroll, Windowing và Recycling

Thuật toán fixed-height

TypeScript implementation từ đầu

Scroll handler không nên làm việc nặng

Overscan: vùng đệm chống màn hình trắng

React với TanStack Virtual

Vue với TanStack Virtual

Dynamic-height: phần khó thật sự

Độ phức tạp

Tránh scroll jumping

Dynamic row trong React

Infinite Loading kết hợp Windowing

Chat và reverse list

Grid và Table virtualization

State của row đi đâu khi bị unmount?

Accessibility

Khi nào không nên Virtualize?

Những tối ưu đi kèm

React

Vue

Chung

Performance budget và metrics

Test cases

Anti-patterns

Production checklist

Kết luận

Tài liệu tham khảo

XSS trong React/Next.js: Làm chủ dangerouslySetInnerHTML an toàn

Xây Virtual Classroom & Collaborative Whiteboard với Canvas/WebRTC

Content Security Policy trong Next.js: Chặn script lạ bằng CSP Header

Vì sao render 100.000 phần tử bị lag?

Comments

Virtual Scroll, Windowing và Recycling

Thuật toán fixed-height

TypeScript implementation từ đầu

Scroll handler không nên làm việc nặng

Overscan: vùng đệm chống màn hình trắng

React với TanStack Virtual

Vue với TanStack Virtual

Dynamic-height: phần khó thật sự

Độ phức tạp

Tránh scroll jumping

Dynamic row trong React

Infinite Loading kết hợp Windowing

Chat và reverse list

Grid và Table virtualization

State của row đi đâu khi bị unmount?

Accessibility

Khi nào không nên Virtualize?

Những tối ưu đi kèm

React

Vue

Chung

Performance budget và metrics

Test cases

Anti-patterns

Production checklist

Kết luận

Tài liệu tham khảo

Related posts

XSS trong React/Next.js: Làm chủ dangerouslySetInnerHTML an toàn

Xây Virtual Classroom & Collaborative Whiteboard với Canvas/WebRTC

Content Security Policy trong Next.js: Chặn script lạ bằng CSP Header