目录一、先说结论页面性能监测本质是什么二、页面性能监测到底监测什么1. 页面加载性能2. 用户体验指标3. 运行时性能4. 稳定性指标三、实现页面性能监测整体方案怎么设计四、前端怎么采集性能数据1. 使用 performance API常用对象2. 采集页面导航耗时示例3. 采集 FCP、LCP 等核心指标采集 FCP采集 LCP采集 CLS采集长任务 Long Task4. 采集资源加载性能示例5. 自定义埋点示例五、单页应用 SPA 怎么监测性能SPA 监测重点常见做法1. 劫持路由切换开始时间2. 在页面渲染完成后记录结束时间3. 或者用 mark measure六、如何判断“首屏时间”1. 简单近似法2. 业务埋点法3. MutationObserver 方案七、怎么做数据上报常见上报方式1. navigator.sendBeacon()优点2. fetch3. Image 打点缺点八、上报时要注意什么1. 采样2. 去重和节流3. 携带上下文信息4. 异常值过滤九、服务端怎么处理这些数据服务端一般做什么常见维度分析十、页面性能监测里常见的技术点1. Web Vitals示例2. PerformanceObserver3. MutationObserver4. requestAnimationFrame5. Error Monitoring Performance十一、白屏怎么监测1. 关键节点检测2. 采样检测屏幕中心点元素3. 结合错误和资源失败十二、如何监测接口性能1. 重写 fetch2. 劫持 XMLHttpRequest3. 配合业务埋点十三、性能监测 SDK 怎么封装SDK 大致结构1. 初始化配置2. 指标采集模块3. 数据缓存与队列4. 上报模块5. 生命周期处理简化版代码示意十四、面试里怎么讲“难点”常见难点1. 指标定义不统一2. SPA 场景复杂3. 数据准确性问题4. 上报成功率问题5. 数据量和成本问题6. 采集了数据但无法指导优化十五、如果是实际项目我会怎么做十六、面试高分模板标准高分回答十七、你还可以顺带补充的加分点十八、一句话总结这是前端面试里的高频题而且很容易从“背 API”变成“讲体系”。如果你只说用performanceAPI 获取页面加载时间。这不算错但太浅。更好的回答应该从监测什么、怎么采集、怎么上报、怎么分析、怎么落地优化这几个层面去讲。一、先说结论页面性能监测本质是什么页面性能监测本质上就是采集用户真实访问过程中的关键性能指标然后把这些数据上报到服务端最后做统计分析和告警用于发现性能问题并推动优化。它不是单纯地“看个首屏时间”而是一个完整链路指标定义 - 前端采集 - 数据上报 - 服务端存储分析 - 可视化/告警 - 优化回归验证二、页面性能监测到底监测什么通常可以分成 4 大类页面加载性能用户体验指标运行时性能稳定性指标1. 页面加载性能这类指标关注页面从打开到可用的过程。常见指标有DNS 查询时间TCP 连接时间SSL 握手时间TTFB首字节时间HTML 下载时间DOM 解析完成时间白屏时间首屏时间页面完全加载时间资源加载耗时2. 用户体验指标这部分现在通常参考Web Vitals。核心指标包括FCPFirst Contentful Paint首次内容绘制LCPLargest Contentful Paint最大内容绘制FIDFirst Input Delay首次输入延迟INPInteraction to Next Paint交互到下一次绘制CLSCumulative Layout Shift累计布局偏移TTFB首字节时间如果你想答得更贴近当前标准可以重点说现在比较核心的是 Web Vitals尤其是 LCP、INP、CLS。3. 运行时性能页面加载完成后不代表性能就没问题了。还要关注长任务Long TaskJS 执行耗时页面卡顿FPS内存占用接口请求耗时异步任务堆积4. 稳定性指标性能监控通常和前端监控体系是一起建设的所以常常也会带上稳定性数据JS 运行时错误Promise 异常资源加载失败接口错误白屏异常页面崩溃卡死率三、实现页面性能监测整体方案怎么设计你可以给面试官一个完整架构图思路浏览器端采集 ├─ Navigation Timing ├─ PerformanceObserver ├─ Resource Timing ├─ Web Vitals ├─ Error 监控 └─ 自定义打点 ↓ 数据清洗与采样 ↓ 上报sendBeacon / img / fetch ↓ 服务端接收 ↓ 存储分析 ↓ 可视化看板 / 告警系统四、前端怎么采集性能数据这个是核心。1. 使用performanceAPI浏览器原生提供了 Performance API用来拿页面加载相关时间。常用对象performance.timing老performance.getEntriesByType()performance.now()PerformanceObserver现在更推荐基于PerformanceNavigationTimingPerformanceResourceTimingPerformancePaintTiming2. 采集页面导航耗时示例const navigation performance.getEntriesByType(navigation)[0] console.log(navigation)可以拿到这些关键时间domainLookupStart / domainLookupEndconnectStart / connectEndrequestStartresponseStart / responseEnddomContentLoadedEventEndloadEventEnd然后可以计算const nav performance.getEntriesByType(navigation)[0] const metrics { dns: nav.domainLookupEnd - nav.domainLookupStart, tcp: nav.connectEnd - nav.connectStart, ttfb: nav.responseStart - nav.requestStart, download: nav.responseEnd - nav.responseStart, domReady: nav.domContentLoadedEventEnd - nav.startTime, load: nav.loadEventEnd - nav.startTime, }3. 采集 FCP、LCP 等核心指标这部分一般通过PerformanceObserver。采集 FCPconst observer new PerformanceObserver((list) { for (const entry of list.getEntries()) { if (entry.name first-contentful-paint) { console.log(FCP:, entry.startTime) } } }) observer.observe({ type: paint, buffered: true })采集 LCPlet lcp 0 const lcpObserver new PerformanceObserver((entryList) { const entries entryList.getEntries() const lastEntry entries[entries.length - 1] lcp lastEntry.startTime }) lcpObserver.observe({ type: largest-contentful-paint, buffered: true }) window.addEventListener(beforeunload, () { console.log(LCP:, lcp) })实际中一般会在页面隐藏时取最终值而不只是beforeunload。采集 CLSlet clsValue 0 const clsObserver new PerformanceObserver((list) { for (const entry of list.getEntries()) { if (!entry.hadRecentInput) { clsValue entry.value } } }) clsObserver.observe({ type: layout-shift, buffered: true })采集长任务 Long Taskconst longTaskObserver new PerformanceObserver((list) { for (const entry of list.getEntries()) { console.log(Long Task:, entry.duration) } }) longTaskObserver.observe({ type: longtask, buffered: true })长任务一般指主线程执行超过 50ms 的任务它很适合用来发现页面卡顿。4. 采集资源加载性能通过performance.getEntriesByType(resource)可以拿到每个资源的加载信息例如JSCSS图片字体接口请求部分场景示例const resources performance.getEntriesByType(resource) resources.forEach(item { console.log({ name: item.name, duration: item.duration, initiatorType: item.initiatorType }) })这可以帮助你分析哪个 JS 文件太大哪张图加载太慢哪个接口耗时很高哪类资源影响首屏5. 自定义埋点有些业务指标浏览器不能直接提供需要自己打点。例如首屏渲染完成时间某模块可交互时间列表接口返回到渲染完成时间路由切换耗时SPA 页面切换耗时示例performance.mark(list-request-start) // 请求完成并渲染后 performance.mark(list-render-end) performance.measure( list-render-duration, list-request-start, list-render-end ) const measures performance.getEntriesByName(list-render-duration) console.log(measures[0].duration)这个在实际项目里非常有价值因为原生指标只能反映通用性能无法反映业务关键路径。五、单页应用 SPA 怎么监测性能这是面试很喜欢追问的点。传统多页应用可以监测一次完整页面加载但在 SPA 里很多页面切换并不会重新刷新页面所以要额外处理。SPA 监测重点首次加载性能路由切换耗时接口请求耗时组件渲染耗时异步 chunk 加载耗时常见做法1. 劫持路由切换开始时间比如在 Vue Router / React Router 里记录路由切换开始。const start performance.now()2. 在页面渲染完成后记录结束时间const end performance.now() const duration end - start3. 或者用markmeasureperformance.mark(route-start) // 页面渲染完成 performance.mark(route-end) performance.measure(route-change, route-start, route-end)六、如何判断“首屏时间”这个问题比较复杂因为浏览器没有一个绝对标准的“首屏时间 API”。通常有几种做法1. 简单近似法用FCP、LCP去近似首屏体验。FCP 表示“有内容出现了”LCP 更接近用户感知上的主内容展示完成所以现在实际中很多团队会直接把LCP当核心首屏指标之一。2. 业务埋点法在首屏核心模块渲染完成后手动打点这种最贴近真实业务。例如首页最重要的是Banner首屏商品列表关键按钮那么可以在这些元素渲染完成后记录首屏完成时间。3. MutationObserver 方案通过监听 DOM 变化结合视口判断首屏元素是否已渲染。这种方法更复杂适合做通用 SDK但实现和维护成本较高。七、怎么做数据上报采集到数据后要传给后端。常见上报方式1.navigator.sendBeacon()最推荐的性能上报方式。navigator.sendBeacon(/report, JSON.stringify(data))优点适合页面卸载时上报不阻塞页面跳转成功率较高2.fetch适合普通时机上报。fetch(/report, { method: POST, body: JSON.stringify(data), keepalive: true, headers: { Content-Type: application/json } })3.Image打点老方案现在也还会用。const img new Image() img.src /report?data${encodeURIComponent(JSON.stringify(data))}缺点只能 GET数据量有限不够优雅八、上报时要注意什么这部分说出来很像实战经验。1. 采样不是所有用户、所有页面都全量上报否则成本太高。例如10% 采样高频页面 1% 采样异常数据全量上报if (Math.random() 0.1) { report(data) }2. 去重和节流有些指标可能重复触发比如路由切换、多次隐藏页面需要避免重复上报。3. 携带上下文信息性能数据本身不够还要带上环境信息URL路由用户 ID / 匿名 ID设备信息浏览器信息网络类型地区应用版本时间戳例如const reportData { url: location.href, ua: navigator.userAgent, connection: navigator.connection?.effectiveType, metrics: { fcp: 1200, lcp: 2200 }, timestamp: Date.now() }4. 异常值过滤比如负值极端值明显不合法的数据防止污染分析结果。九、服务端怎么处理这些数据前端采集只是第一步完整监控体系一定包括后端。服务端一般做什么接收上报数据数据清洗存入日志系统/数据库聚合计算可视化展示告警触发常见维度分析页面维度接口维度地域维度浏览器维度设备维度网络维度版本维度这样可以看出来是某个页面慢还是某个版本退化还是某个地区网络差还是某个浏览器兼容有问题十、页面性能监测里常见的技术点如果面试官继续追问你可以分点答。1. Web Vitals推荐重点提LCPINPCLS也可以顺带说 Google 官方有web-vitals库实际项目中很好用。示例import { onLCP, onCLS, onINP } from web-vitals onLCP(console.log) onCLS(console.log) onINP(console.log)如果是工程项目用官方库往往比自己手写兼容性更稳。2. PerformanceObserver这是现代性能采集核心 API适合监听paintlargest-contentful-paintlayout-shiftlongtaskresource3. MutationObserver适合做首屏元素监听白屏检测辅助自定义渲染完成判断4. requestAnimationFrame适合做帧率分析卡顿分析5. Error Monitoring Performance性能与稳定性经常结合起来看。例如慢接口是否同时导致白屏JS 报错是否导致首屏失败静态资源加载失败是否导致 LCP 变差十一、白屏怎么监测这是一个很实战的追问。白屏监测通常没有标准 API一般会结合这些思路1. 关键节点检测判断某个根节点下是否有有效内容。例如const app document.querySelector(#app) if (!app || app.children.length 0) { // 可能白屏 }2. 采样检测屏幕中心点元素检查视口若干采样点是否都落在html/body/#app这类容器元素上如果是可能说明没有业务内容渲染出来。3. 结合错误和资源失败比如主 JS 加载失败路由组件 chunk 加载失败运行时异常导致 React/Vue 没挂载成功这些常常和白屏联动。十二、如何监测接口性能页面性能和接口性能是强相关的。常见方法1. 重写fetchconst originFetch window.fetch window.fetch async function (...args) { const start performance.now() try { const res await originFetch.apply(this, args) const duration performance.now() - start console.log(fetch duration:, duration) return res } catch (e) { const duration performance.now() - start console.log(fetch error duration:, duration) throw e } }2. 劫持XMLHttpRequest通过重写open/send统计耗时和状态码。3. 配合业务埋点比如接口成功返回后到视图真正渲染出来的时间这比单纯接口耗时更有意义。十三、性能监测 SDK 怎么封装如果问到工程化可以这样回答。SDK 大致结构1. 初始化配置应用 ID上报地址采样率是否开启各类监控2. 指标采集模块navigationresourceweb vitalslong taskroute timingapi timing3. 数据缓存与队列本地暂存批量上报节流防抖4. 上报模块sendBeaconfetchfallback5. 生命周期处理loadvisibilitychangebeforeunloadpagehide简化版代码示意class PerfMonitor { constructor(options) { this.url options.url this.appId options.appId this.queue [] } collectNavigation() { const nav performance.getEntriesByType(navigation)[0] if (!nav) return this.queue.push({ type: navigation, dns: nav.domainLookupEnd - nav.domainLookupStart, tcp: nav.connectEnd - nav.connectStart, ttfb: nav.responseStart - nav.requestStart, load: nav.loadEventEnd - nav.startTime, }) } report() { const data JSON.stringify({ appId: this.appId, data: this.queue, time: Date.now() }) if (navigator.sendBeacon) { navigator.sendBeacon(this.url, data) } else { fetch(this.url, { method: POST, body: data, keepalive: true, headers: { Content-Type: application/json } }) } this.queue [] } init() { window.addEventListener(load, () { this.collectNavigation() this.report() }) } }十四、面试里怎么讲“难点”这个问题答出来会很加分。常见难点1. 指标定义不统一比如“首屏时间”没有统一标准不同业务页面定义不一样。2. SPA 场景复杂路由切换并不是真正刷新页面很多传统指标拿不到。3. 数据准确性问题浏览器兼容差异指标触发时机不一致用户中途离开页面后台标签页影响数据4. 上报成功率问题页面关闭时数据容易丢失所以常用sendBeacon5. 数据量和成本问题必须做采样、聚合和去重6. 采集了数据但无法指导优化所以一定要把数据和页面、版本、接口、资源、错误关联起来十五、如果是实际项目我会怎么做这个回答很像“有经验的人”。如果是实际项目我会优先基于 Web Vitals PerformanceObserver 做通用性能采集拿到 LCP、CLS、INP、FCP、导航耗时、资源耗时、长任务这些通用指标然后针对 SPA 再补充路由切换耗时和业务关键模块渲染埋点上报层面会用sendBeacon兜底并做采样、去重和批量上报最后在服务端按页面、版本、设备、网络环境做聚合分析并配置性能劣化告警。这样不仅能看到页面慢不慢还能知道是哪些资源、接口、页面或版本导致的。十六、面试高分模板你可以直接背这版。标准高分回答页面性能监测本质上是一个完整链路不只是前端拿几个时间值而是包括指标定义、前端采集、数据上报、服务端分析和告警。前端采集层面我通常会分成几类指标第一类是页面加载性能比如 DNS、TCP、TTFB、DOMContentLoaded、load 等这部分可以通过performance.getEntriesByType(navigation)获取第二类是用户体验指标也就是 Web Vitals比如 FCP、LCP、CLS、INP这部分通常通过PerformanceObserver或web-vitals库采集第三类是运行时性能比如长任务、资源加载耗时、接口耗时、路由切换耗时、首屏关键模块渲染耗时这部分会结合resource timing、长任务监听和业务自定义埋点第四类是稳定性指标比如 JS 错误、资源加载失败、白屏等。采集到数据后我会统一封装成 SDK通过sendBeacon或fetch keepalive上报同时带上页面 URL、应用版本、设备信息、网络环境等上下文。为了控制成本和保证数据质量还会做采样、去重、节流和异常值过滤。服务端会对这些数据做聚合分析比如按页面、版本、浏览器、地域、设备维度统计 P75、P90 等分位数并设置性能劣化告警。如果是 SPA 场景我还会重点补充路由切换耗时和业务模块渲染耗时因为单页应用不完全适用于传统页面加载指标。所以我理解页面性能监测不是单一 API 的问题而是一整套“采集、上报、分析、告警、优化验证”的体系。十七、你还可以顺带补充的加分点如果面试官有兴趣可以继续说为什么sendBeacon比beforeunload ajax更可靠为什么要看 P75 / P90而不只看平均值为什么真实用户监控RUM比实验室数据更有价值如何结合 Lighthouse 做实验室性能分析如何做版本对比和回归检测十八、一句话总结页面性能监测的核心不是“拿到几个时间”而是围绕真实用户体验建立一套从指标采集、上报、分析到告警和优化闭环的监控体系。