前端如何处理后端一次性传来的1w条数据？
前端如何处理后端一次性传来的1w条数据？
－－－－－
网友解答：
－－－－－
我上个月面试被问到了[酷拽]！后面我查了一下，总结有三种办法:1,虚拟列表:不渲染所有数据，只渲染可视区域的数据。当用户滑动时，通过监听scroll来判断是上划还是下拉，从而更新数据。(可以了解下I ntersectionObserver这个API)
2,延迟渲染:开始不加载所有数据，只渲染可视区域的数据(同虚拟列表)。当滚动到页面底部时，添加( concat)，视图渲染新增DOM
3,时间分片:就是把数据分割，定时去异步加载！我一开始想的是用setTimeout去分割加载。但它存在弊端，快速下拉会出现闪屏现象！后来网上看到这个API。requestAnimationFrame你可以了解下！
因为手敲，点到为止！所有问题，请海涵！
－－－－－
网友解答：
－－－－－
首先流式处理，用时间换空间，需要后端修改发送格式，便于读取，且读取后存入indexdb，不占用内存，需要用时再提取。
－－－－－
网友解答：
－－－－－
那个公司面试这个问题，你就反问回去贵司前后端数据交互就是这么处理的吗？这种问题没有意义。那个公司数据不是在spl查询的时候分页了。
－－－－－
网友解答：
－－－－－
找他领导：你们的技术能力好差啊
－－－－－
网友解答：
－－－－－
我这个月正好遇到这样一个问题，市场部有个界面，输入产品编号搜索会返回产品数据形成列表，有时候数据多达五六千。
这个列表之前是<table>，现在我给改成<div>了。
我重新整理了整个界面，将列表可见内容的总高度缩小了，目前的可见高度内显示15条。
数据一过来我先渲染1到30条，其中1到15条可见。
监听滚动时，滚动正向的最远那条距离可见边缘的距离小于15条的高度时，增加渲染一条，另一边同时删除一条。
测试发现滚动顺滑流畅，不闪烁，不迟滞。
－－－－－
网友解答：
－－－－－
内存必定卡死
－－－－－
网友解答：
－－－－－
还真有，比这个还多，一次性有三十个w数据过来，还用的是饿了么的表格，百度一堆方法，不过现在饿了么plus已经支持虚拟列表了，后来还是采用了分页[捂脸]
－－－－－
网友解答：
－－－－－
Web work配合webassembly处理，然后虚表做渲染，问题不大
－－－－－
网友解答：
－－－－－
第一，什么叫一次性传来？
第二，传来什么样的数据？图片像素集合？音频数据包集合？还是别的数据？
第二，所谓处理是什么意思？全部展示还是显示最大，还是别的逻辑？图片数据的话是不是要格式转换或者变形？
实际上，一般大家讲的所谓前端，应该是应用层接收并解析完毕的数据，当然，也有可能是更底层的数据，串口，网卡，USB等…总之，具体问题要具体分析。
－－－－－
网友解答：
－－－－－
分段循环
------------------
推荐阅读：
