乐观更新
乐观更新：用户操作后先更新 UI 再异步提交，让用户感觉响应更快。
#type / concept
#status / evergreen
#tech / dev / frontend
[!info] related notes
- 所属 MOC: 前端性能优化 MOC
- 前置概念: performance-monitoring-system
- 并列概念: skeleton-screen
乐观更新
一句话定义
乐观更新是用户操作后先更新本地 UI，再异步提交服务器，实现”让用户感觉响应更快”的优化技术。
核心内容
适用场景
- 点赞/收藏
- 勾选/开关
- 排序/拖拽
- 表单提交
- 评论发布
实现思路
- 用户操作 → 立即更新本地 UI（乐观）
- 同时发送异步请求
- 成功：确认更新
- 失败：回滚到之前的状态
示例
function handleLike() {
// 1. 立即更新 UI
setLiked(!liked);
// 2. 发送请求
api.toggleLike(id).catch(() => {
// 3. 失败回滚
setLiked(!liked);
toast.error('操作失败');
});
}核心原则
- 只对可逆操作做乐观更新
- 失败必须回滚
- 考虑并发冲突
边界与易混淆点
乐观更新 vs 骨架屏
- 骨架屏：解决加载时的感知
- 乐观更新：解决交互时的感知
- 两者都是”感知优化”，不改变实际速度