High Performance JavaScript ListView 2026: เทคนิค Virtualization และการเพิ่มประสิทธิภาพ

// ตัวอย่าง naive approach ที่ทำให้เกิดปัญหาประสิทธิภาพ
interface ListItem {
  id: number;
  title: string;
  description: string;
}

function renderAllItems(items: ListItem[]): void {
  const container = document.getElementById('list-container');
  
  // สิ่งนี้จะสร้าง DOM nodes 10,000 อันพร้อมกัน
  items.forEach(item => {
    const element = document.createElement('div');
    element.className = 'list-item';
    element.innerHTML = `
      <h3>${item.title}</h3>
      <p>${item.description}</p>
    `;
    container?.appendChild(element);
  });
}

interface VirtualListConfig {
  itemHeight: number;
  containerHeight: number;
  overscan: number;
  totalItems: number;
}

interface VisibleRange {
  startIndex: number;
  endIndex: number;
  offsetY: number;
}

function calculateVisibleRange(
  scrollTop: number,
  config: VirtualListConfig
): VisibleRange {
  const { itemHeight, containerHeight, overscan, totalItems } = config;
  
  // คำนวณ index ของรายการแรกที่มองเห็น
  const startIndex = Math.max(
    0,
    Math.floor(scrollTop / itemHeight) - overscan
  );
  
  // คำนวณจำนวนรายการที่พอดีใน viewport
  const visibleCount = Math.ceil(containerHeight / itemHeight);
  
  // คำนวณ index ของรายการสุดท้ายที่ต้อง render
  const endIndex = Math.min(
    totalItems - 1,
    startIndex + visibleCount + overscan * 2
  );
  
  // Offset เพื่อวางตำแหน่งรายการอย่างถูกต้อง
  const offsetY = startIndex * itemHeight;
  
  return { startIndex, endIndex, offsetY };
}

import React, { useState, useCallback, useMemo, useRef } from 'react';

interface VirtualListProps<T> {
  items: T[];
  itemHeight: number;
  containerHeight: number;
  renderItem: (item: T, index: number) => React.ReactNode;
  overscan?: number;
}

function VirtualList<T>({
  items,
  itemHeight,
  containerHeight,
  renderItem,
  overscan = 3
}: VirtualListProps<T>): React.ReactElement {
  const [scrollTop, setScrollTop] = useState(0);
  const containerRef = useRef<HTMLDivElement>(null);
  
  const totalHeight = items.length * itemHeight;
  
  const visibleRange = useMemo(() => {
    const startIndex = Math.max(
      0,
      Math.floor(scrollTop / itemHeight) - overscan
    );
    const visibleCount = Math.ceil(containerHeight / itemHeight);
    const endIndex = Math.min(
      items.length - 1,
      startIndex + visibleCount + overscan * 2
    );
    return { startIndex, endIndex };
  }, [scrollTop, itemHeight, containerHeight, items.length, overscan]);
  
  const handleScroll = useCallback((e: React.UIEvent<HTMLDivElement>) => {
    setScrollTop(e.currentTarget.scrollTop);
  }, []);
  
  const visibleItems = useMemo(() => {
    const result: React.ReactNode[] = [];
    for (let i = visibleRange.startIndex; i <= visibleRange.endIndex; i++) {
      result.push(
        <div
          key={i}
          style={{
            position: 'absolute',
            top: i * itemHeight,
            height: itemHeight,
            width: '100%'
          }}
        >
          {renderItem(items[i], i)}
        </div>
      );
    }
    return result;
  }, [visibleRange, items, itemHeight, renderItem]);
  
  return (
    <div
      ref={containerRef}
      onScroll={handleScroll}
      style={{
        height: containerHeight,
        overflow: 'auto',
        position: 'relative'
      }}
    >
      <div style={{ height: totalHeight, position: 'relative' }}>
        {visibleItems}
      </div>
    </div>
  );
}

