前端性能工程

一、前端性能的第一性原理

1. 性能的本质

前端性能的本质是：

在有限计算与网络资源下，最大化单位时间内用户的有效感知反馈。

性能不是“跑分”，而是人类感知 × 系统调度 × 架构决策的综合结果。

2. 三条不变的性能基本定律（稳定知识）

2.1 主线程稀缺性定律

2.2 人类感知阈值定律

时间尺度 用户感知
≤ 50ms 即时响应
≤ 100ms 流畅
≤ 1s 可接受
> 1s 明显延迟

性能优化的目标不是“无限快”，而是跨越关键感知阈值。

2.3 延迟不可消除定律

架构的核心作用，就是重新分配延迟的位置。

二、统一的用户体验模型（RAIL 的原理化解读）

RAIL 不是指标集合，而是人机交互节奏模型。

阶段 本质目标 系统约束
Response 保持因果即时性 主线程占用 ≤ 50ms
Animation 保持视觉连续性 帧预算 ≤ 16.6ms
Idle 预留不确定性 提高调度弹性
Load 建立可用心智模型 首屏与可交互

三、浏览器性能因果链路模型（核心认知模型）

3.1 从用户到屏幕的完整链路

用户输入
↓
事件入队
↓
JavaScript 执行（可能产生长任务）
↓
样式计算
↓
布局（Reflow）
↓
绘制（Paint）
↓
合成（Composite）
↓
屏幕刷新

任何性能问题，必然可以定位到这条链路的某一段。

3.2 关键性能问题的归因方式

现象 本质原因
输入延迟 主线程被占用
掉帧 单帧预算被打破
白屏 首次可绘制被推迟
页面抖动 布局不稳定

四、性能指标体系（从指标到含义）

4.1 指标不是目的，而是观测窗口

指标 反映的系统问题
TTFB 网络与服务端延迟
FCP / FP 首次视觉反馈
LCP 核心内容呈现
CLS 布局稳定性
TTI 可交互能力
Long Task 主线程阻塞

4.2 性能指标的层级归属

五、性能测量与可观测性体系

5.1 性能工程的三种视角

视角 目的
实验室 精确定位问题
线上真实用户 体验真实性
长期趋势 架构治理

5.2 浏览器原生可观测能力（机制层）

原则：

用事件驱动 + 被动观测，替代主动轮询。

六、主线程调度与长任务治理

6.1 长任务的本质

单次占用主线程超过 50ms 的 JavaScript 执行。

6.2 调度策略（稳定思想）

策略 本质作用
拆分任务 缩短连续占用
延迟执行 推迟非关键计算
优先级调度 保证交互优先
空闲执行 利用不确定时间

七、资源加载与网络性能的系统视角

7.1 网络优化的本质

减少 RTT × 减少关键资源体积 × 提前关键资源可达性

7.2 稳定的资源加载原则

八、渲染性能的结构性认知

8.1 重排与重绘的本质区别

阶段 成本
重排 高（几何计算）
重绘 中（像素填充）
合成 低（图层操作）

优化方向：从重排 → 重绘 → 合成迁移。

九、架构方案如何改变性能瓶颈分布

架构方案 转移的瓶颈 性能收益来源 代价
CSR / SPA 网络 → 执行 状态复用 首屏慢
SSR 执行 → 网络 首屏渲染 服务端压力
同构 综合平衡 TTI 优化 架构复杂
PWA 网络 离线能力 维护成本

十、终端差异的统一抽象

10.1 桌面与移动的本质差异

维度 桌面 移动
网络 稳定 波动
CPU 强 弱
输入 精确 高频

策略不是复制，而是权重调整。

十一、从优化到治理：性能工程化

11.1 性能工程四阶段

  1. 指标定义
  2. 持续监控
  3. 问题归因
  4. 架构演进

11.2 组织协作视角

关联内容（自动生成）