网页版 Firebase 性能监控

一、概述

在此 Codelab 中，您将学习如何使用 Firebase Performance Monitoring 来衡量聊天网络应用的性能。访问https://fireperf-friendlychat.web.app/观看现场演示。

你会学到什么

• 如何将 Firebase 性能监控添加到您的 Web 应用程序以获取开箱即用的指标（页面加载和网络请求）。
• 如何使用自定义跟踪测量特定代码段。
• 如何记录与自定义跟踪关联的其他自定义指标。
• 如何使用自定义属性进一步细分您的性能数据。
• 如何使用性能监控仪表板了解您的 Web 应用程序的性能。

你需要什么

• 您选择的 IDE 或文本编辑器，例如WebStorm 、 Atom 、 Sublime或VS Code
• 一个终端/控制台
• 您选择的浏览器，例如 Chrome
• Codelab 的示例代码（请参阅本 Codelab 的下一部分，了解如何获取代码。）

2.获取示例代码

从命令行克隆代码实验室的GitHub 存储库：

git clone https://github.com/firebase/codelab-friendlychat-web

或者，如果您没有安装 git，您可以将存储库下载为 zip 文件。

导入入门应用

使用您的 IDE，从克隆的存储库中打开或导入 📁 performance-monitoring-start目录。这个 📁 performance-monitoring-start目录包含代码实验室的起始代码，它是一个聊天网络应用程序。

3. 创建并设置一个 Firebase 项目

创建一个 Firebase 项目

1. 在Firebase 控制台中，单击添加项目。
2. 将您的 Firebase 项目命名为FriendlyChat 。

记住您的 Firebase 项目的项目 ID。

3. 单击创建项目。

将 Firebase 网络应用程序添加到项目

1. 单击网络图标创建一个新的 Firebase 网络应用程序。
2. 使用昵称Friendly Chat注册应用程序，然后选中Also set up Firebase Hosting for this app旁边的框。
3. 单击注册应用程序。
4. 单击完成其余步骤。您现在不需要按照屏幕上的说明进行操作；这些将在本 Codelab 的后续步骤中介绍。

为 Firebase 身份验证启用 Google 登录

为了允许用户使用他们的 Google 帐户登录聊天应用程序，我们将使用Google登录方法。

您需要启用Google登录：

1. 在 Firebase 控制台中，找到左侧面板中的“开发”部分。
2. 单击Authentication ，然后单击Sign-in method选项卡（转到 console ）。
3. 启用Google登录提供程序，然后单击保存。

启用 Cloud Firestore

该 Web 应用使用Cloud Firestore保存聊天消息和接收新的聊天消息。

您需要启用 Cloud Firestore：

1. 在 Firebase 控制台的开发部分中，单击数据库。
2. 单击 Cloud Firestore 窗格中的创建数据库。
3. 选择Start in test mode选项，然后在阅读有关安全规则的免责声明后单击Enable 。

此 Codelab 的起始代码包含更安全的规则。我们稍后会在 Codelab 中部署它们。

启用云存储

该 Web 应用程序使用 Cloud Storage for Firebase 来存储、上传和共享图片。

您需要启用云存储：

1. 在 Firebase 控制台的Develop部分，单击Storage 。
2. 单击开始。
3. 阅读关于您的 Firebase 项目安全规则的免责声明，然后点击Got it 。

起始代码包括一个基本的安全规则，我们稍后将在 Codelab 中部署它。

4.安装Firebase命令行界面

Firebase 命令行界面 (CLI) 允许您使用 Firebase 托管在本地为您的 Web 应用程序提供服务，以及将您的 Web 应用程序部署到您的 Firebase 项目。

1. 按照 Firebase 文档中的这些说明安装 CLI。
2. 通过在终端中运行以下命令来验证是否已正确安装 CLI：

firebase --version

确保您的 Firebase CLI 版本为 v8.0.0 或更高版本。

3. 通过运行以下命令授权 Firebase CLI：

firebase login

