vue性能优化之虚拟列表滚动

news2025/1/16 5:13:14

在这里插入图片描述

一、前言

前端的性能瓶颈那就是页面的卡顿，当然这种页面的卡顿包含了多种原因。
例如HTTP请求过多导致数据加载变慢，下载的静态文件非常大导致页面加载时间很长，js中一些算法响应的时间过长等。很多前端工程师都花费很多的精力在dom渲染上来优化页面加载。

二、浏览器渲染瓶颈

首先大家要明重绘和回流(重排)的概念：

  • 重绘(repaint)：当Render Tree 中的一些元素需要更新元素本身的属性，只影响外观样式和颜色等，不影响整个布局。

  • 回流(reflow)：当Render Tree 中的某些元素因为规模、尺寸、位置等改变时，会影响整个布局。

回流必定发生重绘，重绘不一定发生回流
所以大家可以知道，回流所造成的影响是比较大的，如果页面中频繁的触发回流的操作，那么最终造成页面卡顿也是肯定的。

造成回流和重绘的操作有以下类别：

  • 页面初始化
  • 添加或者删除页面上的可视区DOM元素
  • 元素位置发生改变，定位和浮动，盒模型
  • 页面文本内容发生变化，影响输入框的大小改变。
  • 图片显示加载，如果没有加载图片又会被替换成相应提示文字信息。
  • 浏览器窗口尺寸大小变化（回流是根据视口大小来计算页面元素的位置和大小）

其实对于这些需要考虑的因素，一些浏览器也是做出了相应的处理，因为每次回流可能会造成巨大的影响，浏览器本身会实现一个队列记录每次回流时操作，当存放的操作数量达到一定值或者达到一定时间后会对队列中的操作进行清空，并一次性进行一次回流，让多次回流操作压缩成一次回流操作执行，提高效率。

浏览器的瓶颈主要在于：

  • 无法一次性渲染太多的DOM元素。
  • 每次滚动事件将会让对应的DOM中所有元素重新渲染。

针对于浏览器的瓶颈问题，有三种解决办法：数据分页、无限滚动、虚拟滚动

三、数据分页

许多网页和应用程序都会用到这样的方，对需要展示的大量数据进行分割分页，后端已经做好了分页，前端只需要调用后端的接口传入相应的第几页的参数就能获取到，减少了一次性需要渲染的行数，但是如果查询的表列数非常多，还是可能会渲染很多元素，不是一个很稳定的方法。

四、无限滚动

优点很明显，不需要一次将数据请求完，当用户下拉到底部时，才使用ajax动态从服务器拉取接下来的数据。但是这又导致了一个问题，如果用户疯狂进行下拉呢，这就会导致浏览器创建多个多余的节点，出现冗余，并且你拥有多少个节点，vue就会diff多少个节点，这样的场景会带来多余的性能消耗和内存占用。

五、虚拟滚动

虚拟滚动其实就是综合数据分页和无限滚动的方法，在有限的视口中只渲染我们所能看到的数据，超出视口之外的数据就不进行渲染，可以通过计算可视范围内的但单元格，保证每一次滚动渲染的DOM元素都是可以控制的，不会担心像数据分页一样一次性渲染过多，也不会发生像无限滚动方案那样会存在数据堆积，是一种很好的解决办法。

六、虚拟滚动的原理

虚拟列表实际上就是使用少量的DOM节点显示长列表，即只创建并且显示我们视野中看到item节点，滚动过程中通过算法运算把视野中的节点更新成对应的节点。
在这里插入图片描述

7、实现思路

与懒加载不同，虚拟滚动需要一次性获取所有数据，但是只显示屏幕可见范围内的数据。

算了 不写这么多了

直接上代码吧 不难 看得懂 有注释
实现效果

定义变量

const demo = ref(null) // 外框盒子
const showNumber = 5 // 当前视窗展示条数
const itemHeight = 40 // 每一条内容的高度
const data = createData(1000) // 实际数据
let startNum = ref(0) // 当前视窗范围内第一个元素下标
let positionTop = ref(0) // 当前视窗范围内第一个元素偏移量
let lastTime = ref(0) // 最新的时间

滚动

<div ref="demo" class="scroll-box" :style="`height: ${showNumber * itemHeight}px;`">  // 可视区
  <div class="scroll-blank" :style="`height: ${data.length * itemHeight}px;`"> // 占位  使出现滚动
    <div class="scroll-data" :style="`top: ${positionTop}px;`"> // 渲染区域
      <div v-for="(item, index) in activeList" :key="item" class="scroll-item"> // 渲染的每一列
        {{ item }}
      </div>
    </div>
  </div>
