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

最新推荐文章于 2024-04-23 16:26:38 发布
最新推荐文章于 2024-04-23 16:26:38 发布
阅读量1.4k 收藏 8
点赞数
分类专栏： 面试题 文章标签： 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/m0_38066007/article/details/124890516
版权

设计不合理

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

沿着路走到底
关注
  • 0
    点赞
  • 踩
  • 8
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
专栏目录
订阅专栏
docker部署前端项目（二）遇到的问题
weixin_45379180的博客
04-25 338
原因： 安装docker的时候使用的是 yum -y install docker 命令，这个命令安装的是老版本。报错四：conflicts with file from package docker-common。因为使用 sudo yum install docker （下载到的是旧版）missing signature key 缺少秘钥。yum remove docker 删除docker。1、docker版本号 只有1.13.1。解决：可能是docker 未启用。
vue解析后端返回的二维码图片数据流
01-07
问题场景： 后端返回图片数据流，打印结果是乱码，如下： Chrome浏览器的preview中可以看到二维码（图片），如下： 解析思路： 尝试用二进制大对象Blob解析，然后生成图片的URL，代码如下： // QRCode 为后端接口返回的图片数据流 const blob = new Blob([QRCode]) const url = window.URL.createObjectURL(blob) 但是把生成的URL链入img的src后仍然显示不出来，在查资料后知道还需设置responseType为blob才行，代码如下： const QRCode = await this.$swag
SpringMVC后端返回数据到前端代码示例
08-19
主要介绍了SpringMVC后端返回数据到前端代码示例,文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下
后端一次性返回十万条数据，前端如何处理(一)
weixin_44891495的博客
06-26 237
方法一、将数据分堆，使用定时器，每次渲染一堆，渲染1000次，这样页面就不会卡死了。在这个小demo中懒得写路由了，就添加一个按钮，用来演示如何清除定时器吧。缺点：例如：切换路由的时候，需要清除定时器，以免造成内存泄漏。完整代码在github仓库，data分支中。道阻且长，行而不辍，未来可期。
一次性返回十万条数据前端怎么优化
九亿宅男的梦的博客
08-23 455
例如，使用浏览器的本地缓存（LocalStorage或IndexedDB）或者内存缓存（如Redux、Vuex）来存储已加载的数据，下次再请求相同数据时可以直接从缓存中读取，减少与服务器的交互次数。如果后端数据量很大且无法分页，可以考虑在后端对数据进行压缩或者分批处理，将数据分割成多个较小的请求返回给前端，前端再进行合并和展示。对返回的数据进行压缩，如使用Gzip或Brotli等压缩算法进行压缩，减少数据传输的大小。将数据进行分页，每次只请求部分数据，用户滚动或点击翻页时再加载下一页的数据。
js当滚动条即将到达底部自动加载数据
Jack Blog
07-15 1560
var totalheight = 0; var htm_index = 0; $(window).scroll(function () { totalheight = parseFloat($(window).height()) + parseFloat($(window).scrollTop()); if ((totalheig...
如何巧妙处理后端一次性返回10万条数据
qq_44586361的博客
03-27 2954
举例原来的数据是：[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 1815
后端一次性返回10万条数据，前端如何处理
后端一次性返回10万条数据，使用vue，你该如何渲染？
qq_25529689的博客
08-20 6251
后端一次性返回10万条数据，使用vue的解决方案有多种，本文采用pl-table和后端循环的方式进行获取和渲染数据。
后端接口返回近万条数据，前端渲染缓慢，content Download 时间长的优化方案
二三的博客
03-23 8609
按照上面的方法，页面初始化的时候确实比之前快了很多，大概有一倍左右。不过直接跳转到最后一页，接口还是会有些缓慢。不过，对于上万条数据，也很少有人会直接跳转到最后一页进行搜索，毕竟上面也是有筛选条件可以进行筛选的。总而言之，也算是完成了性能优化。前端性能方案有很多种，比如 SSR，只是目前暂时还未了解，以后慢慢掌握。本篇文章介绍的方法只是其中比较特殊的一种，正常来说，我内心还是比较偏向于 gzip 压缩处理的。
DOM如何渲染大量千级万级数据页面也不会卡住-js性能报告
weixin_45178716的博客
10-17 1915
一个例子是创建 WebQQ 的 QQ 好友列表。列表中通常会有成百上千个好友，如果一个好友 用一个节点来表示，当我们在页面中渲染这个列表的时候，可能要一次性往页面中创建成百上千 个节点。 在短时间内往页面中大量添加 DOM 节点显然也会让浏览器吃不消，我们看到的结果往往就 是浏览器的卡顿甚至假死。代码如下： var ary = []; for ( var i = 1; i <= 1000; ...
JavaScript如何一次性展示几万条数据
11-28
有一位同事跟大家说他在网上看到一道面试题：“如果后台传给前端几万条数据，前端怎么渲染到页面上？”，如何回答？ 于是办公室沸腾了， 同事们讨论开了， 你一言我一语说出自己的方案。 有的说直接循环遍历生成html...
vue中后端做Excel导出功能返回数据流前端的处理操作
10-14
主要介绍了vue中后端做Excel导出功能返回数据流前端的处理操作，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
一个可以用来测试后端返回数据的java工具
07-26
NULL 博文链接：https://chemzqm.iteye.com/blog/662057
【前端】数组的常用处理函数
lcukyNwa的博客
04-22 442
item------->每个元素值 (必)index----->索引（可选）arr-------- >当前数组（可选）推荐vscode的一款插件来写以下的demo，该插件可以直接在js文件中显示结果，搜 Quokka.js用这个插件去新建一个js文件，直接就运行在node上了forEach不会返回一个新的数组，里面改值会影响原数组，其他方法不影响原数组map可以返回新数组 用于映射，如每个元素都加倍或执行其他转换操作every返回一布尔值，需数组中全部满足。
C++ WebServer的细节理解
我的博客
04-22 620
在非阻塞模式下，如果 I/O 操作不能立即完成（例如，因为没有数据可读 或 写缓冲区满），系统不会让调用进程阻塞等待，而是立即返回一个错误（通常为 EAGAIN 或 EWOULDBLOCK）。先查询文件描述符 fd 当前的标志，然后将 O_NONBLOCK 标志加入其中，并通过 F_SETFL 来更新文件描述符，最终实现将该文件描述符切换为非阻塞模式。这意味着，如果没有待处理的连接请求（即没有客户端尝试连接到服务器），accept() 会一直阻塞，直到有新的连接请求到达或发生其他特定条件（如超时）为止。
SpringBoot项目打包分离高阶操作
最新发布
Record Little
04-23 655
虽然传输jar包 比较大，但是安全性、稳定性比较高，不需要关注pom.xml 添加了新的依赖、更新了版本号等等影响版本功能的操作。关注maven的特性， profiles即可满足， 根据不同的activation 状态，激活不同的build操作。每次修改一小部分代码或仅仅更新某个依赖jar包时，都需要重新进行整个项目的构建、打包、上传和部署。但是当你的项目趋于稳定，只有业务上的逻辑变更时，如果使用分离版本，可以加快迭代、更新的速度。弊端： 需要配置IDE命令，修改依赖时需要同时修改2处。
Vue-router的动态路由：获取传递的值
woliuhuaqiangla的博客
04-22 413
Vue.js是一款流行的JavaScript框架，用于构建单页面应用程序。它提供了许多有用的功能，其中之一是Vue-router，它允许您轻松地管理应用程序的路由。Vue-router支持动态路由，这意味着您可以在路由中使用变量，并在组件中访问它们。本文将介绍如何定义Vue-router的动态路由，以及如何获取传递的值。动态路由的优缺点动态路由是指根据特定的参数来动态地生成路由，这在使用Vue-router时是非常常见的。
WebSocket 快速入门 - springboo聊天功能
m0_56308072的博客
04-21 906
HTTP和WebSocket都是啥？
后端一次性返回10万条数据，前端怎么处理
03-22
对于这个问题，可以采用分页的方式，将数据分成多个页面进行展示，每次只加载一页数据，这样可以减轻前端的压力，提高页面的加载速度。另外，可以采用懒加载的方式，当用户滚动到页面底部时再加载下一页数据，这样...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值