数据量大如何优化渲染_老汪软件技巧-棋牌游戏开发

作者：老汪软件技巧
发表时间：2024-08-18 00:01
浏览量：

数据量大如何优化渲染

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

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

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

虚拟列表技术

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

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

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

确定可见区域：首先，需要确定用户当前可见的区域，通常是一个固定高度的容器，比如一个滚动容器或者一个固定高度的列表。

动态渲染数据项：根据用户的滚动位置，动态计算出当前可见区域内需要显示的数据项。只渲染这些数据项，而不是全部数据。

滚动事件监听：监听滚动事件，当用户滚动时，根据滚动位置动态渲染新的数据项或更新已有数据项。

数据项的复用：当数据项离开用户可见区域时，可以将其移除或者复用到可见区域内新的位置，而不是简单地销毁或隐藏。

性能优化：可以结合分页加载或滚动加载等技术，避免一次性加载大量数据，从而进一步优化性能。

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

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

js虚拟列表

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

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

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。接下来，我们定义了两个函数：我们通过 addEventListener 方法监听列表容器的滚动事件。在滚动事件处理函数中，我们获取滚动容器的滚动位置、容器高度和内容高度。通过比较滚动位置和容器高度与内容高度的关系，判断是否滚动到了底部。如果滚动到了底部，则调用 loadMoreData 函数加载更多数据。最后，我们调用 loadMoreData 函数来初始加载第一页的数据。

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

Vue Virtual Scroller 实现虚拟滚动列表

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

优化渲染速度_渲染量优化数据大还是小_

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 类的

元素。这些项目会被包裹在具有 v-virtual-scroller 指令的

元素中。

在 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组件传递了一些属性：

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

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

安装react-virtualized库

npm install react-virtualized --save

上一条查看详情 +No1.《SEO 的认识与理解》

下一条查看详情 +小白系列：数据库基础知识解析