使用PerformanceObserver API 封装 useFirstContentfulPaint(FCP)

计算首屏时间的几种方式

性能监控工具 :性能监控工具如 Google Chrome 的开发者工具( Performance 面板)、Lighthouse 等提供了详细的性能分析和首屏渲染时间的度量。

Navigation Timing API :使用浏览器提供的 Navigation Timing API 来获取有关页面加载和渲染的性能数据。

js 复制代码
const performanceData = window.performance.timing;
const fcpTime = performanceData.msFirstPaint; // 首次绘制时间
console.log(`FCP 时间:${fcpTime}ms`);

标准的 paint 事件 :通过添加事件监听器来监听paint事件,然后捕获FCP事件。

js 复制代码
window.addEventListener('paint', (event) => {
  if (event.name === 'first-contentful-paint') {
    console.log(`FCP 时间:${event.startTime}ms`);
  }
});

PerformanceObserver API:监视各种性能事件。

PerformanceObserver

PerformanceObserver 可用于获取性能相关的数据,例如首帧fp首屏fcp首次有意义的绘制 fmp等。

PerformanceObserver() 创建并返回一个新的 PerformanceObserver 对象。

提供的方法

PerformanceObserver.observe():当记录的性能指标在指定的 entryTypes 之中时,将调用性能观察器的回调函数。

entryTypes 取值:longtask、frame、navigation、resource、mark、measure、paint

PerformanceObserver.disconnect():停止性能观察者回调接收到性能指标。

PerformanceObserver.takeRecords():返回存储在性能观察器中的性能指标的列表,并将其清空。

FP和FCP的关系

First Paint(FP):是指在浏览器首次将像素呈现在屏幕上的时间点,它不一定代表页面内容的可用性。

First Contentful Paint(FCP):是指在浏览器首次呈现页面的内容,即首次绘制任何文本、图像或其他内容的时间点,考虑了页面上的第一个可见内容,因此它通常在 FP 后发生,但它更关注用户体验。

useFirstContentfulPaint

js 复制代码
import { useEffect } from 'react';

function useFirstContentfulPaint() {
  useEffect(() => {
    const observer = new PerformanceObserver(list => {
      const entries = list.getEntries();
      for (const entry of entries) {
        if (entry.name === 'first-contentful-paint') {
          console.log(`First Contentful Paint: ${entry.startTime}ms`);
        }
      }
    });
    observer.observe({ type: 'paint', buffered: true });
    
    return () => observer.disconnect();
  }, []);

  return null;
}

export default useFirstContentfulPaint;
js 复制代码
import { onMounted, onBeforeUnmount } from 'vue';

export default function useFirstContentfulPaint() {
  const observer = new PerformanceObserver(list => {
    const entries = list.getEntries();
    for (const entry of entries) {
      if (entry.name === 'first-contentful-paint') {
        console.log(`First Contentful Paint: ${entry.startTime}ms`);
      }
    }
  });

  onMounted(() => {
    observer.observe({ type: 'paint', buffered: true });
  });

  onBeforeUnmount(() => {
    observer.disconnect();
  });

  return null;
}
相关推荐
人工智能训练师3 小时前
Ubuntu22.04如何安装新版本的Node.js和npm
linux·运维·前端·人工智能·ubuntu·npm·node.js
Seveny073 小时前
pnpm相对于npm,yarn的优势
前端·npm·node.js
yddddddy4 小时前
css的基本知识
前端·css
昔人'4 小时前
css `lh`单位
前端·css
Nan_Shu_6146 小时前
Web前端面试题(2)
前端
知识分享小能手6 小时前
React学习教程,从入门到精通,React 组件核心语法知识点详解(类组件体系)(19)
前端·javascript·vue.js·学习·react.js·react·anti-design-vue
蚂蚁RichLab前端团队7 小时前
🚀🚀🚀 RichLab - 花呗前端团队招贤纳士 - 【转岗/内推/社招】
前端·javascript·人工智能
孩子 你要相信光7 小时前
css之一个元素可以同时应用多个动画效果
前端·css
萌萌哒草头将军7 小时前
Oxc 和 Rolldown Q4 更新计划速览!🚀🚀🚀
javascript·vue.js·vite
huangql5207 小时前
npm 发布流程——从创建组件到发布到 npm 仓库
前端·npm·node.js