数据量大如何优化渲染、虚拟列表技术、js虚拟列表、Vue Virtual Scroller 实现虚拟滚动列表、react-virtualized 库实现的虚拟列表

发布时间：2024年01月20日

数据量大如何优化渲染

当处理大量数据时，页面可能会出现性能问题。为了优化性能，可以考虑使用虚拟列表和数据缓存机制。

虚拟列表是一种UI优化技术，它只渲染可见区域的数据项，而不是一次性渲染全部数据。这样可以减少DOM元素数量，提高页面性能和用户体验。

数据缓存机制可以将已经请求过的数据暂存到内存或本地存储中，当需要再次使用这些数据时，可以直接从缓存中获取，减少对服务器的请求次数，提高数据加载速度。

虚拟列表技术

虚拟列表技术旨在解决大量数据在前端页面渲染时可能引发的性能问题。它通过只渲染用户当前可见区域内的数据项，而不是一次性渲染所有数据，从而提高页面的加载速度和性能。

实现虚拟列表的关键思想是根据用户的滚动位置动态渲染数据项，这样可以避免在页面中加载大量数据时导致的卡顿或延迟。

以下是虚拟列表技术的一般实现步骤：

确定可见区域： 首先，需要确定用户当前可见的区域，通常是一个固定高度的容器，比如一个滚动容器或者一个固定高度的列表。
动态渲染数据项： 根据用户的滚动位置，动态计算出当前可见区域内需要显示的数据项。只渲染这些数据项，而不是全部数据。
滚动事件监听： 监听滚动事件，当用户滚动时，根据滚动位置动态渲染新的数据项或更新已有数据项。
数据项的复用： 当数据项离开用户可见区域时，可以将其移除或者复用到可见区域内新的位置，而不是简单地销毁或隐藏。
性能优化： 可以结合分页加载或滚动加载等技术，避免一次性加载大量数据，从而进一步优化性能。

虚拟列表技术通常与大型数据集结合使用，比如数千甚至数百万条数据。它能够在保持页面流畅性的同时，有效地展示大量数据，适用于需要处理大型数据集的各种应用场景，比如数据表格、聊天记录、日历等。

在实际项目中，虚拟列表技术可以通过现有的前端框架或库来实现，比如 React 中的 react-virtualized、Vue 中的 vue-virtual-scroller 等。这些库提供了现成的虚拟列表组件，简化了虚拟列表的实现过程，同时提供了更多的性能优化和定制选项。

js虚拟列表

当数据量很大时，一次性将所有数据渲染到页面上可能会导致页面加载缓慢或无法显示最新的效果。为了解决这个问题，我们可以使用虚拟列表和分页加载或滚动加载的技术。

以下是一个示例，展示了如何使用虚拟列表和滚动加载来处理大量数据的性能问题。
请添加图片描述

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <title>数据量大的话如何优化</title>
  <style>
    .container {
      height: 720px;
      overflow-y: scroll;
      border: 1px solid #ccc;
      padding: 10px;
    }

    .content {
      height: auto;
    }

    .item {
      height: 30px;
      border: 1px solid lightblue;
      margin-bottom: 5px;
      padding: 0 10px;
      line-height: 30px;
    }
  </style>
</head>

<body>
  <h1>无限滚动的虚拟列表</h1>
  <div class="container">
    <div class="content"></div>
  </div>

  <script>
    const pageSize = 50 // 每页加载的数据项数量
    const container = document.querySelector('.container')
    const content = document.querySelector('.content')
    let currentPage = 1

    // 渲染指定范围的数据项
    function renderList(start, end) {
      for (let i = start; i < end; i++) {
        const listItem = document.createElement('div')
        listItem.classList.add('item')
        listItem.textContent = `Item ${i + 1}`
        content.appendChild(listItem)
      }
    }

    // 加载更多数据
    function loadMoreData() {
      const start = (currentPage - 1) * pageSize
      const end = currentPage * pageSize

      renderList(start, end)
      currentPage++
    }

    // 监听滚动事件
    container.addEventListener('scroll', () => {
      const scrollTop = container.scrollTop
      const containerHeight = container.clientHeight
      const contentHeight = content.clientHeight

      // 判断是否滚动到底部
      if (scrollTop + containerHeight >= contentHeight) {
        loadMoreData()
      }
    })

    loadMoreData() // 初始加载第一页数据
  </script>
</body>

</html>

在这个示例中，我们创建了一个虚拟列表，并使用滚动加载的方式来渲染大量数据。具体的实现思路如下：

首先，我们定义了每页加载的数据项数量 pageSize，在示例中设置为 50。
我们通过 document.querySelector 方法获取到列表容器和内容容器的 DOM 元素。
然后，我们定义了一个变量 currentPage，用于追踪当前加载的页数，初始值为 1。
接下来，我们定义了两个函数：
- renderList(start, end)：该函数用于渲染指定范围的数据项。通过一个循环，我们创建了列表项的 DOM 元素，并将其添加到内容容器中。
- loadMoreData()：该函数用于加载更多数据。根据当前页数和每页数据项数量计算出需要加载的数据项的起始索引和结束索引，并调用 renderList 函数进行渲染。然后，将当前页数加一，以便在下次加载时加载下一页的数据。
我们通过 addEventListener 方法监听列表容器的滚动事件。在滚动事件处理函数中，我们获取滚动容器的滚动位置、容器高度和内容高度。通过比较滚动位置和容器高度与内容高度的关系，判断是否滚动到了底部。如果滚动到了底部，则调用 loadMoreData 函数加载更多数据。
最后，我们调用 loadMoreData 函数来初始加载第一页的数据。

