前言
为了提高前端性能，我们需要及时评估代码的性能，并对其进行优化。针对这个问题，我们可以使用性能测量工具，并收集关键性能指标，以帮助我们更好地了解性能问题，并为解决问题提供有价值的参考。
@fashioninsights-zalando/fcp-client 就是一个很棒的性能指标收集工具。
@fashioninsights-zalando/fcp-client 是什么？
@fashioninsights-zalando/fcp-client 是一个能够测量页面的首次内容绘制时间（FCP）的性能测量工具。而内容绘制时间既是 page 的性能数据指标，也是页面速度分数的组成部分，因此对于页面性能调优是非常有价值的。
@fashioninsights-zalando/fcp-client 是由 Zalando 开发的一个 npm 包，使用简便，易于集成到你的项目中。
开始之前
在开始使用@fashioninsights-zalando/fcp-client 之前，确保你的项目中已经安装了 Node.js 和 npm。
安装
使用 npm 安装 @fashioninsights-zalando/fcp-client：
npm install @fashioninsights-zalando/fcp-client
使用方法
在项目中引入
在项目的入口文件中（如 App.js）中加入以下代码：
import { recordFCP } from '@fashioninsights-zalando/fcp-client';收集首次内容绘制时间
使用以下代码收集首次内容绘制时间：
recordFCP();
后续操作
如果你希望在获取首次内容绘制时间之后执行其他操作，可以使用 promise 链式调用。以下是一个示例：
-- -------------------- ---- -------
------ - --------- - ---- --------------------------------------
-----------
-------------- -- -
-------------------- -- ------ -----------------
-- ---------
--
-------------- -- -
--------------------- -- ----
---示例代码
下面是一个完整的 @fashioninsights-zalando/fcp-client 的示例代码：
-- -------------------- ---- -------
------ - --------- - ---- --------------------------------------
------ ------- -------- ----- -
------------ -- -
-----------
-------------- -- -
--------------------
--
-------------- -- -
---------------------
---
-- ----
------ -
-----
----- ------
------
--
-结论
通过使用 @fashioninsights-zalando/fcp-client 来收集首次内容绘制时间，我们能够更好地了解页面性能，并有针对性地进行优化。并且这个工具使用非常简便，易于集成到任何项目中。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/600562da81e8991b448e03c8