虚拟列表-渲染 10 万条数据

合集 - 前端面试(96)

1.H5 的新特性有哪些？C3 的新特性有哪些2023-06-202.Localstorage、sessionStorage、cookie 的区别2023-06-203.H5 的浏览器存储有哪些2023-06-204.简述 transform，transition，animation 的作用？2023-06-205.CSS 中选择器的优先级以及CSS 权重如何计算2023-06-206.HTML5 的离线存储怎么使用，工作原理是什么？2023-06-207.css3制作三角形2023-06-208.rem 适配方法如何计算 HTML 跟字号及适配方案？2023-06-209.定位相关2023-06-2010.Modele build failed: TypeError: this.getResolve is not a function at Object.loader...2023-06-2011.BFC 是什么2023-06-2112.使用CSS怎么让Chrome支持小于12px的文字比如10px2023-06-2113.创建对象有几种方法2023-06-2114.JavaScript中的toLocaleString()方法你知道吗？2023-06-2215.暂时性死区2023-06-2216.作用域链和原型链2023-06-2217.dom 节点的 Attribute 和 Property 有何区别？2023-06-2318.简单说一下页面重绘和回流？2023-06-2519.defer 属性async 属性2023-06-2520.解释一下什么是回调函数,并提供一个简单的例子2023-06-2521.你对原型（prototype）理解2023-06-2522.简单说说 js 中的继承2023-06-2523.介绍 this 各种情况2023-06-2524.for in 和 for of 的区别2023-06-2525.判断一个字符串中出现次数最多的字符，统计这个次数2023-06-2526.jQuery 的 ajax 返回的是 promise 对象吗？2023-06-2627.echarts切换其他组件统计图时，出现卡顿问题如何解决2023-06-2628.module、export、import 有什么作用2023-06-2629.包含Symbol类型的对象遍历取key使用Reflect.ownKeys2023-06-2630.常见的 HTTP 状态码以及代表的意义2023-06-2631.HTTP 与 HTTPS 的区别2023-06-2732.一个页面从输入 URL 到页面加载显示完成，这个过程中都发生了什么2023-06-2733.浏览器如何加载页面的，script 脚本阻塞有什么解决办法，defer 和 async 的区别是什么2023-06-2734.Vue 数据双向绑定的原理是什么?2023-06-2835.组件中写 name 选项有什么作用2023-06-2836.怎么在组件中监听路由参数的变化？2023-06-2837.怎么捕获 Vue 组件的错误信息？2023-06-2838.computed 中的属性名和 data 中的属性名可以相同吗2023-06-2839.Vue 中 key 值的作用是什么？2023-06-2840.你对 Vue.js 的 template 编译的理解？2023-06-2841.VNode 是什么？什么是虚拟DOM？2023-06-2842.简述下 wx.navigateTo(), wx.redirectTo(), wx.switchTab(),wx.navigateBack(), wx.reLaunch()的区别？2023-06-3043.微信小程序长按识别二维码2023-06-3044.原生微信小程序2023-06-3045.小程序中 canvas 的图片不支持 base64 格式2023-06-3046.小程序关联微信公众号如何确定用户的唯一性？2023-06-3047.setState和useState执行2023-06-3048.如何进行前端性能优化2023-06-3049.Vue和React中diff算法区别2023-07-0150.通过code换取网页授权access_token和基础支持中的access_token有以下不同之处：2023-07-0451.H5调起支付API2023-07-0452.使用Vue前端实现微信授权、微信支付和支付宝支付的具体代码和流程。2023-07-0453.js中显示转换类型2023-08-3054.js小常识2023-08-3155.js获取浏览器地址的query参数并以键值对的方式展示(对象)封装一个方法2023-09-0256.js寄生组合式继承2023-09-0257.ts2023-09-0458.promise知识12023-09-0459.vue中v-bind和v-model的区别是什么2023-09-0560.Vue中key的作用2023-09-0561.在Vue 3中，与Vue 2相比，有一些改进和优化的diff算法。2023-09-0562.浏览器解析html2023-09-0563.浏览器渲染HTML2023-09-0564.Object.entries()2023-09-0565.vue实现虚拟dom转换成真是dom的原理2023-09-0566.为什么vue数组下标修改监听不到2023-09-0767.Vue 3 在某些场景下可能表现出比 Vue 2 更低的性能2023-09-0768.vue里表单验证的v-model.number的坑2023-09-0869.开启严格模式2023-10-1470.js手写一个call2023-10-1471.js手写一个apply2023-10-1472. 手写一个 bind 方法2023-10-1473.js寄生组合式继承2023-10-1474.react中的useState修改状态获取最新状态值2023-10-1575.函数柯里化js2023-10-2076.axios请求中断_下载中断和下载进度2023-10-2077.axios请求重试_核心原理2023-10-2078.axios请求重试_axios-retry插件2023-10-20

