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

[qzhai]

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

（可能例子有些极端）

[Sapp]

虚拟列表，简单来说就是 1w 条列表，每次只渲染一部分，之后滚动的时候实时渲染出新的来模拟滚动，这样 dom 实际就是几十条的样子，网上有很多现成的方案

[shijianit]

在滚动事件里面做判断，屏幕外面的数据，元素就删除，只保留高度

[zhuzhibin]

貌似都在说 lazy load ?

[fancy111]

一个表里面几万条？ 能看得完吗?为何不分批

[qzhai]

@shijianit 加入，数据嵌套循坏，带子数据，或者每条数据的高度不一致，内容带图片的话判断起来岂不是很麻烦，

[Mozshaw]

关键词：virtual scroll
可参考 https://github.com/tangbc/vue-virtual-scroll-list

[zaynex]

@qzhai 假设高度不一致的话，这种虚拟列表应该是没法用了。嵌套的数据结构可以利用 web worker 在里面转换成平铺的数组，每次增量渲染若干个节点。

[qzhai]

@Mozshaw 如果渲染数据高度不一致，或者数据结构发复杂 需要提现层级关系比如嵌套 这种有啥好的解决办法么

[momocraft]

高度不一致时虚拟列表可能会有什么问题？比如滚动条不准？

[zhw2590582]

之前也遇到过这个问题，用了这个： https://github.com/bvaughn/react-virtualized

[qzhai]

@momocraft 虚拟列表是通过高度来计算出当前 可视区域内的数据的。如果高度不一致就无法计算可视区域内究竟有多少数据以及是什么数据，也就不能来删除或者渲染数据。

[zhw2590582]

不过 react-virtualized 的默认是高度要一致，假如高度不一致需要自己提前计算出来再传值到组件里。

[lovedebug]

https://github.com/Akryum/vue-virtual-scroller 分页是万能的

[redbuck]

@qzhai 这种类库应该有刷新机制吧,手动刷新下.类似 iscroll,better-scroll 的 refresh.

[diveIntoWork]

双缓冲

[linghucq1]

https://juejin.im/post/5de71d1b6fb9a01610795250

不去计算每一项的高度, 而是计算整页的高度, 虽然封装成组件了, 但是没有实际在项目中使用过...

[ccraohng]

不是有支持动态高度的么，类似 CellMeasure

[MrJeff]

想办法搞成虚拟列表 否则 DOM 太多 卡爆

[ericgui]

@Sapp 能否给个关键词？谢谢

[qzhai]

@ericgui 评论里 甩出来的连接基本都是 他说的原理