我们已经设置了 Web 应用程序模板，以从应用程序的本地目录（您之前在代码实验室中克隆的存储库）中提取应用程序的 Firebase 托管配置。但是要提取配置，我们需要将您的应用程序与您的 Firebase 项目相关联。

4. 确保您的命令行正在访问您应用程序的本地performance-monitoring-start目录。
5. 通过运行以下命令将您的应用与 Firebase 项目相关联：

firebase use --add

6. 出现提示时，选择您的项目 ID，然后为您的 Firebase 项目指定一个别名。

如果您有多个环境（生产、暂存等），别名很有用。但是，对于此 Codelab，我们只使用default的别名。

7. 按照命令行中的其余说明进行操作。

5. 与 Firebase 性能监控集成

有多种方法可以与 Firebase Performance Monitoring SDK for web 集成（有关详细信息，请参阅文档）。在此 Codelab 中，我们将从Hosting URLs启用性能监控。

添加性能监控并初始化 Firebase

1. 打开src/index.js文件，然后在TODO下方添加以下行以包含 Firebase Performance Monitoring SDK。

索引.js

// TODO: Import the Firebase Performance Monitoring library here.
 import {
   getPerformance,
   trace
 } from 'firebase/performance';

2. 我们还需要使用包含有关 Firebase 项目和我们要使用的 Web 应用程序的信息的配置对象来初始化 Firebase SDK。由于我们使用的是 Firebase 托管，您可以导入一个特殊脚本来为您执行此配置。对于此 Codelab，我们已在public/index.html文件底部为您添加了以下行，但请仔细检查它是否存在。

索引.html

<!-- This script is created by webpack -->
<script type="module" src="scripts/main.js"></script>

3. 在src/index.js文件中，在TODO下方添加以下行以初始化性能监控。

索引.js

// TODO: Initialize Firebase Performance Monitoring.
getPerformance();

当用户使用您的站点时，性能监控现在会自动为您收集页面加载和网络请求指标！请参阅文档以了解有关自动页面加载跟踪的更多信息。

添加第一个输入延迟 polyfill 库

首次输入延迟很有用，因为浏览器对用户交互的响应给了用户他们对应用程序响应能力的第一印象。

首次输入延迟在用户首次与页面上的元素交互时开始，例如单击按钮或超链接。它在浏览器能够响应输入后立即停止，这意味着浏览器不忙于加载或解析您的内容。

这个 polyfill 库对于性能监控集成是可选的。

打开public/index.html文件，然后取消注释以下行。

索引.html

<!-- TODO: Enable First Input Delay polyfill library. -->
<script type="text/javascript">!function(n,e){var t,o,i,c=[],f={passive:!0,capture:!0},r=new Date,a="pointerup",u="pointercancel";function p(n,c){t||(t=c,o=n,i=new Date,w(e),s())}function s(){o>=0&&o<i-r&&(c.forEach(function(n){n(o,t)}),c=[])}function l(t){if(t.cancelable){var o=(t.timeStamp>1e12?new Date:performance.now())-t.timeStamp;"pointerdown"==t.type?function(t,o){function i(){p(t,o),r()}function c(){r()}function r(){e(a,i,f),e(u,c,f)}n(a,i,f),n(u,c,f)}(o,t):p(o,t)}}function w(n){["click","mousedown","keydown","touchstart","pointerdown"].forEach(function(e){n(e,l,f)})}w(n),self.perfMetrics=self.perfMetrics||{},self.perfMetrics.onFirstInputDelay=function(n){c.push(n),s()}}(addEventListener,removeEventListener);</script>

至此，您已经在代码中完成了与 Firebase 性能监控的集成！

在以下步骤中，您将了解如何使用 Firebase 性能监控添加自定义跟踪。如果您只想收集自动跟踪，请转到“部署并开始发送图像”部分。

6. 向您的应用添加自定义跟踪

性能监控允许您创建自定义跟踪。自定义跟踪是应用程序中执行块持续时间的报告。您可以使用 SDK 提供的 API 定义自定义跟踪的开始和结束。

