前端渲染十万条数据的实现方案与优化技巧

原创已于 2025-05-30 15:11:23 修改 · 386 阅读

4 ·

CC 4.0 BY-SA版权

文章标签：

#前端

于 2025-05-30 15:05:36 首次发布

前端高效渲染十万条数据的实现方案与优化技巧

一、时间分片
二、虚拟列表
三、IntersectionObserver api
四、虚拟DOM优化

一、时间分片

时间分片是一种前端性能优化策略，通过将大量数据的渲染任务拆分成多个小任务（分片），在浏览器的每一帧中逐步执行，避免长时间阻塞主线程，从而保证页面的流畅交互。
实现原理：

分块处理机制：将完整数据集按固定大小分割为多个数据块（如100条/块），每个事件循环周期仅处理单个数据块的内容
异步任务调度：使用setTimeout将后续处理任务放入事件队列。即使设置0ms延迟也会让出当前主线程控制权
渐进式渲染：每个分片处理完成后浏览器可获得执行渲染的机会，实现边加载边显示的效果

1.使用 setTimeout 分片

function renderData(data, chunkSize = 100) {
  let index = 0;
  function processChunk() {
    const chunk = data.slice(index, index + chunkSize);
    chunk.forEach(item => {
      const div = document.createElement('div');
      div.textContent = item;
      document.body.appendChild(div);
    });
    index += chunkSize;
    if (index < data.length) {
      setTimeout(processChunk, 0); // 下一事件循环继续渲染
    }
  }
  processChunk();
}

2.使用 requestAnimationFrame（更流畅）

function renderWithRAF(data, chunkSize = 100) {
  let index = 0;
  function processChunk() {
    const startTime = performance.now();
    while (index < data.length && performance.now() - startTime < 16) {
      // 每帧最多执行 16ms（60fps 标准）
      const item = data[index];
      const div = document.createElement('div');
      div.textContent = item;
      document.body.appendChild(div);
      index++;
    }
    if (index < data.length) {
      requestAnimationFrame(processChunk);
    }
  }
  processChunk();
}

3.使用 requestIdleCallback（后台低优先级渲染），用于浏览器的空闲时间执行非紧急的、对实时性要求不高的渲染任务

function renderWithIdle(data, chunkSize = 100) {
  let index = 0;
  function processChunk(deadline) {
    while (index < data.length && deadline.timeRemaining() > 0) {
      const item = data[index];
      const div = document.createElement('div');
      div.textContent = item;
      document.body.appendChild(div);
      index++;
    }
    if (index < data.length) {
      requestIdleCallback(processChunk); // 浏览器空闲时继续
    }
  }
  requestIdleCallback(processChunk);
}

二、虚拟列表

虚拟列表(Virtual List)是一种优化长列表渲染性能的前端技术，渲染当前可视区域内的列表项，而不是渲染整个列表。这样可以显著减少DOM节点的数量，提高性能。
实现原理：
1.可视区域计算：确定容器的可视高度，计算当前滚动位置，确定可见项的起始和结束索引
2.动态渲染：只渲染当前可见的列表项。使用空白占位元素(padding)模拟完整列表的高度
3.滚动处理：监听滚动事件，滚动时动态更新可见项

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>虚拟列表示例 - 十万条数据</title>
    <style>
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }

        body {
            font-family: Arial, sans-serif;
            padding: 20px;
        }

        #app {
            max-width: 600px;
            margin: 0 auto;
        }

        h1 {
            text-align: center;
            margin-bottom: 20px;
        }

        .virtual-list-container {
            height: 500px;
            border: 1px solid #ddd;
            overflow-y: auto;
            position: relative;
        }

        .virtual-list-content {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
        }

        .list-item {
            padding: 12px 16px;
            border-bottom: 1px solid #eee;
            display: flex;
            justify-content: space-between;
        }

        .list-item:hover {
            background-color: #f5f5f5;
        }

        .item-index {
            color: #999;
            font-size: 14px;
        }

        .item-content {
            flex-grow: 1;
            text-align: center;
        }

        .stats {
            margin-top: 20px;
            padding: 10px;
            background-color: #f8f8f8;
            border-radius: 4px;
        }
    </style>
