大量数据的优化之虚拟滚动和web workers

最新推荐文章于 2024-03-31 00:08:43 发布

wyzqhhhh

最新推荐文章于 2024-03-31 00:08:43 发布

阅读量561

点赞数 5

文章标签：前端

本文链接：https://blog.csdn.net/wyzqhhhh/article/details/136715864

版权

本文介绍了如何通过虚拟滚动技术、利用WebWorkers异步处理大量数据以及实施分页加载、懒加载和列懒加载策略，有效减少DOM元素，提升网页的渲染速度和响应能力。

摘要由CSDN通过智能技术生成

1.虚拟滚动：

只渲染可见区域，而不是把所有数据全部渲染出来。这样极大的减少了dom元素数量，加速了渲染速度。

通过设置内容容器的高度来容纳所有数据，然后定义一个函数根据滚动的位置计算出可见区域的数据范围，再使用渲染函数传入可见数据的范围进行只渲染可见区域的数据。

（1）设置每条数据的高度和容纳所有数据的高度

（2）主要是使用scrollTop找出卷去的高度，clientHeight找出数据可见区域的高度。

（3）第一个数据index：scrollTop/itemHeight 然后使用Math.floor进行向下取整。

（4）最后一个index： scrollTop+clientHeight/itemHeight 然后用Math.ceil向上取整

（5）然后放入渲染函数中for循环用document.createElement('div');一个个创建div。

（6）最后，添加一个事件监听器container.addEventListener('scroll', renderVisibleItems);

（7）在这个修改后的代码中，函数模拟了一个数据源，根据索引返回对应的数据。在渲染函数中，每次创建div 元素时调用 getData函数来填充相应的数据，从而实现了根据可见区域动态渲染数据的效果。

1.虚拟滚动：只渲染可见区域的数据行，而不是将所有数据都一次性渲染出来。这样可以极大地减少DOM元素的数量，提升页面的加载速度和渲染性能。

（1）.我们通过设置内容容器的高度来容纳所有数据，然后根据滚动的位置计算出可见区域的数据范围，仅渲染可见区域的数据。

（2）.使用组件库：react-virtualized：它提供了一系列用于虚拟滚动的组件，包括列表、表格等。它支持动态高度和宽度，可以适应各种复杂的布局。

react-window：提供了一系列高性能的虚拟滚动组件，如列表、网格、表格等。react-window更轻量、更易于集成和定制。

<body>
  <div id="container">
    <div id="content"></div>
  </div>
  <script>
    const container = document.getElementById('container');
    const content = document.getElementById('content');
    const itemHeight = 50;
    const totalItems = 1000; // 假设有1000条数据

    // 设置内容容器的高度，使其足够容纳所有数据
    content.style.height = `${itemHeight * totalItems}px`;

    // 模拟数据源
    function getData(index) {
      return `Item ${index + 1}`;
    }

    // 计算可见区域内的数据范围
    function calculateVisibleItems() {
      const scrollTop = container.scrollTop;
      const startIndex = Math.floor(scrollTop / itemHeight);
      const endIndex = Math.min(
        totalItems - 1,
        Math.ceil((scrollTop + container.clientHeight) / itemHeight)
      );
      return { startIndex, endIndex };
    }

    // 渲染可见区域的数据
    function renderVisibleItems() {
      const { startIndex, endIndex } = calculateVisibleItems();
      // 清空内容容器
      content.innerHTML = '';
      // 仅渲染可见区域的数据，根据可见区域内的数据范围，动态地创建相应数量的元素并填充数据
      for (let i = startIndex; i <= endIndex; i++) {
        const item = document.createElement('div');
        item.className = 'item';
        item.textContent = getData(i); // 填充对应的数据
        content.appendChild(item);
      }
    }

    // 初始化渲染
    renderVisibleItems();

    // 监听滚动事件，实时更新可见区域的数据
    container.addEventListener('scroll', renderVisibleItems);
  </script>
</body>

2.使用Web Workers：

我们创建了一个包含 1000 行、每行 10 列的虚拟表格数据，并将其发送给 Web Worker 进行处理。Web Worker 将会将每个单元格内容转换为大写字母，并将处理后的数据发送回主线程。

通过这种方式，可以在不阻塞主线程的情况下处理大量数据，从而提高页面的性能和响应速度。

workers:
// 在 Web Worker 中处理数据
self.addEventListener('message', function(e) {
    // 接收主线程发送的数据
    var data = e.data;
    // 在这里进行数据处理或计算操作
    var result = processData(data);
    // 将处理结果发送回主线程
    self.postMessage(result);
});

function processData(data) {
    // 在这里进行数据处理或计算操作
    // 这只是一个示例，实际操作根据具体需求编写
    return data.map(row => row.map(cell => cell.toUpperCase()));
}
main.js:
// 创建 Web Worker 实例
const worker = new Worker('worker.js');

// 模拟大量数据
const data = [];
for (let i = 0; i < 1000; i++) {
    const row = [];
    for (let j = 0; j < 10; j++) {
        row.push(`Row ${i + 1}, Cell ${j + 1}`);
    }
    data.push(row);
}

// 向 Web Worker 发送数据
worker.postMessage(data);

// 接收 Web Worker 处理后的结果
worker.addEventListener('message', function(e) {
    const result = e.data;
    console.log('处理后的数据:', result);
});

其他方法：

3.分页加载：

将数据分页加载，每次只加载当前页的数据，而不是一次性加载所有数据。这样可以减少一次性加载大量数据所带来的性能问题，提升页面的响应速度。

4.懒加载：

只在用户需要时加载数据，而不是提前加载所有数据。例如，当用户滚动到表格底部时，再动态加载下一页的数据。

5.列的懒加载：

只渲染当前可见区域的列，而不是一次性渲染所有列。当用户水平滚动表格时，动态加载新的列数据。

6.数据缓存：

将经常使用的数据缓存到内存或者LocalStorage中，减少重复请求数据的次数。

wyzqhhhh

关注

5
点赞
踩
11

收藏

觉得还不错? 一键收藏
0
评论
大量数据的优化之虚拟滚动和web workers

通过设置内容容器的高度来容纳所有数据，然后定义一个函数根据滚动的位置计算出可见区域的数据范围，再使用渲染函数传入可见数据的范围进行只渲染可见区域的数据。（1）设置每条数据的高度和容纳所有数据的高度（2）主要是使用scrollTop找出卷去的高度，clientHeight找出数据可见区域的高度。（3）第一个数据index：scrollTop/itemHeight 然后使用Math.floor进行向下取整。
复制链接

扫一扫