优化一个棵‘树’的问题

[wuweijia]

关系树的加载时间优化方案

::祖源->基因寻踪入口->宗亲树 存在超长时间的加载问题。 大约在5-10秒之间。::

存在的比较明显的问题

1. 加载时间慢
2. 每次进来都要加载
3. 没有loading等友好的提示信息缓解焦虑

最初的方案猜想

• 前端缓存 前端通过客户端存储实现缓存，通过 ::http协商缓存:: 修复数据更新问题。 - 优点: 投入成本相对较低 - 缺点: 无法解决第一次加载慢的问题

• 后端分片前端缓存 后端将数据分片，前端使用并发，将数据进行拆分请求，客户端再聚合处理成整条数据。前端存储数据，通过后端diff文件 给出文件是否有更新 标识符告知前端 是否要重新请求数据已进行本地数据更新。

  • 优点： 全方位的提升
  • 缺点： 资源投入高，如果用户流量量不高，显得性价比很低

猜想方案的落地

1. 前端缓存实现没有问题
2. 后端无法拆分这棵树为多份

先实践前端方案，将数据进行浏览器DB存储

通过视频可以看到，第二次加载时间由原来的 ::10 - 15s:: 左右提升到 ::5-7:: 秒左右。但是这个结果还是不太令人满意。

[file:68DD3269-8412-41D8-A469-71BB22D39926-13998-00008E9B8521F780/IMG_7777.MOV]

当数据已经缓存，为何还要 5-7 秒 ？

1. webview 的加载
2. 树的渲染，一颗::6M::数据的树，渲染肯定需要大量的时间，即使他的算法足够好。

接下来怎么做 ？

1. 用户关心的是哪些树型结构？ 能不能优先只获取对应的结构，其他数据通过用户点击节点事件获取。

最终方案

经过产品的数据分析，用户第一次关注的树形结构大约只有200kb的数据，所有最终决定才用，首屏加载用户关心的数据，其他数据用户出发点击节点增量加载数据。

备选方案

用户第一次加载最小值数据，然后提供一个加载所有数据的按钮，后台去获取所有数据，进行协商缓存。

#业务笔记/开发问题与解决