</head>
<body>
<div id="app">
    <h1>虚拟列表示例 - 十万条数据</h1>

    <div class="virtual-list-container" id="listContainer">
        <div class="virtual-list-content" id="listContent"></div>
    </div>

    <div class="stats">
        <p>总数据量: <span id="totalCount">0</span> 条</p>
        <p>实际渲染DOM: <span id="renderCount">0</span> 条</p>
        <p>当前可见范围: <span id="visibleRange">0-0</span></p>
    </div>
</div>

<script>
    // 配置参数
    const config = {
        container: document.getElementById('listContainer'),
        content: document.getElementById('listContent'),
        itemHeight: 50, // 每项高度(px)
        totalItems: 100000, // 总数据量
        buffer: 5 // 缓冲区项数
    };

    // 统计数据元素
    const stats = {
        totalCount: document.getElementById('totalCount'),
        renderCount: document.getElementById('renderCount'),
        visibleRange: document.getElementById('visibleRange')
    };

    // 生成模拟数据
    function generateData(count) {
        const data = [];
        for (let i = 0; i < count; i++) {
            data.push(`列表项 ${i + 1}`);
        }
        return data;
    }

    // 渲染单个列表项
    function renderItem(item, index) {
        const element = document.createElement('div');
        element.className = 'list-item';
        element.innerHTML = `
        <span class="item-index">#${index + 1}</span>
        <span class="item-content">${item}</span>
      `;
        element.style.height = `${config.itemHeight}px`;
        return element;
    }

    // 初始化虚拟列表
    function initVirtualList() {
        const data = generateData(config.totalItems);

        // 设置容器总高度
        config.container.style.height = '500px';
        config.content.style.width = '100%';

        // 计算可见项数量
        const viewportHeight = config.container.clientHeight;
        const visibleItemCount = Math.ceil(viewportHeight / config.itemHeight) + config.buffer;

        // 更新统计信息
        stats.totalCount.textContent = config.totalItems.toLocaleString();

        // 当前渲染范围
        let startIndex = 0;
        let endIndex = 0;

        // 渲染可见项
        function renderVisibleItems() {
            const scrollTop = config.container.scrollTop;

            // 计算新的起止索引
            const newStartIndex = Math.max(
                0,
                Math.floor(scrollTop / config.itemHeight) - config.buffer
            );

            const newEndIndex = Math.min(
                data.length,
                newStartIndex + visibleItemCount + config.buffer
            );

            // 如果范围没有变化，则不需要重新渲染
            if (newStartIndex === startIndex && newEndIndex === endIndex) {
                return;
            }

            startIndex = newStartIndex;
            endIndex = newEndIndex;

            // 更新内容容器位置
            config.content.style.transform = `translateY(${startIndex * config.itemHeight}px)`;

            // 清空当前内容
            config.content.innerHTML = '';

            // 渲染可见项
            for (let i = startIndex; i < endIndex; i++) {
                config.content.appendChild(renderItem(data[i], i));
            }

            // 更新统计信息
            stats.renderCount.textContent = (endIndex - startIndex).toLocaleString();
            stats.visibleRange.textContent = `${startIndex + 1}-${endIndex}`;
        }

        // 初始渲染
        renderVisibleItems();

        // 使用requestAnimationFrame优化滚动性能
        let isScrolling = false;
        config.container.addEventListener('scroll', () => {
            if (!isScrolling) {
                requestAnimationFrame(() => {
                    renderVisibleItems();
                    isScrolling = false;
                });
                isScrolling = true;
            }
        });
        
    }

    // 页面加载完成后初始化
    window.addEventListener('DOMContentLoaded', initVirtualList);
</script>
</body>
</html>

三、IntersectionObserver api

