⚡ 30 秒速记

• 核心判断：性能优化先建立用户指标与资源、主线程、渲染和网络证据，再定位最长关键路径
• 原理主线：围绕 「性能优化的意义」、「RAIL模型」、「常见性能指标」 建立输入、状态变化与输出之间的因果关系
• 文章范围：系统介绍了前端性能优化的重要性、用户体验标准、RAIL性能模型及常见性能指标，帮助开发者高效定位和提升Web页面性能，提升用户留存和转化率。
• 边界与代价：实验室分数不等于真实用户体验，平均值也会掩盖长尾；优化一项指标可能转移成本
• 工程落地：用现场数据确定瓶颈、做最小改动、对照验证并持续监控回归

前端性能定位不能只看“页面慢不慢”，要结合用户感知指标，找到网络、主线程或渲染链路中真正的瓶颈。 我一般先看 FCP、LCP、FID、CLS，判断问题属于内容出现慢、交互响应慢还是布局不稳定。再通过资源耗时、长任务和帧率缩小范围，例如 TBT 偏高通常说明主线程被超过 50ms 的任务持续占用。指标定义和阈值可能受工具及版本影响，落到项目时还要结合实际设备、网络条件和可复现现象验证。

这篇文章不要按 API 清单来背。先用上面的 Mind Map 建立全局结构，再通过交互 DEMO 观察正常路径和边界路径如何改变状态；阅读正文时重点核对每一步的输入、负责执行的参与者、产生的中间状态以及最终可观察结果。遇到版本敏感结论，要把“历史实现”“当前行为”和“工程兼容策略”分开说明；遇到性能或架构取舍，则用实际指标、失败现象和验证手段支撑判断。

版本校准： 原理文章中的代码代表特定实现与写作时间。应用到当前项目时，应先确认浏览器、框架或工具的主版本，再区分稳定的规范语义、可变化的内部实现和项目自身约束。

性能优化的意义

性能是留住用户很重要的一环

• pinterest 重建了他们的页面以实现性能，使感知等待时间减少了 40％，从而将搜索引擎流量和注册量提高了 15％。
• 通过将平均页面加载时间减少 850 毫秒，COOK 发现他们能够将转化率提高 7％，将跳出率降低 7％，并将每个页面的页面数量增加 10％。
• BBC 发现，他们在网站加载的每一秒钟内就会损失 10％ 的用户。
• DoubleClick by Google 发现，如果网页加载时间超过 3 秒，则会有 53％ 的用户放弃移动网站的访问。

性能是改善转换率至关重要的一环

• 对于 Mobify，主页加载速度每减少 100 毫秒，基于会话的转换增加 1.11％，平均年收入增加近 380,000 美元。此外，结账页面加载速度减少 100 毫秒，基于会话的转换增加了 1.55％，从而使年均收入增长近 530,000 美元
• DoubleClick 发现在 5 秒内加载网站的发布商的广告收入是在 19 秒内加载的网站的两倍。. 当 AutoAnything 将页面加载时间缩短一半时，他们的销售额增长了 12-13％。

用户角度的性能标准是什么