前端性能指标监测

---

✅ 一、什么是 window.performance

window.performance 是浏览器提供的高精度性能监控 API，属于 Performance API 的一部分。它能帮助你：

• 精确测量代码执行时间
• 分析页面加载过程
• 评估资源加载性能
• 优化用户体验性能瓶颈

---

✅ 二、常见使用场景

场景	使用目的
页面加载性能分析	分析首屏时间、白屏时间、首字节等
用户交互性能监控	计算按钮点击或动画执行时间
资源加载分析	检查图片、JS、CSS 是否加载过慢
实时性能上报	上报关键性能指标到日志系统或数据平台
指标可视化展示（如 FP、LCP、TTFB）	前端监控工具构建

---

✅ 三、常用 API 与说明

performance.now()

• 返回页面打开到当前时间的精确毫秒数（可精确到小数点后 5 位）
• 高精度计时器，适合代码段执行时间的对比

const start = performance.now()
// 一些耗时操作
const end = performance.now()
console.log(`耗时: ${end - start}ms`)

---

performance.mark() & performance.measure()

用于在时间线上打点、计算两个标记之间的耗时。

performance.mark('start-task')
// 执行任务
performance.mark('end-task')
performance.measure('task-duration', 'start-task', 'end-task')

const measures = performance.getEntriesByName('task-duration')
console.log(measures[0].duration) // 输出耗时

• mark(name)：在某一时间点打标记。
• measure(name, startMark, endMark)：测量两个标记间的时间。
• clearMarks(name)、clearMeasures(name) 可清除历史记录。

---

performance.getEntries() & getEntriesByType()

• 返回当前页面所有的性能数据（navigation、resource、mark、measure 等）。

const allEntries = performance.getEntries()
const resources = performance.getEntriesByType('resource')
const nav = performance.getEntriesByType('navigation')[0]

console.log(nav.domContentLoadedEventEnd - nav.navigationStart) // DCL耗时

---

performance.timing（⚠️ 已废弃，建议使用 navigation 替代）

记录页面加载关键节点的时间戳：

const timing = performance.timing
console.log(`页面加载耗时: ${timing.loadEventEnd - timing.navigationStart}`)

• navigationStart：导航开始
• domContentLoadedEventEnd：DOM结构解析完成
• loadEventEnd：页面完全加载完成

⚠️ 推荐使用 performance.getEntriesByType('navigation') 替代。

---

✅ 四、实战使用示例

1. 测量图片或脚本加载时间

const resources = performance.getEntriesByType('resource')
resources.forEach(entry => {
  if (entry.initiatorType === 'img' || entry.initiatorType === 'script') {
    console.log(`${entry.name} 加载耗时 ${entry.duration.toFixed(2)}ms`)
  }
})

---

⏱️ 2. 精准记录函数耗时

performance.mark('api-start')
// 发起 API 请求
fetch('/api/data')
  .then(() => {
    performance.mark('api-end')
    performance.measure('API调用耗时', 'api-start', 'api-end')
    const measure = performance.getEntriesByName('API调用耗时')[0]
    console.log(`API 耗时: ${measure.duration.toFixed(2)}ms`)
  })

---

3. 获取首次渲染、白屏、首次交互等时间

const nav = performance.getEntriesByType('navigation')[0]
console.log(`白屏时间: ${nav.responseStart - nav.requestStart}ms`)
console.log(`首包时间 (TTFB): ${nav.responseStart - nav.startTime}ms`)
console.log(`DOM解析完成: ${nav.domInteractive - nav.startTime}ms`)
console.log(`页面完全加载: ${nav.loadEventEnd - nav.startTime}ms`)

---

✅ 五、常见类型说明（getEntriesByType）

类型	描述
navigation	页面加载阶段各时间点（重要）
resource	页面资源加载的耗时
paint	渲染相关（如 FP、FCP）
mark	自定义打点
measure	自定义测量
longtask	超过 50ms 的任务（如卡顿）
largest-contentful-paint	最大内容绘制时间

使用 PerformanceObserver 可监听这些时间点（如 LCP、CLS）

---

✅ 六、最佳实践

• ✅ 加载完成后收集关键指标（可在 window.onload 或 setTimeout 后收集）
• ✅ 前端性能监控 SDK 上报（例如首屏、TTFB、FCP、LCP）
• ✅ 配合自定义 mark/measure 做模块级耗时分析
• ❌ 避免频繁读取 getEntries()，可能影响性能

---

✅ 七、小结

特性	用法
精确计时函数执行	performance.now()
记录任意操作耗时	mark + measure
记录资源加载耗时	getEntriesByType('resource')
获取页面加载关键节点	getEntriesByType('navigation')
页面性能优化分析	首包时间、白屏时间、首屏时间、TTI 等

---

八、什么是 tt.performance？

定义

tt.performance 是 字节跳动小程序提供的性能监控接口，类似于 Web 端的 window.performance。

它支持以下方法（功能跟浏览器的 Performance API 类似）：

方法	功能
createObserver(callback)	创建性能观察器，监听特定类型的性能指标
getEntries()	获取所有当前收集到的 performance entry（性能条目）
clearEntries()	清空已记录的 performance entries（通常不常用）

✅ 可监听的性能指标（entry type）

类型	含义
paint	页面绘制相关指标（如 FP、FCP、LCP）
navigation	页面导航指标（如 TTFB、loadTime）
resource	加载静态资源的性能数据（如图片、脚本等）

---

二、核心指标介绍（Performance Metrics）

1. LCP (Largest Contentful Paint)

页面最大可视内容首次出现在屏幕上的时间（如一张大图、一段大文字）

• ⏱ 用于衡量首屏加载体验
• 理想值： 小于 2.5 秒
• 被用户感知最强 —— LCP 晚，就觉得页面“慢”

2. FCP (First Contentful Paint)

首次绘制任何“有意义”的内容（文字、图片、背景图等）

• 通常出现在页面加载初期（FCP < LCP）

3. FP (First Paint)

浏览器开始绘制像素（可能是背景色或空白）

• 不是“有意义内容”，只是标志渲染开始

4. TTFB (Time To First Byte)

浏览器发送请求到收到首字节响应的时间

• 网络和后端性能的重要反映

5. CLS (Cumulative Layout Shift)

页面布局是否“跳来跳去”（影响视觉稳定性）

---