后端一次性返回10w条数据,该如何渲染

当后端一次性返回10w条数据,原有的设计方案可能不合理。为解决浏览器渲染卡顿问题,可以考虑使用自定义Node.js中间层分批处理数据,或者采用虚拟列表技术,仅渲染可视区域的DOM,如vue-virtual-scroll-list和react-virtualized库,以提高用户体验。

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

设计不合理

后端返回10w条数据,本身技术方案设计就不合理

主动和面试官沟通此事(这也许是面试官所期待的)

如果面试官非要这么做,那再继续寻找解决方案

浏览器能否处理10W条数据

JS没问题

渲染到 DOM 会非常卡顿

自定义中间层

自定义 nodejs 中间层,获取并拆分这10W条数据

前端对接 nodejs 中间层,而不是服务端

成本比较高

虚拟列表

只渲染可视区域 DOM

其他隐藏区域不显示,只用 <div> 撑起高度

监听容器滚动,随时创建和销毁 DOM

虚拟列表实现起来非常复杂,可借用第三方 lib

vue-virtual-scroll-list

https://www.npmjs.com/package/vue-virtual-scroll-list

react-virtualized

https://www.npmjs.com/package/react-virtualized

1

评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

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

余额充值