E3.16.3tree coupling stays responsive设计

联动规则在深层树中仍需保持性能与响应速度

别名: 树联动性能 · deep tree check · 勾选卡顿

概念解释

向下写整支、向上重算祖先,在深树和宽树上会碰到成千上万节点。联动规则不能因此延迟到让方框「点了没反应」,或让滚动在勾选时掉帧。仍然要快(stay responsive)指的是第一次反馈必须贴着点击:至少父级自己的显示立刻变成目标态,大规模子孙的写入可以随后完成,但不能无声地拖到让人再点一次。性能是联动语义能被相信的前提,不是可以稍后补的优化。

机制

一次勾父的朴素实现是遍历整支再逐行重绘。节点数上去之后,遍历和布局会堵住输入。人的因果窗口很短:方框不在这一拍翻转,就会再点,于是两次相反的联动排队,集合在全与空之间振荡。正确的分层是:先提交意图(父级进入确定态、给出「正在应用到 N 项」),再在模型里批处理子孙,最后只重绘可见行。虚拟滚动此时是朋友:看不见的行不必立刻有 DOM,但模型位必须先写上,以免展开或导出时缺员。

向上冒泡同样要避免每点一片叶子就重绘整条祖先链的可见列。祖先往往很少,计算便宜,贵的是把整棵可见树刷一遍样式。

边界

同步的无障碍播报若把「已选中 4000 项」读完才返回,会比绘制更慢,播报应摘要化。服务端树按需加载时,未取回的子树不能假装已经联动完成,应在取回后补写并允许失败回滚,否则性能看起来很好,集合是错的。低端设备上的可接受延迟更短,不能用开发机的帧率当合格线。联动若被做成每个节点一次网络请求,再快的前端也救不了,规则要能在一次请求里声明整支。

怎么落地

  • 点击后立刻翻转被点节点的显示,再异步完成子孙;过程中禁止把方框留在旧态。
  • 模型与视图分离:先写选择集,可见行按视口刷新。
  • 用一次意图描述整支(含子树 ID 或范围),避免对每个叶发请求。
  • 验证:在真实体量的深树上勾一个高位父节点,录输入到方框翻转的时间,并导出已选数量。翻转慢到诱发二次点击,或数量对不上子孙,就是性能把语义弄坏了。

延伸

  • 同组E3.16.1 选中父节点通常联动选中全部子节点 · E3.16.2 部分子节点被选中时父节点需显示中间态 · E3.16.4 用户需能只选中父节点本身而不含任何子项
  • 相邻E4.18 虚拟滚动与长列表 · E4.06 树形控件
  • 站内检索tree selection performance · check-down latency · virtualized tree

同组卡片

快捷操作

分享

分享当前页面

ios_share

https://hci.top/zh/handbook/E3.16.3