MOD.10 控件DOC-10-026AUTHOR · 何澈2025-06-07READ · 4 MIN

控件库的视觉回归测试

超数频控件虚拟滚动边界处理

有一条经验值得单独记录：控件是设计系统的弹药库。本文讨论的不是怎么画控件，而是怎么让虚拟滚动在 36 个项目里被标准地使用：版本打法、文档形态、回归保障，一条链讲完。

SEC.01效果数据

另一个常被忽视的细节是：下拉超过 200 项需要上虚拟滚动，渲染节点压在 30 个以内。灰度验证中千项列表的打开耗时从 800ms 降到边界处理的 60ms，滚动帧率稳定 58fps，改动只在内部实现。

有一条经验值得单独记录：控件的可配置项要克制：每个 prop 都是长期负债，虚拟滚动的配置面超过 20 个之后，测试矩阵爆炸，文档没人能读完。少即是多在这里成立。

// CASE FILE · 实测档案

实测：下拉虚拟化：千项数据打开 800ms→60ms，用户「卡死」反馈消失。

这里再补一笔：触控冗余全局统一：桌面最小 28px 高，触控最小 44px，同一控件用媒体查询切换尺寸档。边界处理的双档章法让一套代码同时过桌面评审和移动评审。

控件的主题化靠 CSS 变量注入而非样式覆盖：边界处理的换肤做法如果依赖选择器优先级，就会在下一个版本被实现细节反噬。

最后再记一笔：边界处理是控件质量的分水岭：滑块到端点、步进器到极值、日期到月末，这些虚拟滚动的角落场景项目组全部写成表驱动测试，一条用例一个断言，新增控件照抄这个骨架。

视觉回归测试用像素快照：每个控件八态截图，PR 里自动比对。发布后虚拟滚动的样式类回归缺陷拦截率 48%，设计师终于不用肉眼验收每一版了。

复盘文化比做法本身更重要：每次边界处理的线上问题都要求 48 小时内出复盘，聚焦流程漏洞而非个人责任。三年下来，同类问题的复发率降到个位数。

顺带记录一个细节：树形控件的懒加载按展开触发：默认只拉根层，展开时拉子层并缓存。虚拟滚动的首屏请求数从 47 个降到 3 个，深层节点仍可按需直达——两全的做法来自一次深夜重构。

有一条经验值得单独记录：控件 API 的稳定性比功能丰富度重要：一次破坏性升级会击穿 36 个下游项目，所以一线团队的主版本承诺三年不动，新能力全部走增量。

开关控件的瞬态保护指中间态：请求未返回前开关锁定在过渡样式，不允许二次点击把状态翻转成未知。团队在这个边界处理上栽过跟头，修复后开关类缺陷归零。

文档写得再好也挡不住人员流动，所以团队把虚拟滚动的规则尽量固化进工具：lint 规则、CI 卡点、脚手架模板。规则长在工具里，团队才不会失忆。

另一个常被忽视的细节是：每个控件要有一页「何时不该用我」：日期范围用两个选择器还是面板、虚拟滚动的选型边界写清楚，误用率下降后，定制需求也少了一半。