</div>

<style>
 .scroll-box {
   margin: 200px auto;
   position: relative;
   overflow: auto;
   width: 400px;
   border: 1px solid rgb(0, 0, 0);
 }
 .scroll-data {
   position: absolute;
   width: 100%;
 }
 .scroll-item {
   box-sizing: border-box;
   border: 1px solid #fff;
   height: 40px;
   background: pink;
 }
 .scroll-item:hover {
   background: rgb(104, 111, 211);
   color: #fff;
 }
</style>

虚拟
仅渲染当前视窗内的内容，而对于超出的部分则进行移除

// 计算当前视窗内实际要渲染的内容
const activeList = computed(() => {
  const start = startNum.value
  return data.slice(start, start + showNumber)
})

什么时候对渲染的数据进行替换？
对外框盒子添加 scroll 的监听事件，在滚动的时候获取scrollTop的值并计算当前视窗范围内第一个元素的下标
在这里插入图片描述

// 滚动的时候计算当前视窗范围内第一个元素下标
const scrollEvent = (event) => {
  if (new Date().getTime() - lastTime > 10){
    const { scrollTop } = event.target
    startNum.value = parseInt(scrollTop / itemHeight)
    console.log(scrollTop, startNum.value)
    positionTop.value = scrollTop
    // positionTop.value = scrollTop - ( scrollTop % itemHeight)
    lastTime = new Date().getTime() //更新最新时间
  }
}

onMounted(() => {
  lastTime = new Date().getTime()
  demo.value.addEventListener('scroll', scrollEvent)
})
onUnmounted(() => {
  if (!demo.value) return
  demo.value.removeEventListener('scroll', scrollEvent)
  demo.value = null
})

完整代码
跑跑试试吧

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <script src="https://unpkg.com/vue@3.2.27/dist/vue.global.js"></script>
    <title>VirtualScroll</title>
  </head>
  <body>
    <div id="app">
      <div
        ref="demo"
        class="scroll-box"
        :style="`height: ${showNumber * itemHeight}px;`"
      >
        <div class="scroll-blank" :style="`height: ${data.length * itemHeight}px;`">
          <div class="scroll-data" :style="`top: ${positionTop}px;`">
            <div v-for="(item, index) in activeList" :key="item" class="scroll-item">
              {{ item }}
            </div>
          </div>
        </div>
      </div>
    </div>
    <script>
      const { computed, onMounted, onUnmounted, ref } = Vue

      const createData = (length) => {
        return Object.keys(new Array(length).fill(''))
      }
      const App = {
        setup() {
          const demo = ref(null) // 外框盒子
          const showNumber = 5 // 当前视窗展示条数
          const itemHeight = 40 // 每一条内容的高度
          const data = createData(1000) // 实际数据
          let startNum = ref(0) // 当前视窗范围内第一个元素下标
          let positionTop = ref(0) // 当前视窗范围内第一个元素偏移量
          let lastTime = ref(0) // 最新的时间

          // 计算当前视窗内实际要渲染的内容
          const activeList = computed(() => {
            const start = startNum.value
            return data.slice(start, start + showNumber)
          })
          console.log(activeList.value)

          // 滚动的时候计算当前视窗范围内第一个元素下标
          const scrollEvent = (event) => {
            if (new Date().getTime() - lastTime > 10){
              const { scrollTop } = event.target
              startNum.value = parseInt(scrollTop / itemHeight)
              console.log(scrollTop, startNum.value)
              positionTop.value = scrollTop
              // positionTop.value = scrollTop - ( scrollTop % itemHeight)
              lastTime = new Date().getTime() //更新最新时间
            }
          }

          onMounted(() => {
            lastTime = new Date().getTime()
            demo.value.addEventListener('scroll', scrollEvent)
          })
          onUnmounted(() => {
            if (!demo.value) return
            demo.value.removeEventListener('scroll', scrollEvent)
            demo.value = null
          })

          return {
            showNumber,
            itemHeight,
            demo,
            positionTop,
            data,
            activeList,
          }
        },
      }

      const app = Vue.createApp(App)
      app.mount('#app')
    </script>
    <style>
      .scroll-box {
        margin: 200px auto;
        position: relative;
        overflow: auto;
        width: 400px;
        border: 1px solid rgb(0, 0, 0);
      }
      .scroll-data {
        position: absolute;
        width: 100%;
      }
      .scroll-item {
        box-sizing: border-box;
        border: 1px solid #fff;
        height: 40px;
        background: pink;
      }
      .scroll-item:hover {
        background: rgb(104, 111, 211);
        color: #fff;
      }
    </style>
  </body>