79.虚拟列表-渲染 10 万条数据2023-10-21

80.vue-office 组件2023-10-2181.threejs2023-10-2282.把原生 DOM 标签转换后加入到 3D 场景空间中显示2023-10-2483.three.js 物体要使用光线投射技术，计算是否点击位置与物体有交叉2023-10-2484.threejs基本函数2023-10-2585.二分查找算法2023-10-2686.js判断字符串是否连贯2023-10-2687.世界坐标系和模型坐标系2023-10-2888.设置车模型中每个小物体 castShadow = true2023-11-0489.Vue3 echarts 组件化使用 resizeObserver2023-11-0590.网页验证码的作用 *网页中几种常见验证码2023-11-0791.多个装饰器一起es6装饰器2023-11-0792.flex属性2023-11-0793.移动端兼容问题2023-11-0794.那什么是URL、URI、URN？2023-11-0795.面试题03-0396.面试前端03-03

收起

简介
虚拟列表是一种优化长列表渲染的技术，它可以在保持流畅性的同时，渲染大量的数据。

在传统的列表渲染中，如果列表非常长，会导致渲染时间过长，页面卡顿，用户体验变得非常差。而虚拟列表则是只渲染可见区域内的数据，而非全部渲染，这样就可以大大提高渲染效率，保持页面流畅性。

应用场景

虚拟列表技术在大数据量列表渲染场景中应用广泛，例如电商商品列表、社交动态列表等。

虚拟列表实现原理

<script setup lang="ts">
import axios from 'axios'
import { computed, onMounted, ref } from 'vue'

type Item = {
  id: number
  name: string
}

// 所有的数据，比如这个数组存放了十万条数据
const allListData = ref<Item[]>([])

const itemHeight = ref(40) // 每一条（项）的高度，比如 40 像素
const count = ref(10) // 一屏展示几条数据
const startIndex = ref(0) // 开始位置的索引
const endIndex = ref(10) // 结束位置的索引
const topVal = ref(0) // 父元素滚动位置

// 计算展示的列表
const showListData = computed(() => allListData.value.slice(startIndex.value, endIndex.value))

// 获取十万条数据
const getData = async () => {
  const res = await axios.get('http://localhost:3000/large-data')
  allListData.value = res.data.data
}

// 初始化加载
onMounted(() => {
  getData()
})

// 虚拟列表视口
const viewport = ref<HTMLDivElement>()

// 滚动这里可以加上节流，减少触发频次
const handleScroll = () => {
  // 非空判断
  if (!viewport.value) return
  // 获取滚动距离
  const scrollTop = viewport.value.scrollTop
  // 计算起始下标和结束下标，用于 computed 计算
  startIndex.value = Math.floor(scrollTop / itemHeight.value)
  endIndex.value = startIndex.value + count.value
  // 动态更改定位的 top 值，确保联动，动态展示相应内容
  topVal.value = viewport.value.scrollTop
}
</script>

<template>
  <h2>手写虚拟列表-原理{{ topVal }}</h2>
  <!-- 
    虚拟列表容器：类似“视口”，视口的高度取决于一次展示几条数据
    比如视口只能看到10条数据，一条40像素，10条400像素
    故，视口的高度为400像素，注意要开定位和滚动条 
  -->
  <div
    class="viewport"
    ref="viewport"
    @scroll="handleScroll"
    :style="{ height: itemHeight * count + 'px' }"
  >
    <!-- 占位 dom 元素，其高度为所有的数据的总高度 -->
    <div class="placeholder" :style="{ height: allListData.length * itemHeight + 'px' }"></div>
    <!-- 内容区，展示10条数据，注意其定位的top值是变化的 -->
    <div class="list" :style="{ top: topVal + 'px' }">
      <!-- 每一条（项）数据 -->
      <div
        v-for="item in showListData"
        :key="item.id"
        class="item"
        :style="{ height: itemHeight + 'px' }"
      >
        {{ item.name }}
      </div>
    </div>
  </div>
