技能｜Web应用卡顿定位与提速法
适用场景
自研 Web 应用（本地服务 / 桌面壳）界面卡顿、拖动迟滞、切页发涩，但感觉"后端应该很快"时使用。典型环境：老旧显卡无 GPU 加速、纯 CPU 渲染、页面里卡片数量多。触发词：界面卡、反应慢、卡顿、拖动不流畅、优化速度、性能差。
操作步骤
- 先量后端，别先猜前端：对全部接口计时（本地服务用带
--noproxy '*'的 curl，或直接 TestClient）。若接口普遍 3-5ms → 后端不是瓶颈，立刻转向前端，停止在后端做无用优化。 - 查两层"每帧重算"元凶（无 GPU 机器上这两条命中率最高）：
-backdrop-filter: blur()—— 作用在每张卡片上时，滚动/拖动每帧都要重算模糊。
-animation: ... infinite—— 常驻背景动画（如 kenburns 缩放）永不停止，持续触发重绘。 - 最小改动移除：
.card上的backdrop-filter直接删（改纯半透明背景var(--glass)）；背景animation连@keyframes一起删。只保留侧栏等单处大面积模糊，视觉几乎无损。 - 守住新增代码：新写的遮罩/弹层/卡片一律不加 blur、不加常驻动画，用纯半透明色代替。
- 回归计时验证：改完再量一次接口 + 目测拖动，确认无回退；Python 侧
py_compile通过。
注意边界
- 只在无 GPU / 弱 GPU 环境才把 blur 当主要敌人；有硬件加速的机器上 blur 代价小得多，不必一刀切。
- 视觉与性能要取舍：删的是"每张卡都算一遍"的模糊，不是"全局高级感"。侧栏单处模糊可留。
- 后端确实慢（>100ms）时不适用本法，应先查索引/扫描/IO。
反例避雷
| 反例 | 为什么错 | 正确做法 |
|---|---|---|
| 后端没量就埋头优化 Python | 实测接口 3-5ms，白优化一场 | 先计时定性，再决定改哪端 |
| 只删动画、留着每卡 blur | 卡片多的页面照样卡 | blur 与 infinite 动画两层都要查 |
| 为"更高级"给弹窗再加毛玻璃 | 新遮罩一开就掉帧，前功尽弃 | 新增 UI 明确禁用 blur |
| 改完不复测 | 不知道是否真提速 | 改前改后各量一次，留数据 |
关联笔记
- [[技能｜应用启动多线程预热与缓存法]]
- [[技能｜工作台卡片双模式展示法]]
实战战绩
2026-09-25 <知识库系统>：实测全部接口 3-5ms（后端无罪），定位到每张 .card 的 backdrop-filter:blur(12px) + 背景 kenburns 无限动画；删除后拖动/切页明显顺滑，侧栏单处 blur(14px) 保留观感无损。
版本记录
| 版本 | 日期 | 变更 |
|---|---|---|
| v1.0.0 | 2026-09-28 | 首版实战固化：后端先量后判、blur+无限动画两层定位、新增 UI 禁用 blur |