1. 在src/index.js文件中，获取性能对象，然后创建用于上传图像消息的自定义跟踪。

索引.js

// TODO: Create custom trace to monitor image upload.
const t = trace(perf, "saveImageMessage");

2. 要记录自定义轨迹，您需要指定轨迹的起点和终点。您可以将跟踪视为计时器。

索引.js

// TODO: Start the "timer" for the custom trace.
t.start();

 ...

    // TODO: Stop the "timer" for the custom trace.
    t.stop();

您已成功定义自定义跟踪！部署代码后，如果用户发送图像消息，自定义跟踪的持续时间将被记录下来。这将使您了解真实世界的用户在您的聊天应用程序中发送图像需要多长时间。

7. 将自定义指标添加到您的应用程序。

您可以进一步配置自定义跟踪记录其范围内发生的性能相关事件的自定义指标。例如，您可以使用指标来调查上传时间是否受到我们在上一步中定义的自定义跟踪的图像大小的影响。

1. 找到上一步中的自定义跟踪（在您的src/index.js文件中定义）。
2. 在TODO下方添加以下行，记录上传图片的大小。

索引.js

 ...

// TODO: Record image size.
t.putMetric('imageSize', file.size);

 ...

此指标使性能监控能够记录自定义跟踪持续时间以及上传的图像大小。

8. 为您的应用添加自定义属性

在前面的步骤的基础上，您还可以收集自定义跟踪的自定义属性。自定义属性有助于按特定于您的应用程序的类别对数据进行细分。例如，您可以收集图像文件的 MIME 类型以调查 MIME 类型可能如何影响性能。

1. 使用src/index.js文件中定义的自定义跟踪。
2. 在TODO下方添加以下行，记录上传图片的 MIME 类型。

索引.js

 ...

// TODO: Record image MIME type.
t.putAttribute('imageType', file.type);

 ...

此属性使性能监控能够根据上传的图像类型对自定义跟踪持续时间进行分类。

9. [扩展] 使用 User Timing API 添加自定义轨迹

Firebase Performance Monitoring SDK 的设计使其可以异步加载，因此它不会在页面加载期间对 Web 应用程序的性能产生负面影响。在加载 SDK 之前，Firebase 性能监控 API 不可用。在这种情况下，您仍然可以使用User Timing API添加自定义跟踪。 Firebase 性能 SDK 将从measure()中获取持续时间并将它们记录为自定义跟踪。

我们将使用 User Timing API 测量加载应用样式脚本的持续时间。

1. 在public/index.html文件中，添加以下行以标记应用样式脚本加载的开始。

索引.html

<!-- TODO: Mark the starting of `timer` for loading App Styling script. -->
<script type="text/javascript">performance && performance.mark('loadStylingStart');</script>

2. 添加以下行以标记应用样式脚本加载的结束，并测量开始和结束之间的持续时间。

索引.html

<!-- TODO: Mark the ending of `timer` for loading App Styling script. Measure the duration from start to end. -->
<script type="text/javascript">
  performance && performance.mark('loadStylingEnd');
  performance && performance.measure('loadStyling', 'loadStylingStart', 'loadStylingEnd');
</script>

您在此处创建的条目将由 Firebase 性能监控自动收集。稍后您将能够在 Firebase 性能控制台中找到名为loadStyling的自定义跟踪。

10.部署并开始发送镜像

部署到 Firebase 托管

将 Firebase 性能监控添加到您的代码后，请按照以下步骤将您的代码部署到 Firebase 托管：

1. 确保您的命令行正在访问您应用程序的本地performance-monitoring-start目录。
2. 通过运行以下命令将文件部署到 Firebase 项目：

firebase deploy

3. 控制台应显示以下内容：

=== Deploying to 'friendlychat-1234'...

