# 性能监控

# LCP 和 FCP

LCP（Largest Contentful Paint）和 FCP（First Contentful Paint）都是衡量网页加载性能的重要指标，但它们关注的焦点不同。下面是它们的区别：

# FCP (First Contentful Paint)

定义：FCP 是指浏览器渲染出第一片可见内容的时间点。这可以是任何非空白的内容，包括文本、图片、SVG、非空白的 canvas 等。
特点：
- 首次视觉反馈：FCP 标志着用户开始看到页面上的内容，而不是一个完全空白的屏幕。
- 早期感知：它反映了用户对页面加载速度的最早感知，即使页面还没有完全加载完毕。
重要性：FCP 对用户体验非常重要，因为它直接影响用户对网站加载速度的第一印象。较快的 FCP 时间可以减少用户的等待焦虑，提高用户满意度。

# LCP (Largest Contentful Paint)

定义：LCP 是指页面上最大的内容元素（通常是图片或文本块）被渲染到屏幕上的时间。这个元素通常是页面的主要内容之一，对用户的视觉体验有较大影响。
特点：
- 主要内容加载：LCP 关注的是页面上最重要的视觉内容何时加载完成，这通常标志着用户可以看到页面的核心信息。
- 用户体验：LCP 是衡量用户是否觉得页面已经“足够加载”以进行交互的一个重要指标。
重要性：LCP 是衡量页面加载性能的关键指标之一，特别是在 Google 的 Core Web Vitals 中占有重要地位。优化 LCP 可以显著改善用户的整体体验，提高页面的搜索排名。

# 区别总结

时间点：
- FCP：页面上第一个可见内容的渲染时间。
- LCP：页面上最大内容元素的渲染时间。
内容范围：
- FCP：任何非空白内容，可以是简单的文本或小图标。
- LCP：页面上最大的内容元素，通常是图片或大块文本。
用户体验：
- FCP：用户开始看到内容的时间，减少了白屏时间。
- LCP：用户看到主要内容的时间，提高了对页面加载速度的整体感知。

# 优化建议

优化 FCP：
- 减少服务器响应时间。
- 优化 CSS 和 JavaScript 的加载和执行。
- 使用浏览器缓存和资源预加载技术。
优化 LCP：
- 压缩和优化图片大小。
- 使用懒加载技术延迟非关键资源的加载。
- 优化关键渲染路径，确保主要内容优先加载。

# 如何计算 FCP 和 LCP

FCP

if (performance.getEntriesByType) {
  const performanceEntries = performance.getEntriesByType('paint');
  const fcpEntry = performanceEntries.find(entry => entry.name === 'first-contentful-paint');
  
  if (fcpEntry) {
    console.log('FCP:', fcpEntry.startTime, 'ms');
  } else {
    console.log('FCP not available');
  }
}

LCP

if (performance.getEntriesByType) {
  const performanceEntries = performance.getEntriesByType('largest-contentful-paint');
  const lcpEntry = performanceEntries[0]; // 通常只有一个 LCP 事件
  
  if (lcpEntry) {
    console.log('LCP:', lcpEntry.renderTime || lcpEntry.loadTime, 'ms');
  } else {
    console.log('LCP not available');
  }
}

# 接口性能监控

在 http header 上面添加标记，然后判断当前是接口是否是轮询，如果是轮询。

维护一个请求池，再劫持 response，监听当前的请求，是否完成，如何完成，则删除该请求。

← Web 存储性能优化 →