</template>

<style scoped lang="scss">
// 虚拟列表容器盒子
.viewport {
  box-sizing: border-box;
  width: 240px;
  border: solid 1px #000000;
  // 开启滚动条
  overflow-y: auto;
  // 开启相对定位
  position: relative;
  .list {
    width: 100%;
    height: auto;
    // 搭配使用绝对定位
    position: absolute;
    top: 0;
    left: 0;
    .item {
      box-sizing: border-box;
      width: 100%;
      height: 40px;
      line-height: 40px;
      text-align: center;
      // 隔行变色
      &:nth-child(even) {
        background: #c7edcc;
      }
      &:nth-child(odd) {
        background: pink;
      }
    }
  }
}
</style>

VueUse 方案

pnpm install @vueuse/core
<script setup lang="ts">
import { useVirtualList } from '@vueuse/core'
import axios from 'axios'
import { onMounted, ref } from 'vue'

type Item = {
  id: number
  name: string
}

// 所有的数据，比如这个数组存放了十万条数据
const allListData = ref<Item[]>([])

// 获取十万条数据
const getData = async () => {
  const res = await axios.get('http://localhost:3000/large-data')
  allListData.value = res.data.data
}

// 初始化加载
onMounted(() => {
  getData()
})

// 每一项的高度，比如 40 像素
const itemHeight = ref(40)

// vueuse方案：https://vueuse.org/core/useVirtualList/
const { list, containerProps, wrapperProps } = useVirtualList(allListData, {
  itemHeight: itemHeight.value,
})
</script>

<template>
  <h2>虚拟列表-VueUse实现</h2>
  <div v-bind="containerProps" class="viewport">
    <div v-bind="wrapperProps" class="list">
      <div v-for="item in list" :key="item.data.id" class="item">
        {{ item.data.name }}
      </div>
    </div>
  </div>
</template>

<style scoped lang="scss">
// 虚拟列表容器盒子
.viewport {
  box-sizing: border-box;
  width: 240px;
  height: 400px;
  border: solid 1px #000000;
  // 开启滚动条
  overflow-y: auto;
  // 开启相对定位
  position: relative;
  .list {
    width: 100%;
    height: auto;
    // 搭配使用绝对定位
    position: absolute;
    top: 0;
    left: 0;
    .item {
      box-sizing: border-box;
      width: 100%;
      height: 40px;
      display: flex;
      justify-content: center;
      align-items: center;
      // 隔行变色
      &:nth-child(even) {
        background: #c7edcc;
      }
      &:nth-child(odd) {
        background: pink;
      }
    }
  }
}
</style>

vue-virtual-scroller 方案

pnpm install vue-virtual-scroller@next
<script setup lang="ts">
import axios from 'axios'
import { onMounted, ref } from 'vue'

// https://github.com/Akryum/vue-virtual-scroller
import { RecycleScroller } from 'vue-virtual-scroller'
import 'vue-virtual-scroller/dist/vue-virtual-scroller.css'

type Item = {
  id: number
  name: string
}

// 所有的数据，比如这个数组存放了十万条数据
const allListData = ref<Item[]>([])

// 获取十万条数据
const getData = async () => {
  const res = await axios.get('http://localhost:3000/large-data')
  allListData.value = res.data.data
}

// 初始化加载
onMounted(() => {
  getData()
})

// 每一项的高度，比如 40 像素
const itemHeight = ref(40)
</script>

<template>
  <h2>虚拟列表-vue-virtual-scroller实现</h2>
  <RecycleScroller
    class="viewport"
    :items="allListData"
    :item-size="itemHeight"
    key-field="id"
    v-slot="{ item }"
    item-class="item"
  >
    {{ item.name }}
  </RecycleScroller>
</template>

<style scoped lang="scss">
// 虚拟列表容器盒子
.viewport {
  box-sizing: border-box;
  width: 240px;
  height: 400px;
  border: solid 1px #000000;
  // 开启滚动条
  overflow-y: auto;
  // 开启相对定位
  position: relative;

  :deep(.item) {
    box-sizing: border-box;
    width: 100%;
    height: 40px;
    display: flex;
    justify-content: center;
    align-items: center;
    // 隔行变色
    &:nth-child(even) {
      background: #c7edcc;
    }
    &:nth-child(odd) {
      background: pink;
    }
  }
}
</style>