当我们谈论前端工程的性能时，我们通常指的是以下指标： LCP、FID、CLS、INP、TTFB——量化“速度”的数字。
但大多数开发人员都是通过惨痛经历才认识到这个事实： 用户体验速度不是通过数字，而是通过感觉。
这就是感知性能的意义所在——你的应用程序感觉有多快，而不仅仅是它实际上有多快。
- 性能≠感知 我见过一些产品，Lighthouse 评分高达 95 分以上，但用户却感觉运行缓慢 。 同时，我也开发过一些评分只有 80 分，但用户感觉“即时”的应用。
为什么？因为我们的大脑不是以毫秒为单位来衡量的。它们对反馈、连续性和控制做出反应。
即使数据尚未准备好，看到即时反馈的用户也会感受到速度。而 等待却没有任何视觉提示的用户则会感受到速度缓慢——即使技术上速度更快。
- 骨架、占位符和速度幻觉 举个例子： 当你的应用获取数据时，不显示任何内容会让用户等待。 显示一个框架会让他们感觉到有进展。
{isLoading ? : } 骨架 UI 不会减少加载时间。 它们会减少等待感——这是 Lighthouse 无法衡量的最重要的性能指标。
- 乐观更新的力量 乐观更新是UI和心理学的完美交汇。
您不是在等待服务器；您信任用户的意图。
例如：点赞帖子、更新任务或切换开关——无需等待确认。假设成功，稍后再同步。
setLiked(true); updateLikeOnServer(postId).catch(() => setLiked(false)); 即使在高延迟环境下，这种模式也能提供即时反馈 。 这是一个小小的举动，却能让你的产品充满自信，并将这种自信传递给用户。
- 转变：感知速度的隐藏层 React和并发渲染引入了一种区分紧急更新和非紧急更新的useTransition新方法。
这不是微优化——而是用户体验优化。
const [isPending, startTransition] = useTransition();
startTransition(() => { setFilteredItems(filterData(items, searchTerm)); }); 当后台发生大量更新时，您的 UI 仍能保持响应。 用户可以继续输入、滚动、导航，而不会受到干扰。
这就是运动中感知到的表现。
- 感觉很快的小延迟 这有悖常理，但有时添加延迟会使界面感觉更流畅。
举个简单的例子： 如果旋转图标只显示 50 毫秒，用户会感觉到闪烁。 如果将其延迟 150-200 毫秒，过渡效果就会感觉很自然。
大脑将流畅的运动解读为品质。 正因如此，Framer Motion和GSAP动画不仅是美学工具，更是性能工具。
- 感知是设计系统关注的问题 前端性能不仅仅是 React 的问题， 它还是设计系统的问题。
设计师定义视觉层级，工程师定义交互层级。 了解哪些需要立即响应（点击反馈），哪些可以等待（数据渲染），才能创造感知速度。
当设计和工程在反馈回路上进行协作时，即使是缓慢的后端也会感觉很快。
结论 我们痴迷于性能指标——我们也应该如此。 但指标无法捕捉产品的情感速度。
用户不会感谢你给予的 100 分 Lighthouse 评分， 而是感谢你让一切变得即时、流畅、生动。
所以下次你的应用“感觉很慢”的时候，别光打开 DevTools。 问问自己：用户在哪里等着却没有反馈？
这才是你真正的性能瓶颈。作者www.lglngy.com
