- 症状
- 迁到 Astro 的第二天，在站内点"事故账本"这类导航切换页面后，马上拖动页面明显卡顿。第一轮排查只搜了 CSS 动画，又在无头浏览器里量主线程帧率，测出稳定 60 帧，就下结论"不是网站的问题"。
- 影响
- 每次切页都要新建一张和整页一样长的画布，事故账本页在 2 倍像素屏、1470 宽的窗口里约 269MB；树枝再逐帧生长 4 到 6 秒，每帧上下左右都在画，这几秒里一滚动就掉帧。排查时，Chrome 的 GPU 进程一度持续占满一个 CPU 核。
- 根因
- 背景画布是从旧版 React 网站逐行搬过来的。旧版是单页应用，画布挂在路由外层，一次访问只创建、只生长一次；迁到 Astro 后每个页面都独立加载，切一次页，脚本就重跑一次，画布重建、从头生长。代码一行没变，它依赖的"只挂载一次"这个前提没了。迁移验收比对了 13 组页面的像素，比的都是单个页面，看不出切页时的变化。
- 修法
- 随机种子存进 sessionStorage：同一次访问只有第一页播放生长动画，之后的页面一口气画完，和动画的最后一帧逐像素相同，只要十几毫秒；窗口只在宽度变了时才重画。外观没变，站长在预览站试过，不卡了。画布仍和整页一样长，每次加载还有一次短暂的长帧，没有根除。