interface MeasuredItem {
  index: number;
  height: number;
  offset: number;
}

class DynamicSizeCache {
  private measuredItems: Map<number, MeasuredItem> = new Map();
  private estimatedItemHeight: number;
  private totalMeasuredHeight: number = 0;
  private measuredCount: number = 0;
  
  constructor(estimatedItemHeight: number) {
    this.estimatedItemHeight = estimatedItemHeight;
  }
  
  setMeasurement(index: number, height: number): void {
    const existing = this.measuredItems.get(index);
    
    if (existing) {
      this.totalMeasuredHeight -= existing.height;
    } else {
      this.measuredCount++;
    }
    
    this.totalMeasuredHeight += height;
    this.measuredItems.set(index, {
      index,
      height,
      offset: this.calculateOffset(index)
    });
  }
  
  getEstimatedHeight(totalItems: number): number {
    if (this.measuredCount === 0) {
      return totalItems * this.estimatedItemHeight;
    }
    
    const averageHeight = this.totalMeasuredHeight / this.measuredCount;
    const unmeasuredCount = totalItems - this.measuredCount;
    
    return this.totalMeasuredHeight + unmeasuredCount * averageHeight;
  }
  
  private calculateOffset(index: number): number {
    let offset = 0;
    for (let i = 0; i < index; i++) {
      const item = this.measuredItems.get(i);
      offset += item ? item.height : this.estimatedItemHeight;
    }
    return offset;
  }
  
  getItemOffset(index: number): number {
    const item = this.measuredItems.get(index);
    return item ? item.offset : this.calculateOffset(index);
  }
  
  findIndexAtOffset(offset: number, totalItems: number): number {
    // Binary search เพื่อประสิทธิภาพ
    let low = 0;
    let high = totalItems - 1;
    
    while (low <= high) {
      const mid = Math.floor((low + high) / 2);
      const midOffset = this.getItemOffset(mid);
      
      if (midOffset === offset) {
        return mid;
      } else if (midOffset < offset) {
        low = mid + 1;
      } else {
        high = mid - 1;
      }
    }
    
    return Math.max(0, low - 1);
  }
}

class LazyLoadManager {
  private observer: IntersectionObserver;
  private loadCallbacks: Map<Element, () => void> = new Map();
  
  constructor(rootMargin: string = '100px') {
    this.observer = new IntersectionObserver(
      (entries) => this.handleIntersection(entries),
      {
        rootMargin,
        threshold: 0
      }
    );
  }
  
  private handleIntersection(entries: IntersectionObserverEntry[]): void {
    entries.forEach(entry => {
      if (entry.isIntersecting) {
        const callback = this.loadCallbacks.get(entry.target);
        if (callback) {
          callback();
          this.observer.unobserve(entry.target);
          this.loadCallbacks.delete(entry.target);
        }
      }
    });
  }
  
  observe(element: Element, onLoad: () => void): void {
    this.loadCallbacks.set(element, onLoad);
    this.observer.observe(element);
  }
  
  disconnect(): void {
    this.observer.disconnect();
    this.loadCallbacks.clear();
  }
}

// การใช้งานใน React component
function LazyListItem({ 
  data, 
  onVisible 
}: { 
  data: ListItem; 
  onVisible: () => void; 
}): React.ReactElement {
  const ref = useRef<HTMLDivElement>(null);
  
  useEffect(() => {
    const manager = new LazyLoadManager('50px');
    
    if (ref.current) {
      manager.observe(ref.current, onVisible);
    }
    
    return () => manager.disconnect();
  }, [onVisible]);
  
  return (
    <div ref={ref} className="lazy-item">
      {/* Content ถูก render หลังจากมองเห็น */}
    </div>
  );
}

interface WorkerMessage {
  type: 'sort' | 'filter' | 'transform';
  data: unknown[];
  options?: Record<string, unknown>;
}

