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

• 資深大佬 : 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 评论里 甩出来的连接基本都是 他说的原理

• 資深大佬 : M003

  看过几个虚拟列表,都是需要行高度固定..
  这样才能计算出整个列表的高度,进行渲染.

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

  后来放弃了.需求就是个伪需求. 还不如加个搜索框来的快.

• 資深大佬 : buhi

  https://github.com/buhichan/react-infinite-virtual-scroll
  我这个支持每行有不一样的高度, 条件是高度渲染后就不能更改(因为会缓存下来), 虽然是 react 的, 但是 vue 的话自己改下的话都能用

• 主 資深大佬 : qzhai

  @buhi 哈哈哈。。我用 Angular…

• 資深大佬 : w292614191

  感受下这个

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

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

• 資深大佬 : wanguorui123

  虚拟列表

• 資深大佬 : lululau

  让用户换台 Mac pro

• 資深大佬 : GrapeCityChina

  懒加载、双缓存机制、canvas 绘制界面… 好吧，我是在说 SpreadJS

• 資深大佬 : withzhaoyu

  核心思路应该就是只渲染可视区域。。。。我大概只用过前面大伙说的 react-virtualized

• 資深大佬 : YourLord

  打死你的后台同事，直接把全表数据扔给前段也太业余了。

• 資深大佬 : xiangyuecn

  终极优化办法：干掉提需求的人

• 資深大佬 : Ritr

  @withzhaoyu 说的对，没用的 DOM 移除掉不然会很卡

• 主 資深大佬 : qzhai

  @YourLord 我们是个协同工具，复杂场景很多这个是正常的需求

• 資深大佬 : mostkia

  可以考虑让后台分页，大量数据一次性加载到 html 是不好的做法，如果考虑到用户体验不允许有换页之类的效果，可以试试 ajax 这类，类似瀑布流的那种按需加载，都是现成的方案，挺成熟的。

• 資深大佬 : r3m

  万条数据具有多媒体数据的 table 可以先在后台缓存好每条数据对应的宽高，或者根据前端具体设备去简单在后台计算好宽高等等，最后把每一行高度数据加上每一行的 id 发送给前端。这个请求的数据量压缩前也只需要占 100kb 以内。之后前端已知宽高就可以就直接套用虚拟列表那一套，在可视范围内 lazy loading 就好了。如果要 loading 之前的可视效果更好一点后台可以顺便在其中传一些文字内容，图片颜色，视频封面颜色之类的基本信息，pinterest 上这种效果就做很好

• 資深大佬 : ccsulzf0627

  我看老哥是用 angular 的，推荐一下 ag-grid