性能指标

打开一个网页,从白屏到显示内容,从可见到可交互,每一步都关系到用户体验。性能指标就是用来量化这些关键时刻的工具——它们告诉我们,网页在用户眼中到底有多快。

---

为什么需要性能指标?

一个网页从加载到完全可用,经历了很多阶段。有些阶段用户能感知到(比如看到第一个字),有些阶段用户感知不到(比如 JavaScript 在后台执行)。性能指标把这些阶段量化成具体的时间数值,让我们知道:

• 用户等了多久才看到内容?
• 页面什么时候变得可交互?
• 交互过程中有没有出现卡顿?

掌握这些指标,才能有针对性地优化。

---

常见性能指标

1. 首次绘制 (FP, First Paint)

定义: 从页面开始加载到浏览器首次将像素渲染到屏幕上的时间。

这个指标回答了一个问题: 用户打开页面后,多久不再看到纯白屏幕?

FP 标志着页面开始有视觉变化,即使只是背景色,也能让用户知道"页面在加载了",减少焦虑感。

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

---

2. 首次内容绘制 (FCP, First Contentful Paint)

定义: 页面上第一个真实内容被渲染到屏幕的时间。

与 FP 不同,FCP 强调的是"内容",包括:

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

FCP 告诉用户"页面有东西了",是用户感知到页面正在加载的第一个实质性信号。

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

---

FP 和 FCP 示例

以下是使用 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;

注意: Paint Timing API 还在实验阶段,浏览器支持可能有差异。

---

3. 最大内容绘制 (LCP, Largest Contentful Paint)

定义: 视口内最大内容 (如大图或大块文本) 完成渲染的时间。

LCP 关注的是"主要内容何时可见"。对大多数网页来说,最大内容往往就是用户最想看到的部分 (比如文章标题、首图)。LCP 越短,用户感知到的加载速度越快。

典型的 LCP 元素包括:

• 图片 (img 元素)
• 视频 (video 元素的封面)
• 大块文本元素

优化目标: LCP 应控制在 2.5 秒以内。

---

4. 总阻塞时间 (TBT, Total Blocking Time)

定义: 从 FCP 到 LCP 之间,主线程被阻塞的时间总和。

主线程被阻塞意味着浏览器无法响应用户输入 (比如点击、滚动)。TBT 越长,用户越容易感觉页面"卡住了"。

优化方向: 减少 JavaScript 执行时间,拆分长任务,让主线程尽快释放。

---

5. 累积布局偏移 (CLS, Cumulative Layout Shift)

定义: 测量页面中意外元素移动的程度。

你是否遇到过这种情况: 正要点击某个按钮,突然页面跳动,点到了其他地方?这就是布局偏移造成的。

常见原因:

• 图片或广告加载后挤压内容
• 动态插入的元素改变布局
• Web 字体加载后文字重排

优化目标: CLS 应小于 0.1。

优化方向: 为图片和视频预留空间,避免动态插入内容,使用 font-display 控制字体加载。

---

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

定义: 通过计算页面加载过程中内容可见性的变化,评估页面的整体加载速度。

SI 是一个综合性指标,值越小表示页面加载越快。它不关注某个单一时刻,而是关注整个加载过程中内容呈现的速度。

---

测试

---

---