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

最新推荐文章于 2024-04-14 14:19:55 发布
最新推荐文章于 2024-04-14 14:19:55 发布
阅读量1.5k 收藏 8
点赞数
分类专栏： 面试题 文章标签： 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/m0_38066007/article/details/124890516
版权
当后端一次性返回10w条数据，原有的设计方案可能不合理。为解决浏览器渲染卡顿问题，可以考虑使用自定义Node.js中间层分批处理数据，或者采用虚拟列表技术，仅渲染可视区域的DOM，如vue-virtual-scroll-list和react-virtualized库，以提高用户体验。
摘要由CSDN通过智能技术生成

设计不合理

后端返回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

后端一次性返回10w条数据，前端如何优化处理
qq_43944285的博客
06-25 557
1-服务器代码 2-前端代码
js 处理十万条数据_「中高级前端」高性能渲染十万条数据
weixin_39551611的博客
12-03 490
前言在实际工作中，我们很少会遇到一次性需要向页面中插入数十万条数据的情况，但是为了丰富我们的知识体系，我们有必要了解并清楚当遇到大量数据时，如何才能在不卡主页面的情况下渲染数据，以及其中背后的原理。最粗暴的做法(一次性渲染)我们对十万条记录进行循环操作，JS的运行时间为187ms，还是蛮快的，但是最终渲染完成后的总时间确是2844ms。简单说明一下，为何两次console.log的结果时间差异巨大...
后端一次性返回10万条数据，使用vue，你该如何渲染？
qq_25529689的博客
08-20 6680
后端一次性返回10万条数据，使用vue的解决方案有多种，本文采用pl-table和后端循环的方式进行获取和渲染数据。
后端返回数万条数据，前端如何高效渲染
Dax1_的博客
08-13 1434
本文给出了三种写法，是按照性能和效率由低到高依次改进的，建议按照顺序来一步步加深理解。
如何巧妙处理后端一次性返回10万条数据
qq_44586361的博客
03-27 3225
举例原来的数据是：[1,2,3,4,5,6,7,8],对该数据进行分堆（一堆3个），分堆之后是一个二维数组，[ [1,2,3], [4,5,6], [7,8]]如果前端直接把这10万条数据渲染到页面上，毫无疑问，我们的页面肯定会卡死，所以这种方案肯定是不可取的，那么我们该如何解决呢？除了以上方案之外，还可以使用滚动加载数据（滚动底部，加载一堆），以及虚拟列表处理等方式。2.比如一次截取10条数据，头一次截取0-9，第二次截取10~19等固定长度的截取。2.假设一堆存放10条数据，那么十万条数据就有一万堆。
前端如何处理后端一次性返回的10万条数据
dfc_dfc的博客
06-11 2225
后端一次性返回10万条数据，前端如何处理
当后端一次性丢给你数十万条数据, 作为前端工程师的你,要怎么处理?
cpythonsz的博客
06-12 2844
前段时间有朋友问我一个他们公司遇到的问题, 说是后端由于某种原因没有实现分页功能, 所以一次性返回了2万条数据,让前端用 select 组件展示到用户界面里. 我听完之后立马明白了他的困惑, 如果通过硬编码的方式去直接渲染这两万条数据到 select 中,肯定会卡死. 后面他还说需要支持搜索, 也是前端来实现,我顿时产生了兴趣. 当时想到的方案大致如下: 采用懒加载+分页(前端维护懒加载的数据分发和分页) 使用虚拟滚动技术(目前react的antd4.0已支持虚拟滚动的select长列表) 懒加载和分页方式
ajax一次输出1万条数据库,后端接口一次给出100万条数据，请问你前端怎么分页处理...
weixin_39928461的博客
08-06 895
面试官既然能这么问，我们从技术的角度出发，探索一下这道题，上手操作了一下：function loadAll(response) {var html = "";for (var i = 0; i < 100000; i++) {html += "title:" + '我正在测试'+[i] + "";}$("#content").html(html);}在chorme浏览器下面 非常卡顿，刷新页...
后端一次性传了10w条数据，前端该如何处理？—— 面试高频(1)
最新发布
m0_61549674的博客
04-14 1218
思路是把十万条数据分成 10w / 200页，再加上setTimeout，每次渲染一页，这种做法当然是不可取的，等到天都黑了，用户可能会骂娘。//设置允许跨域的域名，也可设置*允许所有域名。//跨域允许的请求方法，也可设置*允许所有方法。console.timeEnd(‘列表时间’)console.timeEnd(‘列表时间’)console.time(‘列表时间’)console.time(‘列表时间’)console.time(‘列表时间’)// 这里请求的是本地服务器。//允许的header类型。
当后端一次性丢给你10万条数据, 作为前端工程师的你,要怎么处理?
学习记录
11-23 1827
作者：徐小夕 链接：https://zhuanlan.zhihu.com/p/147178478 来源：知乎 著作权归作者所有。商业转载请联系作者获得授权，非商业转载请注明出处。 前段时间有朋友问我一个他们公司遇到的问题, 说是后端由于某种原因没有实现分页功能, 所以一次性返回了2万条数据,让前端用select组件展示到用户界面里. 我听完之后立马明白了他的困惑, 如果通过硬编码的方式去直接渲染这两万条数据到select中,肯定会卡死. 后面他还说需要支持搜索, 也是前端来实现,我顿时产生了兴趣. 当.
高性能渲染十万条数据(时间分片)
huangpb的博客
01-04 445
原文：「前端进阶」高性能渲染十万条数据(时间分片) - 掘金 原理：就是把本来要一次性渲染10万条数据的任务分成，n个每次渲染10条或者20条的小任务。 优点： 可以提高列表可视区首屏的渲染速度 减少页面开始加载到能响应用户操作之间的时间 ...
后端一次性返回十万条数据 前段如何处理 标准答案(面试常问) 这样回答
weixin_74535649
07-26 4746
后端一次性返回十万条数据 前段如何处理 标准答案(面试常问) 这样回答
DOM如何渲染大量千级万级数据页面也不会卡住-js性能报告
weixin_45178716的博客
10-17 2054
一个例子是创建 WebQQ 的 QQ 好友列表。列表中通常会有成百上千个好友，如果一个好友 用一个节点来表示，当我们在页面中渲染这个列表的时候，可能要一次性往页面中创建成百上千 个节点。 在短时间内往页面中大量添加 DOM 节点显然也会让浏览器吃不消，我们看到的结果往往就 是浏览器的卡顿甚至假死。代码如下： var ary = []; for ( var i = 1; i <= 1000; ...
用js实现随机选取10~100之间的10个数字，存入一个数组，并排序，要是获取不重复的
欢迎来到 动感地带
08-29 1153
【代码】用js实现随机选取10~100之间的10个数字，存入一个数组，并排序，要是获取不重复的。
面试总结 - 大量数据分批渲染(requestAnimationFrame)6.js
不营养、的博客
07-01 2896
分批渲染和同时渲染区别的例子效果~~ 使用requestAnimationFrame来实现。requestAnimationFrame这个玩意儿呢，就是告诉浏览器——你希望执行一个动画，并且要求浏览器在下次重绘之前调用指定的回调函数更新动画。该方法需要传入一个回调函数作为参数，该回调函数会在浏览器下一次重绘之前执行。 <!DOCTYPE html> <html lang="en"...
后端一次性返回10万条数据给你，你如何处理？前端分页？
广漂程序猿DevinRock
03-02 1126
所谓的虚拟列表实际上是前端障眼法的一种表现形式。看到的好像所有的数据都渲染了，实际上只渲染可视区域的部分罢了。如果10万条数据都渲染，那得需要多少dom节点元素呢？所以我们只给用户看，他当下能看到的如果用户要下拉滚动条或者上拉滚动条再把对应的内容呈现在可视区域内。这样就实现了看着像是所有的dom元素每一条数据都有渲染的障眼法效果了。
后端接口返回近万条数据，前端渲染缓慢，content Download 时间长的优化方案
二三的博客
03-23 9987
按照上面的方法，页面初始化的时候确实比之前快了很多，大概有一倍左右。不过直接跳转到最后一页，接口还是会有些缓慢。不过，对于上万条数据，也很少有人会直接跳转到最后一页进行搜索，毕竟上面也是有筛选条件可以进行筛选的。总而言之，也算是完成了性能优化。前端性能方案有很多种，比如 SSR，只是目前暂时还未了解，以后慢慢掌握。本篇文章介绍的方法只是其中比较特殊的一种，正常来说，我内心还是比较偏向于 gzip 压缩处理的。
后端API一次返回10万条数据，前端如何处理呢？
Harley567
08-24 847
对要展示的数据进行分组，利用window.requestAnimationFrame()函数， 告诉浏览器在下次重绘之前调用指定的回调函数更新动画
js原生实现for循环渲染数组
小橙的博客
12-20 4077
<!DOCTYPE html> <html> <title>js原生实现for循环渲染数组</title> <head> <style type="text/css"> #wrapper { background-color: pink; } #wrapper .row { border: 1px solid #000; } .row div{ border: 1px solid #000; displa
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值