IntersectionObserver API 实现"加载更多"功能的核心原理是通过观察一个"哨兵元素"（sentinel）与视口的交叉状态，当这个元素进入视口时触发数据加载。
实现原理：
1.哨兵元素设置：在内容列表的最后放置一个特殊的空元素,这个元素没有高度或很小高度，仅作为观察目标
2.触发条件：当用户滚动页面，哨兵元素进入视口时,IntersectionObserver 检测到交叉状态变化，触发回调函数执行加载逻辑
3.加载过程：在回调中检查 entry.isIntersecting 是否为 true，如果是，则发起数据请求，获取新数据后追加到列表末尾，哨兵元素自动被推到新内容的最后，等待下次触发

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>十万条数据加载示例</title>
    <style>
        #container {
            max-width: 800px;
            margin: 0 auto;
            font-family: Arial, sans-serif;
        }

        .item {
            padding: 15px;
            border-bottom: 1px solid #eee;
            margin-bottom: 5px;
            background: #f9f9f9;
        }

        #loading {
            text-align: center;
            padding: 20px;
            color: #666;
        }

        #sentinel {
            height: 1px;
            visibility: hidden;
        }
    </style>
</head>
<body>
<div id="container">
    <h1>大数据列表加载</h1>
    <div id="list"></div>
    <div id="loading">加载中...</div>
    <div id="sentinel"></div>
</div>

<script>
    // 配置
    const PAGE_SIZE = 100; // 每页加载数量
    const TOTAL_ITEMS = 100000; // 总数据量
    let currentPage = 0;
    let isLoading = false;

    // DOM 元素
    const list = document.getElementById('list');
    const loading = document.getElementById('loading');
    const sentinel = document.getElementById('sentinel');

    // 初始化观察者
    const observer = new IntersectionObserver((entries) => {
        if (entries[0].isIntersecting && !isLoading && currentPage * PAGE_SIZE < TOTAL_ITEMS) {
            loadMoreData();
        }
    }, {
        threshold: 0.1
    });

    observer.observe(sentinel);

    // 加载数据函数
    async function loadMoreData() {
        isLoading = true;
        loading.style.display = 'block';

        // 模拟API请求延迟
        await new Promise(resolve => setTimeout(resolve, 500));

        // 生成模拟数据
        const start = currentPage * PAGE_SIZE;
        const end = Math.min(start + PAGE_SIZE, TOTAL_ITEMS);
        const fragment = document.createDocumentFragment();

        for (let i = start; i < end; i++) {
            const item = document.createElement('div');
            item.className = 'item';
            item.textContent = `项目 ${i + 1}: 这是第 ${i + 1} 条数据，共 ${TOTAL_ITEMS} 条`;
            fragment.appendChild(item);
        }

        list.appendChild(fragment);
        currentPage++;

        loading.style.display = 'none';
        isLoading = false;

        // 如果已加载全部数据，停止观察
        if (currentPage * PAGE_SIZE >= TOTAL_ITEMS) {
            observer.unobserve(sentinel);
            loading.textContent = '已加载全部数据';
        }
    }

    // 初始加载
    loadMoreData();
</script>
</body>
</html>

四、虚拟DOM优化

当需要向文档中添加多个节点时，如果直接逐个添加，每次操作都会引起页面的重新渲染（回流和重绘），导致性能消耗较大。使用document.createDocumentFragment()创建虚拟dom可以减少页面渲染的次数，从而提高性能。因为文档片段存在于内存中，对其操作不会立即触发页面的重新渲染。

function renderData(data, chunkSize = 100) {
  let index = 0;
  function processChunk() {
    const fragment = document.createDocumentFragment(); // 创建文档片段
    const chunk = data.slice(index, index + chunkSize);
    chunk.forEach(item => {
      const div = document.createElement('div');
      div.textContent = item;
      fragment.appendChild(div); // 先将元素添加到文档片段
    });
    document.body.appendChild(fragment); // 一次性将片段添加到DOM
    index += chunkSize;
    if (index < data.length) {
      setTimeout(processChunk, 0);
    }
  }
  processChunk();
}