性能指标

性能这个话题，看似离我们很远，其实就在我们每天刷网页时的体验里。快一点还是慢一点，丝滑还是卡顿，全看这些性能指标的表现。

---

常见的几个性能指标

1. 首次绘制（FP）

定义：首次绘制是从页面加载开始，到浏览器首次把一个像素渲染到屏幕上的时间。
俗称“白屏时间”，回答了“用户点进来，多久不再是纯白背景？”这个关键问题。

performance.getEntriesByType("paint")[0];

---

2. 首次内容绘制（FCP）

定义：FCP 是页面上第一个有意义内容被渲染到屏幕的时间。包括：

• 文字（段落、标题）
• 图像（图片、图标）
• 基础布局（边框、背景色）

performance.getEntriesByType("paint")[1];

---

FP 和 FCP 示例

注意：Paint Timing API 还在实验阶段，跨浏览器支持可能不同，实际数据也因浏览器而异。

以下是使用 React 实现 FP 和 FCP 的检测代码：

"use client";

import { useEffect, useState } from "react";

const FPandFCP: React.FC = () => {
  const [paintInfo, setPaintInfo] = useState<PerformancePaintTiming[]>([]);

  const fetchPaintTimings = (): PerformancePaintTiming[] => {
    if (typeof window !== "undefined" && typeof performance !== "undefined") {
      return performance.getEntriesByType("paint") as PerformancePaintTiming[];
    }
    return [];
  };

  useEffect(() => {
    const paintTimings = fetchPaintTimings();
    setPaintInfo(paintTimings);
  }, []);

  return (
    <div className="card">
      {paintInfo.length > 0 &&
        paintInfo.map((paintTiming) => (
          <p key={paintTiming.name}>
            {paintTiming.name.toUpperCase()}: {paintTiming.startTime.toFixed(2)}{" "}
            ms
          </p>
        ))}
    </div>
  );
};

export default FPandFCP;

---

3. 最大内容绘制（LCP）

定义：LCP 是指视口内最大内容（如大图或大块文本）的渲染时间。

典型的 LCP 内容包括：

• 图片（img 元素）
• 视频（video 元素）
• 块级文本元素

---

4. 总阻塞时间（TBT）

定义：TBT 是从 FCP 到 LCP 之间，主线程被阻塞的时间总和。

---

5. 累积布局偏移（CLS）

定义：CLS 测量页面中意外元素移动的程度，比如：

• 页面加载时，图片突然闪现、挤压文字位置
• 动画触发的元素位移

---

6. 页面加载速度 (Speed Index, SI)

定义：SI 是通过计算页面加载过程中内容的可见性变化，来评估页面加载速度的指标。值越小越快。

---

测试

---

---