从前端角度浅谈性能 | 京东物流技术团队
内容提要
本文介绍了网站性能对用户体验的重要性，以及Google开发者提出的RAIL模型来衡量应用性能。RAIL模型包括响应、动画、空闲和加载四个方面的性能指标。文章还介绍了核心Web指标，包括LCP、FID和CLS。最后，文章详细解释了一个web页面从输入网址到可交互的全过程。
延伸解读
性能指标并非孤立：RAIL与核心Web指标的互补关系
文章介绍了RAIL模型和核心Web指标（LCP、FID、CLS），两者都关注用户体验，但侧重点不同。RAIL以用户操作为中心，为响应、动画、空闲和加载设定了具体的时间目标；核心Web指标则从加载性能、交互性和视觉稳定性三个维度量化体验。开发者可以结合两者，既关注操作级别的响应速度，也关注页面整体的关键指标，从而更全面地评估性能。
用户耐心因设备与网络而异：移动端加载目标可放宽至5秒
文章指出，用户对性能延迟的感知受网络条件和硬件影响。在快速Wi-Fi和强大台式机上，用户期望页面1秒内加载；而在慢速3G移动设备上，用户更有耐心，5秒内完成加载是更现实的目标。这意味着性能优化不能一刀切，需考虑目标用户的实际环境。对于移动端首次加载，可以5秒可交互为目标，后续加载则争取2秒内完成。
从输入URL到可交互：PerformanceTiming揭示关键时间节点
文章详细列出了从输入网址到页面可交互过程中的PerformanceTiming属性，如navigationStart、fetchStart、domainLookupStart、domInteractive、loadEventEnd等。这些时间戳帮助开发者定位耗时环节，例如DNS查询、TCP连接、DOM解析或资源加载。通过分析这些节点，可以更有针对性地优化性能，而不是笼统地关注总加载时间。
没有完美阈值：性能优化需权衡指标冲突
文章在总结中强调，性能标准有时会相互冲突，例如阈值始终可实现与始终提供良好用户体验之间可能存在矛盾。由于人类感知研究通常提供范围值，用户行为指标也显示逐渐变化，因此没有唯一正确的指标阈值。开发者应参考范围阈值，并从多个合理候选阈值中选择最符合自己网站需求的，而不是追求“完美阈值”。
Q&A
RAIL模型是什么？它包含哪几个方面？
RAIL模型是Google开发者提出的一种以用户为中心的性能模型，用于衡量应用性能。它将用户体验分解为四个关键操作：Response（响应）、Animation（动画）、Idle（空闲）、Load（加载）。
RAIL模型对响应、动画、空闲和加载分别有什么性能指标要求？
RAIL模型的最佳性能指标为：100毫秒内响应用户输入；动画或滚动需在10毫秒内生成每一帧；最大化空闲时间；页面加载时长不超过5秒。
核心Web指标包括哪些？各自测量什么？
核心Web指标包括LCP（最大内容绘制，测量加载性能）、FID（首次输入延迟，测量交互性）和CLS（累积布局偏移，测量视觉稳定性）。
为什么说网站性能影响用户留存和收入？有哪些数据支持？
网站性能直接影响用户体验和留存率。Google DoubleClick研究表明，移动端页面加载超过3秒，用户就会放弃浏览；BBC发现网页加载时长每增1秒，用户流失10%；Amazon曾报道响应时间每提高100ms，收入增加1%。
从输入网址到页面可交互，涉及哪些关键时间节点？
涉及的关键时间节点包括：navigationStart、redirectStart/End、unloadEventStart/End、fetchStart、domainLookupStart/End、connectStart/End、secureConnectionStart、requestStart、responseStart/End、domLoading、domInteractive、domContentLoadedEventStart/End、domComplete、loadEventStart/End等。
优化网站性能时，为什么没有唯一正确的阈值？应该如何选择？
因为标准有时相互冲突，人类感知研究通常提供范围值，用户行为指标显示逐渐变化，所以没有唯一“正确”的阈值。优化时应参考范围阈值，并专注于认清“哪一个候选阈值最符合我们的网站”，从多个合理候选阈值中选择。
