前端性能工程

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

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 组织协作视角

关联内容（自动生成）