这样，当用户滚动到列表底部时，会自动加载更多数据，从而实现了滚动加载的效果。通过分页加载数据，我们可以避免一次性渲染所有数据导致的性能问题，同时保证页面能够显示最新的效果。

Vue Virtual Scroller 实现虚拟滚动列表

以下是一个使用 Vue Virtual Scroller 插件的示例代码，它展示了一个虚拟滚动列表的效果：
请添加图片描述

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <title>Vue Virtual Scroller虚拟滚动列表</title>
  <script src="https://cdn.jsdelivr.net/npm/vue@2.6.14/dist/vue.js"></script>
  <script src="https://unpkg.com/vue-virtual-scroller@2.3.4"></script>
  <style>
    .item {
      height: 30px;
      line-height: 30px;
      border: 1px solid #ccc;
      margin-bottom: 5px;
      padding: 5px;
    }
  </style>
</head>

<body>
  <div id="app">
    <div>
      <div v-virtual-scroller="{ items: items, itemHeight: 30 }">
        <div class="item" v-for="(item, index) in items" :key="index">{{ item.text }}</div>
      </div>
    </div>
  </div>

  <script>
    new Vue({
      el: '#app',
      data: {
        items: []
      },
      created() {
        for (let i = 0; i < 1000; i++) {
          this.items.push({ text: `Item ${i + 1}` })
        }
      }
    })
  </script>
</body>

</html>

这个示例展示了一个包含1000个项目的列表，每个项目都有一个高度为30像素的项。通过使用 v-virtual-scroller 指令，我们告诉 Vue Virtual Scroller 插件要渲染的项目列表和每个项目的高度。插件会根据可视区域的大小动态渲染列表项，从而提高性能并减少内存占用。

在这个示例中，我们使用了 Vue 的 v-for 指令来循环渲染 items 数组中的每个项目，并为每个项目创建一个具有 .item 类的 <div> 元素。这些项目会被包裹在具有 v-virtual-scroller 指令的 <div> 元素中。

在 Vue 实例的 created 钩子中，我们生成了一个包含1000个项目的 items 数组，每个项目都有一个文本属性，用于显示在列表中。

当您运行这段代码时，您将看到一个滚动列表，其中只有可见区域内的项目被渲染，而不是一次性渲染整个列表。这样可以提高性能，特别是当列表非常长时。

react-virtualized 库实现的虚拟列表

请添加图片描述
当使用react-virtualized库来实现虚拟列表时，我们需要使用List组件和自定义的rowRenderer函数。

import React from 'react'
import { List } from 'react-virtualized'
import 'react-virtualized/styles.css'

// 生成虚拟列表的数据
const list = Array(1000)
  .fill()
  .map((_, index) => `Item ${index + 1}`)

// 渲染单个列表项的函数
function rowRenderer({ key, index, style }) {
  return (
    <div key={key} style={style}>
      {list[index]}
    </div>
  )
}

// React组件
function App() {
  return <List width={300} height={500} rowCount={list.length} rowHeight={30} rowRenderer={rowRenderer} />
}

export default App

使用react-virtualized库实现的虚拟列表的示例。让我们逐步解释代码的思路和功能：

import React from 'react';
import { List } from 'react-virtualized';
import 'react-virtualized/styles.css';

首先，我们导入React库以及我们需要使用的List组件和'react-virtualized/styles.css'样式文件。

const list = Array(1000)
  .fill()
  .map((_, index) => `Item ${index + 1}`);

然后，我们创建一个名为list的数组，其中包含1000个元素。我们使用Array的fill方法填充数组，并使用map方法为每个元素生成一个字符串，格式为Item ${index + 1}。

function rowRenderer({ key, index, style }) {
  return (
    <div key={key} style={style}>
      {list[index]}
    </div>
  );
}

接下来，我们定义了rowRenderer函数，它接受一个参数对象，其中包含了key、index和style属性。这个函数用于渲染每个列表项。在这里，我们使用key属性来唯一标识每个列表项，使用style属性来为每个列表项设置样式，然后使用list[index]来显示对应的文本内容。

function App() {
  return <List width={300} height={500} rowCount={list.length} rowHeight={30} rowRenderer={rowRenderer} />;
}

export default App;

最后，我们创建了一个名为App的React组件，并在该组件的返回值中使用List组件来实现虚拟列表。我们给List组件传递了一些属性：

width：列表的宽度为300px；
height：列表的高度为500px；
rowCount：列表项的总数为list.length；
rowHeight：每个列表项的高度为30px；
rowRenderer：使用我们定义的rowRenderer函数来渲染每个列表项。

通过这段代码，我们将获得一个具有虚拟化功能的列表组件，它将只渲染可见区域内的列表项，从而提高性能，特别是当列表项数量很大时。

请注意，您需要确保已正确安装了react-virtualized库，并将其作为依赖项添加到您的项目中。

安装react-virtualized库

npm install react-virtualized --save

持续学习总结记录中，回顾一下上面的内容：
数据量大如何优化渲染？js虚拟列表的实现过程？Vue Virtual Scroller 实现虚拟滚动列表的方法？、react-virtualized 库实现虚拟列表的方法？

文章来源:https://blog.csdn.net/qq_37255976/article/details/135605211
本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若内容造成侵权/违法违规/事实不符，请联系我的编程经验分享网邮箱：chenni525@qq.com进行投诉反馈，一经查实，立即删除！