探究高性能的海量节点树
如果无法正常显示,请先停止浏览器的去广告插件。
1. D2 之夜!
2. 召奴 (Chuck)!
阿⾥里里云计算平台事业部
负责DataWorks云计算平台产品!
阿⾥里里云前端影響⼒力力⼩小組核⼼心成員!
叮叮!
微信!
3. When Cabala-Tree met Big Data
探究⾼高性能的海海量量节点树
4. ⼀一棵树能有多难 ?
5. 我们要的不不只是⼀一棵⽬目录树,⽽而是⼀一整套的解决⽅方案
体验 性能 移植 成本
秒开、复杂搜索功能
⼀一键定位等 加载性能、渲染性能
操作性能 业务复⽤用、开源 降低改造与迁移成本
6. 为了了救树我们做了了什什么 ?
7. 曾经⾛走过的路路…
⽅方案!
缺点!
⼦子⽬目录数据量量⼤大时卡顿! 体验!
展开的⼦子⽬目录越多越不不顺畅! 性能!
后端搜索,改造成本巨⼤大! 成本!
虚拟滚动 +
分层异步加载! 后端搜索,改造成本巨⼤大! 成本!
虚拟滚动 +
全量量数据加载! ⾸首屏渲染时间⻓长! 体验!
ztree +
分层异步加载!
悟道
让数据
虚拟滚动 +
全量量数据加载 +!
????!
源源不不断 地流动起来
8. 引⽔水⼊入渠!
开辟河道!
舍远求近!
分段同步请求数据!
请求数据!
数据处理理!
Worker group模式
指挥多個worker 執⾏行行⼯工作!
请求数据!
请求数据!
数据处理理!
数据处理理!
ü 任务分派!
ü 超時強制釋放!
ü 闲置线程管理理!
让前端有更更强⼤大的计算能⼒力力!
9. 开辟河道!
引⽔水⼊入渠!
⾼高异步并发场景解决⽅方案!
舍远求近!
响应式编成解决了了多⼯工带来的异步复杂度问题!
⼯工作流模式进⼀一步规范响应式编成的⾏行行为与异常处理理情况!
⼯工作流模式!
⼀一般的流式代码!
引⼊入反应式编成!
流之间的交互变得简单,可控!
简化⾼高异步问题,代码变得可控!
可读性差,难以维护!
Push based!
Extras!
反应式编成!
⼯工作流模式!
10. 引⽔水⼊入渠!
开辟河道!
前端数据持久化!
舍远求近!
因indexedDB读取快写入慢特性,写一笔数据有
0.1ms
的固定消费
CPU!
优点!
读取与写⼊入逻辑不不变!
可保证不不阻塞主线程!
缺点!
需要额外配置编译环境!
⽤用户使⽤用成本增加!
解法!
提供编译环境插件!
11. 我們真的救活了了嗎?
12. UP
改善前!
18.7倍!
10W!
7.1s
改善後!
0.36s
13. 未来规划
Cabala-Tree开源
2020-01
Cabala-Flow 开源
Cabala-Worker开源
2020-02
智能化搜索排序、搜索
2020-03
其他⼤大数据领域探索
如Dag图、⼤大数据表格等
In the future
14.