interface WorkerResponse {
  type: string;
  result: unknown[];
  duration: number;
}

self.onmessage = (event: MessageEvent<WorkerMessage>) => {
  const { type, data, options } = event.data;
  const startTime = performance.now();
  
  let result: unknown[];
  
  switch (type) {
    case 'sort':
      result = sortData(data, options);
      break;
    case 'filter':
      result = filterData(data, options);
      break;
    case 'transform':
      result = transformData(data, options);
      break;
    default:
      result = data;
  }
  
  const response: WorkerResponse = {
    type,
    result,
    duration: performance.now() - startTime
  };
  
  self.postMessage(response);
};

function sortData(
  data: unknown[], 
  options?: Record<string, unknown>
): unknown[] {
  const key = options?.sortKey as string || 'id';
  const direction = options?.direction as 'asc' | 'desc' || 'asc';
  
  return [...data].sort((a: Record<string, unknown>, b: Record<string, unknown>) => {
    const aVal = a[key];
    const bVal = b[key];
    const comparison = aVal < bVal ? -1 : aVal > bVal ? 1 : 0;
    return direction === 'asc' ? comparison : -comparison;
  });
}

function filterData(
  data: unknown[], 
  options?: Record<string, unknown>
): unknown[] {
  const predicate = options?.predicate as (item: unknown) => boolean;
  return predicate ? data.filter(predicate) : data;
}

function transformData(
  data: unknown[], 
  options?: Record<string, unknown>
): unknown[] {
  const transformer = options?.transform as (item: unknown) => unknown;
  return transformer ? data.map(transformer) : data;
}

class ListWorkerManager {
  private worker: Worker;
  private pendingTasks: Map<string, {
    resolve: (value: unknown[]) => void;
    reject: (reason: Error) => void;
  }> = new Map();
  
  constructor() {
    this.worker = new Worker(
      new URL('./worker.ts', import.meta.url)
    );
    this.worker.onmessage = this.handleMessage.bind(this);
  }
  
  private handleMessage(event: MessageEvent<WorkerResponse>): void {
    const { type, result } = event.data;
    const task = this.pendingTasks.get(type);
    
    if (task) {
      task.resolve(result);
      this.pendingTasks.delete(type);
    }
  }
  
  async sortData<T>(
    data: T[], 
    sortKey: keyof T, 
    direction: 'asc' | 'desc' = 'asc'
  ): Promise<T[]> {
    return this.executeTask('sort', data, { sortKey, direction }) as Promise<T[]>;
  }
  
  private executeTask(
    type: string, 
    data: unknown[], 
    options?: Record<string, unknown>
  ): Promise<unknown[]> {
    return new Promise((resolve, reject) => {
      this.pendingTasks.set(type, { resolve, reject });
      this.worker.postMessage({ type, data, options });
    });
  }
  
  terminate(): void {
    this.worker.terminate();
  }
}

class ObjectPool<T> {
  private pool: T[] = [];
  private factory: () => T;
  private reset: (obj: T) => void;
  private maxSize: number;
  
  constructor(
    factory: () => T,
    reset: (obj: T) => void,
    maxSize: number = 100
  ) {
    this.factory = factory;
    this.reset = reset;
    this.maxSize = maxSize;
  }
  
  acquire(): T {
    if (this.pool.length > 0) {
      return this.pool.pop()!;
    }
    return this.factory();
  }
  
  release(obj: T): void {
    if (this.pool.length < this.maxSize) {
      this.reset(obj);
      this.pool.push(obj);
    }
  }
  
  clear(): void {
    this.pool = [];
  }
  
  get size(): number {
    return this.pool.length;
  }
}

// การใช้งานสำหรับ DOM elements
const elementPool = new ObjectPool<HTMLDivElement>(
  () => document.createElement('div'),
  (el) => {
    el.className = '';
    el.innerHTML = '';
    el.style.cssText = '';
  },
  50
);