</html>

再看另外一个demo
在这里插入图片描述
父组件

<template>
  <div class="personSocial">
    <ScrollComponent :data="dataList" :viewH="viewH" :itemH="itemH" />
  </div>
</template>

export default {
data () {
    return {
      dataList: [0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16, 17, 18, 19, 20, 21, 22, 23, 24, 25, 26, 27, 28, 29, 30, 31, 32, 33],
      viewH: 200,
      itemH: 40
    }
 },
}

子组件

<template>
  <!-- 可视区盒子 -->
  <div :style="`height:${viewH}px;overflow-y:scroll`" @scroll="handleScroll" class="container1">
    <div :style="`height:${scrollH}px`" class="list">
      <div class="item_box" :style="`transform:translateY(${offsetY}px);`">
        <div class="item" :style="`height:${itemH}px`" v-for="(item,index) in list" :key="index">
          {{ item }}
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: 'ScrollComponent',
  props: {
    data: Array,   // 列表总数据
    viewH: Number, // 外部高度
    itemH: Number, // 单项高度
  },
  data () {
    return {
      scrollH: '', // 整个滚动列表高度(总高度)
      list: [],    // 每次显示的数据
      showNum: '', // 页面需要显示的数量
      offsetY: '',// 动态偏移量- 外层的盒子进行滚动设置
      lastTime: '', //最新的时间
    }
  },
  mounted () {
    // 初始化计算
    this.scrollH = this.data.length * this.itemH
    // 计算可视化高度中能存几个列表，可以略多余可视化高度能存放的列表数量避免滚动时被替换
    this.showNum = Math.floor(this.viewH / this.itemH) + 1
    console.log(this.showNum);
    // 默认展示的几个数据
    this.list = this.data.slice(0, this.showNum)

    this.lastTime = new Date().getTime()
  },
  methods: {
    // handleScroll 滚动时候触发回调
    handleScroll (e) {
      // 控制滚动时间间隔
      if (new Date().getTime() - this.lastTime > 10) {
        let scrollTop = e.target.scrollTop //滚动的高度
        // 每一次滚动后 根据scrollTop值获取一个可以整除itemH结果进行偏移
        // 例如：scrollTop = 1220，1220 % this.itemH = 20 offsetY = 1220-20 = 1200
        this.offsetY = scrollTop - ( scrollTop % this.itemH )
        console.log(scrollTop, this.offsetY);

        console.log('卷入scrollTop值:', scrollTop, '卷入的行数：', Math.floor(scrollTop / this.itemH));

        this.list = this.data.slice(
          Math.floor(scrollTop / this.itemH), // 计算卷入了多少行
          Math.floor(scrollTop / this.itemH) + this.showNum
        )
        console.log(this.list);
        this.lastTime = new Date().getTime() //更新最新时间
      }
    }
  }
}
</script>

<style scoped>
.container1 {
  position: relative;
  background: #f1fffe;
  /* top: 50px; */
  /* left: 500px; */
  margin: 0 auto;
  border: 1px solid #fff;
  width: 500px;
}
.item {
  border: 1px solid pink;
}
</style>

https://mp.weixin.qq.com/s/kyZvTZgGy5CXVvaiter6cA

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.coloradmin.cn/o/470934.html

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈，一经查实，立即删除！

相关文章

Java 入门 - 语法基础

Java 入门 - 语法基础

hello world public class Hello {public static void main(String[] args) {System.out.println("hello world");} } 复制代码 public: 是关键字&#xff1b;表示公开的class: 是关键字&#xff1b;用来定义类Hello: 是类名&#xff1b;大小写敏感&#xff1b;命名…
阅读更多...
BFS算法专题

BFS算法专题

BFS算法专题 框架篇LeetCode 111. 二叉树的最小深度解题思路代码实现 LeetCode 752. 打开转盘锁解题思路代码实现 LeetCode 773. 滑动谜题解题思路代码实现 总结 不要纠结&#xff0c;干就完事了&#xff0c;熟练度很重要&#xff01;&#xff01;&#xff01;多练习&#xff0…
阅读更多...
Vivado约束添加方法：一文全面解析IO和时序约束

