{"name":"前端性能优化","id":"中间件-浏览器-前端性能优化","content":"# 前端性能工程\n\n## 一、前端性能的第一性原理\n\n### 1. 性能的本质\n\n**前端性能的本质是：**\n\n> 在有限计算与网络资源下，最大化单位时间内用户的有效感知反馈。\n\n性能不是“跑分”，而是**人类感知 × 系统调度 × 架构决策**的综合结果。\n\n---\n\n### 2. 三条不变的性能基本定律（稳定知识）\n\n#### 2.1 主线程稀缺性定律\n\n* 浏览器主线程同时承担：\n\n  * JavaScript 执行\n  * 样式计算\n  * 布局\n  * 绘制\n* **一切卡顿，本质都是主线程被长期占用**\n\n#### 2.2 人类感知阈值定律\n\n| 时间尺度    | 用户感知 |\n| ------- | ---- |\n| ≤ 50ms  | 即时响应 |\n| ≤ 100ms | 流畅   |\n| ≤ 1s    | 可接受  |\n| > 1s    | 明显延迟 |\n\n性能优化的目标不是“无限快”，而是**跨越关键感知阈值**。\n\n#### 2.3 延迟不可消除定律\n\n* 延迟无法消失\n* 只能在以下环节转移：\n\n  * 网络\n  * 计算\n  * 渲染\n  * 用户等待\n\n架构的核心作用，就是**重新分配延迟的位置**。\n\n---\n\n## 二、统一的用户体验模型（RAIL 的原理化解读）\n\nRAIL 不是指标集合，而是**人机交互节奏模型**。\n\n| 阶段        | 本质目标     | 系统约束         |\n| --------- | -------- | ------------ |\n| Response  | 保持因果即时性  | 主线程占用 ≤ 50ms |\n| Animation | 保持视觉连续性  | 帧预算 ≤ 16.6ms |\n| Idle      | 预留不确定性   | 提高调度弹性       |\n| Load      | 建立可用心智模型 | 首屏与可交互       |\n\n---\n\n## 三、浏览器性能因果链路模型（核心认知模型）\n\n### 3.1 从用户到屏幕的完整链路\n\n```\n用户输入\n↓\n事件入队\n↓\nJavaScript 执行（可能产生长任务）\n↓\n样式计算\n↓\n布局（Reflow）\n↓\n绘制（Paint）\n↓\n合成（Composite）\n↓\n屏幕刷新\n```\n\n**任何性能问题，必然可以定位到这条链路的某一段。**\n\n---\n\n### 3.2 关键性能问题的归因方式\n\n| 现象   | 本质原因     |\n| ---- | -------- |\n| 输入延迟 | 主线程被占用   |\n| 掉帧   | 单帧预算被打破  |\n| 白屏   | 首次可绘制被推迟 |\n| 页面抖动 | 布局不稳定    |\n\n---\n\n## 四、性能指标体系（从指标到含义）\n\n### 4.1 指标不是目的，而是观测窗口\n\n| 指标        | 反映的系统问题  |\n| --------- | -------- |\n| TTFB      | 网络与服务端延迟 |\n| FCP / FP  | 首次视觉反馈   |\n| LCP       | 核心内容呈现   |\n| CLS       | 布局稳定性    |\n| TTI       | 可交互能力    |\n| Long Task | 主线程阻塞    |\n\n---\n\n### 4.2 性能指标的层级归属\n\n* 网络层：DNS、TCP、SSL、TTFB\n* 执行层：Long Task、JS 执行时间\n* 渲染层：FCP、LCP、CLS\n* 交互层：TTI、FID\n\n---\n\n## 五、性能测量与可观测性体系\n\n### 5.1 性能工程的三种视角\n\n| 视角     | 目的     |\n| ------ | ------ |\n| 实验室    | 精确定位问题 |\n| 线上真实用户 | 体验真实性  |\n| 长期趋势   | 架构治理   |\n\n---\n\n### 5.2 浏览器原生可观测能力（机制层）\n\n* Performance Timing API\n* Performance Observer\n* Long Task API\n* Network Information API\n* Page Visibility\n* Intersection Observer\n\n**原则：**\n\n> 用事件驱动 + 被动观测，替代主动轮询。\n\n---\n\n## 六、主线程调度与长任务治理\n\n### 6.1 长任务的本质\n\n> 单次占用主线程超过 50ms 的 JavaScript 执行。\n\n### 6.2 调度策略（稳定思想）\n\n| 策略    | 本质作用    |\n| ----- | ------- |\n| 拆分任务  | 缩短连续占用  |\n| 延迟执行  | 推迟非关键计算 |\n| 优先级调度 | 保证交互优先  |\n| 空闲执行  | 利用不确定时间 |\n\n---\n\n## 七、资源加载与网络性能的系统视角\n\n### 7.1 网络优化的本质\n\n> 减少 RTT × 减少关键资源体积 × 提前关键资源可达性\n\n### 7.2 稳定的资源加载原则\n\n* 关键资源优先\n* 非关键资源延后\n* 可缓存资源最大化复用\n\n---\n\n## 八、渲染性能的结构性认知\n\n### 8.1 重排与重绘的本质区别\n\n| 阶段 | 成本      |\n| -- | ------- |\n| 重排 | 高（几何计算） |\n| 重绘 | 中（像素填充） |\n| 合成 | 低（图层操作） |\n\n**优化方向：从重排 → 重绘 → 合成迁移。**\n\n---\n\n## 九、架构方案如何改变性能瓶颈分布\n\n| 架构方案      | 转移的瓶颈   | 性能收益来源 | 代价    |\n| --------- | ------- | ------ | ----- |\n| CSR / SPA | 网络 → 执行 | 状态复用   | 首屏慢   |\n| SSR       | 执行 → 网络 | 首屏渲染   | 服务端压力 |\n| 同构        | 综合平衡    | TTI 优化 | 架构复杂  |\n| PWA       | 网络      | 离线能力   | 维护成本  |\n\n---\n\n## 十、终端差异的统一抽象\n\n### 10.1 桌面与移动的本质差异\n\n| 维度  | 桌面 | 移动 |\n| --- | -- | -- |\n| 网络  | 稳定 | 波动 |\n| CPU | 强  | 弱  |\n| 输入  | 精确 | 高频 |\n\n**策略不是复制，而是权重调整。**\n\n---\n\n## 十一、从优化到治理：性能工程化\n\n### 11.1 性能工程四阶段\n\n1. 指标定义\n2. 持续监控\n3. 问题归因\n4. 架构演进\n\n### 11.2 组织协作视角\n\n* 产品：体验目标\n* 前端：交互与执行\n* 后端：数据与延迟\n* 运维：网络与稳定性\n\n## 关联内容（自动生成）\n\n- [/计算机系统/程序结构和执行/优化程序性能.md](/计算机系统/程序结构和执行/优化程序性能.md) 程序性能优化原理与前端性能优化在性能优化的底层模型、性能分析方法等方面相互补充\n- [/中间件/浏览器/V8.md](/中间件/浏览器/V8.md) V8引擎的执行模型与性能优化机制直接影响前端JavaScript代码的执行效率\n- [/软件工程/架构/Web前端/用户体验设计.md](/软件工程/架构/Web前端/用户体验设计.md) 用户体验设计与前端性能优化共同关注用户感知和交互体验，性能是实现良好用户体验的基础\n- [/编程语言/JavaScript/React.md](/编程语言/JavaScript/React.md) React框架中的性能优化策略，如shouldComponentUpdate和虚拟DOM，是前端性能优化的具体实践\n- [/软件工程/架构/Web前端/前端工程化.md](/软件工程/架构/Web前端/前端工程化.md) 前端工程化与性能优化是现代前端开发中相辅相成的两个重要方面\n- [/软件工程/架构/Web前端/Web前端.md](/软件工程/架构/Web前端/Web前端.md) Web前端技术体系与前端性能优化在浏览器执行环境、渲染体系、网络协议等方面直接相关\n- [/软件工程/架构/系统设计/缓存.md](/软件工程/架构/系统设计/缓存.md) 缓存策略是前端性能优化的重要手段，浏览器缓存机制与性能优化密切相关\n- [/软件工程/架构/系统设计/前端监控.md](/软件工程/架构/系统设计/前端监控.md) 前端监控与性能优化共同构成前端可观测性体系，关注用户端体验和性能指标\n- [/计算机网络/应用层.md](/计算机网络/应用层.md) 应用层协议（特别是HTTP）的优化是前端性能优化的重要组成部分\n- [/操作系统/linux/Linux性能优化.md](/操作系统/linux/Linux性能优化.md) 系统层面的性能优化与前端性能优化在性能分析方法和优化思想上相通\n- [/编程语言/JAVA/JVM/自动内存管理/调优.md](/编程语言/JAVA/JVM/自动内存管理/调优.md) JVM性能优化与前端性能优化在性能分析、优化策略等方面有共通之处\n- [/软件工程/架构/系统设计/高并发.md](/软件工程/架构/系统设计/高并发.md) 高并发系统设计与前端性能优化都关注系统性能和用户体验\n- [/软件工程/架构/系统设计/可观测性.md](/软件工程/架构/系统设计/可观测性.md) 可观测性体系与前端性能优化在性能监控、指标度量等方面相互关联\n","metadata":"tags: ['性能', '前端']","hasMoreCommit":true,"totalCommits":16,"commitList":[{"date":"2026-05-27T10:08:04+08:00","author":"MY","message":"doc(性能工程): 重构文档","hash":"2e3648b1dc0bf9be8e1790389811bdd99e878f29"},{"date":"2026-02-12T14:07:03+08:00","author":"MY","message":"doc: 整理标签","hash":"290b3e8ad18f48832ac282290238d020fc030a88"},{"date":"2026-01-14T17:46:17+08:00","author":"MY","message":"docs(SUMMARY): 移除重复的AJAX文档引用","hash":"61a6fa3a3c2b1fee57724aefa49bc5512b017e5c"},{"date":"2025-12-30T14:26:09+08:00","author":"MY","message":"docs(browser): 重构前端性能优化文档为性能工程体系","hash":"b2214db5ee69cae6438830402f17960623cbac2f"},{"date":"2024-07-16T16:34:37+08:00","author":"MY","message":"✏前端性能优化","hash":"0f01cccb72db1dc8d6e6dd4af5d2f6572dda1906"},{"date":"2024-07-15T19:59:30+08:00","author":"MY","message":"✏前端性能优化","hash":"030a3f5157dcbb5d0454cad768dbfd94ca5641ee"},{"date":"2024-07-12T17:35:58+08:00","author":"MY","message":"✏前端性能优化","hash":"2aee92282949491b1ea6eba4aa14cc23dd04cabd"},{"date":"2022-10-18T16:19:22+08:00","author":"cjiping","message":"✏️浏览器","hash":"917b0877ffc7030c6666916cb11a3c2a26db8eee"},{"date":"2022-10-17T16:15:45+08:00","author":"cjiping","message":"✏️前端性能优化","hash":"71659b88a4df03bdbb9b6fcb642fa0a2243d17c7"},{"date":"2022-10-17T15:26:37+08:00","author":"cjiping","message":"📦浏览器","hash":"07b49bbcd2ffa7f61ead7892b19de15b3565f65d"}],"createTime":"2021-12-01T17:53:59+08:00"}