批注系统压力测试：密集标注下的长文阅读体验
一篇用于检验页边批注系统的高密度测试文章：大量批注、密集段落、代码块与公式混合排版，验证阅读体验与动效流畅度。
这篇文章专门用来检验页边批注系统在高密度场景下的阅读体验。我们会把公式、代码、图片和多条批注放在同一篇长文里，观察卡片避让、弹簧跟随、连线和阅读宽度变化是否仍然自然。
## 为什么需要压力测试
页边批注的价值在于不打断阅读。当一篇文章里同时存在很多批注时，卡片之间的间距、锚点的定位和进入离开动画会直接决定系统是否舒服。
大多数时候我们写前端像在搭积木，组件一摆界面就出来了。但真正的挑战出现在数据量变大、交互变密集的时刻。布局算法应该按照原文顺序逐个向下避让，先尝试对齐高亮文字，再在空间不足时向下寻找位置。
> 好的批注系统应该让读者保持在文章里，而不是把注意力拖到工具本身。
## 滚动时的弹簧跟随
批注卡片不应该像钉子一样固定在视口边缘，而是跟随原文锚点移动。滚动越快，卡片的滞后感越明显，读者会感觉卡片被正文牵着走。
弹簧的目标位置可以写成 $y_{target}$，当前位移写成 $y$，速度写成 $v$。一个简单的阻尼模型是：
$
m\ddot{y} + c\dot{y} + k(y-y_{target}) = 0
$
刚度 $k$、阻尼 $c$ 和质量 $m$ 共同决定运动的手感。理想状态应该在一到两个周期内收敛，既不僵硬也不拖沓。
## 高亮与连线的几何
连线从高亮下划线的右端点出发，先水平伸出，再以贝塞尔曲线向下或向上汇入卡片左边缘。普通状态只保留一个小圆点和短引线，悬停或点击后才显示完整的发光曲线。
当多个批注落在同一行时，卡片必须自动堆叠，并保持稳定的呼吸间距。每一条线都应该指向自己的卡片，不能因为滚动或改变阅读宽度而漂移。
## 富文本批注的混排
批注正文和文章正文使用同一套 Markdown、KaTeX 和图片规则。行内公式 $R=f(S,P)$ 可以和文字共存，块级公式用于较长的推导。
下面这段代码展示了一个需要清理的订阅：
```js
const unsubscribe = bus.subscribe('render', payload => {
queue.push(payload);
});
return () => unsubscribe();
```
图片也应该可以独立占据一行：
{layout=block width=72% align=center caption="批注系统的阅读与跟随"}
图片说明、链接、列表和引用都应该在卡片中保持正常的层级关系。
- 选中的文字可以定位回正文
- 卡片内容可以包含公式和图片
- 过长的卡片在内部滚动，不撑破页面
## 性能与布局边界
滚动属于高频事件，布局测量需要通过 requestAnimationFrame 合并。卡片高度只在内容变化或阅读宽度变化时重新读取，避免每一帧都触发强制回流。
当页边空间不足时，卡片应该整框淡出，正文高亮仍然保留，读者可以通过批注面板查看完整内容。调整阅读宽度后，正文区域和批注栏同时重新测量，卡片不会越过正文底部或页脚。
我们用一个简单的指标观察体验：如果滚动时帧率稳定在 $60\,fps$ 附近，说明测量逻辑没有阻塞主线程；如果出现明显掉帧，就要减少重复的 getBoundingClientRect 调用。
## 结论
密集批注下的阅读体验取决于三件事：避让算法的可预测性、弹簧跟随的手感，以及连线的视觉噪音控制。三者都做到位后，即使一屏同时出现五六张卡片，阅读依然应该顺畅。
这正是这套系统的设计目标：让批注成为正文的自然延伸，而不是入侵者。