Vivado约束添加方法：一文全面解析IO和时序约束

FPGA开发离不开IO约束和时序约束&#xff0c;IO约束用于确定输入/输出端口的物理端口和电气特性&#xff0c;与芯片和电路设计有关。而时序约束则用于设定FPGA设计中的时序特性&#xff0c;以确保系统能够在预期时钟频率下正常运行。本文将介绍vivado中常见的设置约束的方法。 …
阅读更多...
mysql 如何避免索引失效

mysql 如何避免索引失效

案例演示 建表及初始化数据 CREATE TABLE staffs (id INT PRIMARY KEY AUTO_INCREMENT,NAME VARCHAR(24) NOT NULL DEFAULT ,age INT NOT NULL DEFAULT 0,pos VARCHAR(20) NOT NULL DEFAULT ,#职位add_time TIMESTAMP NOT NULL DEFAULT CURREN…
阅读更多...
二维码在设备点维一体化管理中的应用

二维码在设备点维一体化管理中的应用

随着科技发展&#xff0c;设备点维一体化管理体系应运而生&#xff0c;该管理体系的出现让设备维护保养变得更加高效精细化。 设备点维一体化管理体系以设备点检和维护保养为基础&#xff0c;通过日常、专业及精密点检&#xff0c;对点检测得的数据和设备给油脂保养情况进行统…
阅读更多...
一个开源、免费在线数据建模、元数据管理平台，简单易用

一个开源、免费在线数据建模、元数据管理平台，简单易用

一、开源项目简介 ERD Online 是一个开源、免费在线数据建模、元数据管理平台。提供简单易用的元数据设计、关系图设计、SQL查询等功能&#xff0c;辅以版本、导入、导出、数据源、SQL解析、审计、团队协作等功能、方便我们快速、安全的管理数据库中的元数据。 二、开源协议 …
阅读更多...
全国各省份影像下载地址（11级别）

全国各省份影像下载地址（11级别）

安徽省https://pan.baidu.com/s/1fMuWhVZFvSH1UlCGU1bPpA?pwdeasy澳门特别行政区https://pan.baidu.com/s/1aU2D4o2bfeHTJTb6AkUtVA?pwdeasy北京市https://pan.baidu.com/s/1eaNzAWm1pUx_rjhD_wHHhA?pwdeasy福建省百度网盘 请输入提取码甘肃省https://pan.baidu.com/s/1mAqf…
阅读更多...
【Tools系列】IDA远程调试Linux文件

【Tools系列】IDA远程调试Linux文件

Date: 2023.4.28 文章目录 1、工具安装2、IDA+linux_server参考1、工具安装 IDA Pro 7.2 2、IDA+linux_server （1）进入到IDA的安装目录，找到文件夹/dbgsrv，其中有两个文件linux_server和linux_server64，分别为32位的服务端和64位的服务端，可根据调试目标进行选择。并将…
阅读更多...
RocketMQ第二节（安装和模块详解）

RocketMQ第二节（安装和模块详解）

目录 1&#xff1a;RocketMQ安装 1.1&#xff1a;下载安装包解压 1.2&#xff1a;修改运行配置 1.3&#xff1a;运行RocketMQ 1.3.1&#xff1a;启动NameServer 1.3.2&#xff1a;启动Broker 1.4&#xff1a;消息收发 1.5&#xff1a;服务关闭 2&#xff1a;RocketMQ模…
阅读更多...
八部门联合推动IPv6创新发展 知道创宇助力IPv6快速安全改造

八部门联合推动IPv6创新发展 知道创宇助力IPv6快速安全改造

近日&#xff0c;工业和信息化部、中央网信办、国家发展改革委、教育部、交通运输部、人民银行、国务院国资委、国家能源局等八部门联合印发《关于推进IPv6技术演进和应用创新发展的实施意见》&#xff08;以下简称“《实施意见》”&#xff09;&#xff0c;提出到2025年底&…
阅读更多...
换个花样玩C++（3）const_cast不是一行代码这么简单

换个花样玩C++（3）const_cast不是一行代码这么简单

我先不说const_cast的事情，还是回到我们之前遇到的一个问题，先看代码 示例1 #include <iostream> int main() {const int a = 1;int* p = (int*)(&a);*p = 100; std::cout << a; } 这段代码里，本来想通过指针p里修改a的值，vs调试看下来a的值在*p=100；这…
阅读更多...
Elasticsearch --- 简介、安装

Elasticsearch --- 简介、安装

一、简介 1.1、elasticsearch的作用 elasticsearch是一款非常强大的开源搜索引擎&#xff0c;具备非常多强大功能&#xff0c;可以帮助我们从海量数据中快速找到需要的内容 例如&#xff1a; 在GitHub搜索代码 在电商网站搜索商品 在百度搜索答案 1.2、ELK技术栈 elas…
阅读更多...
Linux安装helm

Linux安装helm

前言 运行环境&#xff1a;CentOS7.9 官方参考文档&#xff1a;官方文档 文章末尾附有一键安装脚本 下载安装包 github下载对应版本的安装包&#xff0c;下载地址 进入对应版本的下载页面&#xff0c;这里以v3.11.3为例 选择对应系统的安装包&#xff0c;这里以linux为例 …
阅读更多...
WhatsApp CRM：通过 CRM WhatsApp 集成向客户发送消息

WhatsApp CRM：通过 CRM WhatsApp 集成向客户发送消息

WhatsApp CRM&#xff1a;通过 CRM WhatsApp 集成向客户发送消息 你是否在寻找一个支持WhatsApp整合的CRM&#xff1f;或者&#xff0c;你想将WhatsApp与你当前的CRM整合&#xff1f;这篇文章将回答你所有的问题。我们将首先了解什么是WhatsApp CRM&#xff0c;以及你需要知道…
阅读更多...
【Python】丘比特之箭，一箭穿心，快去发给你心仪的人叭~

【Python】丘比特之箭，一箭穿心，快去发给你心仪的人叭~

作者主页&#xff1a;爱笑的男孩。的博客_CSDN博客-深度学习,活动,YOLO领域博主爱笑的男孩。擅长深度学习,活动,YOLO,等方面的知识,爱笑的男孩。关注算法,python,计算机视觉,图像处理,深度学习,pytorch,神经网络,opencv领域.https://blog.csdn.net/Code_and516?typeblog个人简…
阅读更多...
20230428 -栈与队列1 | 232. 用栈实现队列、225. 用队列实现栈、Queue和Deque异同介绍

20230428 -栈与队列1 | 232. 用栈实现队列、225. 用队列实现栈、Queue和Deque异同介绍

1、232. 用栈实现队列 class MyQueue {//整体实现思路&#xff1a;队列是先进先出&#xff0c;栈是先进后出。使用两个栈&#xff0c;一个栈A负责进&#xff0c;一个栈B负责接收栈A数据&#xff0c;然后出出&#xff0c;队列&#xff1a;A->B>C 栈A&#xff1a;A->B&g…
阅读更多...
一分钟教你玩转组合图表

一分钟教你玩转组合图表

在日常工作中&#xff0c;有时候单一的图表类型无法满足多维度的数据展示&#xff0c;这时候就要考虑使用组合图表。 什么是组合图表呢&#xff1f; 就是将两种及两种以上的图表类型组合起来绘制在一个图表上。 下面我们通过经典的柱线组合图来手把手教会你如何制作组合图表。 …
阅读更多...
ChatGLM LoRA微调实战方案

ChatGLM LoRA微调实战方案

大家好，我是herosunly。985院校硕士毕业，现担任算法研究员一职，热衷于机器学习算法研究与应用。曾获得阿里云天池比赛第一名，CCF比赛第二名，科大讯飞比赛第三名。拥有多项发明专利。对机器学习和深度学习拥有自己独到的见解。曾经辅导过若干个非计算机专业的学生进入到算法…
阅读更多...
Kestrel封装在Winform中

Kestrel封装在Winform中

Kestrel封装在Winform中 背景思路方法1方法2方法3&#xff08;本文使用的方法&#xff09; 实现在winform程序中引入几个nuget包新建一个Startup类&#xff08;叫什么名字都行&#xff09;修改Program文件创建controller 运行效果(打开浏览器&#xff0c;输入如下地址&#xff…
阅读更多...
【高危】Apache Superset ＜2.1.0 认证绕过漏洞（POC）（CVE-2023-27524）

【高危】Apache Superset ＜2.1.0 认证绕过漏洞（POC）（CVE-2023-27524）

漏洞描述 Apache Superset 是一个开源的数据可视化和业务智能平台&#xff0c;可用于数据探索分析和数据可视化。 Apache Superset 受影响版本在使用默认的secret_key时&#xff0c;攻击者可通过默认的secret_key为任意用户生成有效的会话令牌&#xff0c;进而绕过验证造成信…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023