i  deploying firestore, storage, hosting
i  storage: checking storage.rules for compilation errors...
✔  storage: rules file storage.rules compiled successfully
i  firestore: checking firestore.rules for compilation errors...
✔  firestore: rules file firestore.rules compiled successfully
i  storage: uploading rules storage.rules...
i  firestore: uploading rules firestore.rules...
i  hosting[friendlychat-1234]: beginning deploy...
i  hosting[friendlychat-1234]: found 8 files in ./public
✔  hosting[friendlychat-1234]: file upload complete
✔  storage: released rules storage.rules to firebase.storage/friendlychat-1234.appspot.com
✔  firestore: released rules firestore.rules to cloud.firestore
i  hosting[friendlychat-1234]: finalizing version...
✔  hosting[friendlychat-1234]: version finalized
i  hosting[friendlychat-1234]: releasing new version...
✔  hosting[friendlychat-1234]: release complete

✔  Deploy complete!

Project Console: https://console.firebase.google.com/project/friendlychat-1234/overview
Hosting URL: https://friendlychat-1234.firebaseapp.com

4. 访问您现在使用 Firebase 托管完全托管在您自己的两个 Firebase 子域中的 Web 应用程序： https://<projectId>.firebaseapp.com和https://<projectId>.web.app 。

验证是否启用了性能监控

打开Firebase 控制台并转到“性能”选项卡。如果您看到显示“检测到 SDK”的欢迎消息，那么您已经成功集成了 Firebase 性能监控！

发送图片信息

通过在您的聊天应用程序中发送图像来生成一些性能数据。

1. 登录您的聊天应用程序后，单击图片上传按钮 .
2. 使用文件选择器选择图像文件。
3. 尝试发送多张图片（一些样本存储在public/images/中），以便您可以测试自定义指标和自定义属性的分布。

新消息应与您选择的图像一起显示在应用程序的用户界面中。

11.监控仪表板

在部署您的 Web 应用程序并以用户身份发送图像消息后，您可以在性能监控仪表板（在 Firebase 控制台中）中查看性能数据。

访问您的仪表板

1. 在Firebase 控制台中，选择包含您的Friendly Chat应用的项目。
2. 在左侧面板中，找到“质量”部分，然后单击“性能” 。

查看设备上的数据

在性能监控处理完您应用的数据后，您会在仪表板顶部看到选项卡。如果您还没有看到任何数据或选项卡，请务必稍后再回来查看。

1. 单击在设备上选项卡。

• 页面加载表显示了性能监控在页面加载时自动收集的各种性能指标。
• Durations表显示您在应用程序代码中定义的任何自定义跟踪。

2. 单击Durations表中的saveImageMes​​sage以查看跟踪的特定指标。

3. 单击聚合查看图像大小的分布。您可以看到您添加的用于测量此自定义跟踪的图像大小的指标。

4. 单击上一步中聚合旁边的随时间推移。您还可以查看自定义跟踪的持续时间。单击查看更多以更详细地查看收集的数据。

5. 在打开的页面中，您可以通过单击imageType按图像 MIME 类型对持续时间数据进行分段。由于您添加到自定义跟踪的 imageType 属性，因此记录了此特定数据。

查看网络数据

HTTP/S 网络请求是一个报告，它捕获网络调用的响应时间和负载大小。

1. 返回性能监控仪表板的主屏幕。
2. 单击“网络”选项卡以查看您的 Web 应用程序的网络请求条目列表。
3. 浏览它们以识别缓慢的请求并开始修复以提高应用程序的性能！

12. 恭喜！

您已启用 Firebase SDK 进行性能监控，并收集了自动跟踪和自定义跟踪来衡量聊天应用的实际性能！

我们涵盖的内容：

• 将 Firebase 性能监控 SDK 添加到您的网络应用程序。
• 将自定义跟踪添加到您的代码中。
• 记录与自定义跟踪关联的自定义指标。
• 使用自定义属性细分性能数据。
• 了解如何使用性能监控仪表板来深入了解应用的性能。

了解更多：

• firebase.google.com
• firebase.google.com/docs/perf-mon/get-started-web
• web.dev/快速/