前端一般处理海量数据的渲染有什么优化方案

2020-01-17 10:13:46 +08:00
 qzhai

假设，页面需要在一个表格里渲染 几万条 数据。在不分页的情况下有什么好的优化方案来保证页面的流畅度。

（可能例子有些极端）

6306 次点击
所在节点    程序员
35 条回复
M003
2020-01-17 11:35:32 +08:00
看过几个虚拟列表,都是需要行高度固定..
这样才能计算出整个列表的高度,进行渲染.

曾经也考虑过高度不一致.渲染上千条数据.

后来放弃了.需求就是个伪需求. 还不如加个搜索框来的快.
buhi
2020-01-17 11:35:57 +08:00
https://github.com/buhichan/react-infinite-virtual-scroll
我这个支持每行有不一样的高度, 条件是高度渲染后就不能更改(因为会缓存下来), 虽然是 react 的, 但是 vue 的话自己改下的话都能用
qzhai
2020-01-17 11:37:53 +08:00
@buhi 哈哈哈。。我用 Angular...
w292614191
2020-01-17 14:11:08 +08:00
感受下这个

http://miniui.com/BigTest/10000-treegrid.html

http://miniui.com/BigTest/10000-datagrid.html
wanguorui123
2020-01-17 17:25:06 +08:00
虚拟列表
lululau
2020-01-17 17:28:25 +08:00
让用户换台 Mac pro
GrapeCityChina
2020-01-17 17:32:47 +08:00
懒加载、双缓存机制、canvas 绘制界面... 好吧，我是在说 SpreadJS
withzhaoyu
2020-01-17 17:47:21 +08:00
核心思路应该就是只渲染可视区域。。。。我大概只用过前面大伙说的 react-virtualized
YourLord
2020-01-17 17:50:33 +08:00
打死你的后台同事，直接把全表数据扔给前段也太业余了。
xiangyuecn
2020-01-17 17:52:38 +08:00
终极优化办法：干掉提需求的人
Ritr
2020-01-17 17:53:39 +08:00
@withzhaoyu 说的对，没用的 DOM 移除掉不然会很卡
qzhai
2020-01-17 18:21:38 +08:00
@YourLord 我们是个协同工具，复杂场景很多这个是正常的需求
mostkia
2020-01-18 13:34:11 +08:00
可以考虑让后台分页，大量数据一次性加载到 html 是不好的做法，如果考虑到用户体验不允许有换页之类的效果，可以试试 ajax 这类，类似瀑布流的那种按需加载，都是现成的方案，挺成熟的。
r3m
2020-01-19 06:14:13 +08:00
万条数据具有多媒体数据的 table 可以先在后台缓存好每条数据对应的宽高，或者根据前端具体设备去简单在后台计算好宽高等等，最后把每一行高度数据加上每一行的 id 发送给前端。这个请求的数据量压缩前也只需要占 100kb 以内。之后前端已知宽高就可以就直接套用虚拟列表那一套，在可视范围内 lazy loading 就好了。如果要 loading 之前的可视效果更好一点后台可以顺便在其中传一些文字内容，图片颜色，视频封面颜色之类的基本信息，pinterest 上这种效果就做很好
ccsulzf0627
2020-01-19 09:15:36 +08:00
我看老哥是用 angular 的，推荐一下 ag-grid

这是一个专为移动设备优化的页面（即为了让你能够在 Google 搜索结果里秒开这个页面），如果你希望参与 V2EX 社区的讨论，你可以继续到 V2EX 上打开本讨论主题的完整版本。

https://ex.noerr.eu.org/t/638631

V2EX 是创意工作者们的社区，是一个分享自己正在做的有趣事物、交流想法，可以遇见新朋友甚至新机会的地方。

V2EX is a community of developers, designers and creative people.

© 2021 V2EX