在浏览器性能监控体系中,Performance API 包含哪些用于评估首屏加载时长的关键指标?
考察说明
考查对浏览器性能计时 API 核心指标的理解,能否准确区分并应用各阶段的耗时测量。
回答思路
- 【回答框架 1】Performance API 提供从导航开始到页面完全加载各阶段的时间戳,首屏加载时间一般指用户看到主要内容的时间。常用指标包括 DNS 查询、TCP 连接、TTFB(首字节时间)、DOMContentLoaded 和 load 事件时间。
- 【回答框架 2】对于首屏渲染,更贴近的指标是 First Paint(首次绘制)和 First Contentful Paint(首次内容绘制),可通过 PerformanceObserver 监听 paint 类型的条目获取。FP 表示任何像素绘制,FCP 表示首次绘制文本、图片或 canvas 内容。
- 【回答框架 3】另外,First Meaningful Paint(FMP)曾用于衡量主内容可见时间,但因定义复杂已不推荐;Largest Contentful Paint(LCP)是当前推荐的指标,表示最大内容元素绘制时间,能更好反映首屏主体内容加载。
- 【回答框架 4】在测量时可通过 performance.getEntriesByType('navigation') 获取导航计时,通过 performance.getEntriesByType('paint') 获取绘制时间。需注意 Performance API 的时序属性是只读的,不可修改
- 【关键点 1】Performance API 中可用于衡量首屏加载的指标有 FP、FCP、LCP 以及 TTFB 等。
- 【关键点 2】FP 与 FCP 通过 performance.getEntriesByType('paint') 获取,LCP 用 PerformanceObserver 监听。
- 【关键点 3】LCP 是现代推荐的首屏加载核心指标,反映最大内容元素的渲染时间。
- 【关键点 4】load 事件时间不能直接代表首屏,因为可能等待所有资源加载。
- 【易错点 1】不要将 DOMContentLoaded 或 load 事件时间等同于首屏加载时间。
- 【易错点 2】FMP 因计算复杂且不稳定,已不推荐使用,避免在回答中作为主要指标。