js渲染带查询 树(13万条数据) 性能优化有什么可行方案

老哥们,现在有个需求,大概有十三万条树结构数据,要渲染在前端,一波给的,前端自己做搜索,有啥方案没有

阅读 5.1k
7 个回答

拿到数据之后worker做计算,渲染使用虚拟滚动条展示最近的几十条数据即可

思路: worker线程处理数据,自己把数据做成一个本地数据库,使用二分法或者动态规划算法做查询,返回数据做分页处理,一页10-50条即可.

前端拿到数据后,最好还是按节点进行加载。这是比较简单的方案。还有一种方案可以参考recycler-view的思路,不过在树的渲染上实现有些复杂。

这尼玛,13万,怎么想的。接口一般不应该是只给可见的那部分,或者稍微多一点。

13万数据应该还没达到js处理瓶颈。
但是渲染会卡,所以应该做动态渲染。
如果是Vue的话,不要使用递归组件,而是将树转为列表进行渲染。
一个例子:
https://github.com/Lushenggan...

显示用rc-tree,反正有虚拟滚动,搜索就空间换时间,估计内存也就占30M,小意思了,如果是行政区划这种有父子规律的话还能优化优化

这个一般是根据需要,局部动态渲染,只处理能看见附近的,不会整体渲染的,因为渲染出来也是看不见的。

撰写回答
你尚未登录,登录后可以
  • 和开发者交流问题的细节
  • 关注并接收问题和回答的更新提醒
  • 参与内容的编辑和改进,让解决方法与时俱进
推荐问题