软件开发行业前端部工程师前端性能优化手册.docxVIP

软件开发行业前端部工程师前端性能优化手册

第1章基础知识

1.1前端性能指标

用户对前端性能的感知往往直观而直接。加载一个页面，如果首屏能在2秒内呈现，用户通常能接受；超过5秒，流失率可能直线上升。这并非偶然，而是源于前端性能指标背后的科学定义。核心指标包括加载时间（LoadTime）、首次内容绘制（FirstContentfulPaint,FCP）、可交互时间（TimetoInteractive,TTI）以及累积布局偏移（CumulativeLayoutShift,CLS）。这些指标共同构成了衡量用户体验的基准。

加载时间衡量从输入URL到页面完全加载所需的总时间，但这一指标已逐渐被更精细的FCP和TTI所补充。FCP关注的是页面首次绘制任何内容（包括图片、文字或Canvas绘制）的时间点，它能有效反映服务器响应速度和关键渲染路径效率。而TTI则关注用户能够与页面进行第一次交互（如按钮或滚动）的时间，它比单纯的加载时间更能体现真实用户体验。CLS则关注页面布局的稳定性，意外的元素尺寸变化（如广告加载导致文字跳动）会直接导致CLS值升高，引发用户反感。

除了这些核心指标，还有空闲时间（IdleTime）和长任务（LongTasks）等辅助指标值得关注。空闲时间衡量浏览器主线程处于空闲状态的时间比例，高空闲时间意味着页面响应灵敏。长任务则指执行时间超过