【面试题】后端返回十万条数据前端怎么处理?vue实现虚拟列表

本文讨论了在面试中常被问及的后端大数据处理问题,重点介绍了虚拟列表作为解决方案,包括其原理、实现思路以及在项目优化中的应用,通过实例代码展示了如何使用CSS和JavaScript构建虚拟列表以提高性能。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

一.前言

        想必大家在面试的时候会经常被问到后端一下返回十万条数据前端怎么进行处理,二面问。这是一个有关项目优化的问题。前面我写了一篇关于时间分片(数据分割)和滚动触底加载的文章,在这我就不写了,感兴趣的大家可以去看看,有源码,很详细。

二.为嘛这个面试题的答案是虚拟列表?

        首先遇到这种大数据处理,肯定想到的是数据懒加载,那就是虚拟列表、时间分片、滚动加载,当然最常用的方法是分页,但是产品经理他不想让你这么干,最近项目优化用到这个方案,详细总结一下

        时间分片:通过定时器在规定时间内更新数据,数据是一种伪实时性的,给人一种感觉是实时更新,其实不是,因为你定时器时间跟websocket推送数据的时间间隔不一样。而且时间分片约到后面页面越卡,真实项目经验。

        滚动条触底加载:通过监听滚动条时间,只要触底就进行调接口返回数据。一下返回十万条数据真渲染不出来,而且你不能一触底就调接口,这样也是耗费性能的,所以滚动条触底加载只适合少量数据

        虚拟列表:只对可见区域的数据进行渲染,对非可见区域的数据只做缓存,不渲染。以此来减少性能消耗,提高用户体验。它是长列表的一种优化方案。性能可以说是数据懒加载中的最优化方案。

三.虚拟列表的实现思路(重点:面试过程中就这么回答)

  1. 首先你得写一个div,这个div得固定高度。通过css的overflow属性使其允许纵向y轴滚动。
  2. 计算可视区域内可以显示的数据条数。可以用可视区域的高度除以一条数据的高度。
  3. 监听滚动条,当滚动条滚动时计算出被卷起的数据的高度。
  4. 计算这个可视区域内数据的起始索引值,也就是第一条数据的下标。通过滚动条卷起的高度除以单条数据的高度,这块可能大家一下反应不过来
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

bug天选之子

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值