网页版 Firebase 性能监控

1. 概述

在此 Codelab 中，您将学习如何使用 Firebase 性能监控来衡量聊天 Web 应用的性能。访问https://fireperf-Friendlychat.web.app/查看现场演示。

你将学到什么

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

你需要什么

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

2. 获取示例代码

从命令行克隆 Codelab 的GitHub 存储库：

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

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

导入入门应用程序

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

3. 创建并设置 Firebase 项目

创建 Firebase 项目

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

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

3. 单击“创建项目” 。

将 Firebase Web 应用添加到项目中

1. 单击网络图标创建一个新的 Firebase Web 应用。
2. 使用昵称Friendly Chat注册应用程序，然后选中“同时为此应用程序设置 Firebase 托管”旁边的框。
3. 单击注册应用程序。
4. 单击完成剩余步骤。您现在不需要按照屏幕上的说明进行操作；这些将在本 Codelab 的后续步骤中介绍。

启用 Google 登录以进行 Firebase 身份验证

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

您需要启用Google登录：

1. 在 Firebase 控制台中，找到左侧面板中的“开发”部分。
2. 单击“身份验证” ，然后单击“登录方法”选项卡（转至控制台）。
3. 启用Google登录提供程序，然后单击“保存” 。

启用 Cloud Firestore

Web 应用程序使用Cloud Firestore保存聊天消息并接收新的聊天消息。

您需要启用 Cloud Firestore：

1. 在 Firebase 控制台的“开发”部分中，单击“数据库” 。
2. 单击 Cloud Firestore 窗格中的创建数据库。
3. 选择“以测试模式启动”选项，然后在阅读有关安全规则的免责声明后单击“启用” 。

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

启用云存储

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

您需要启用云存储：

1. 在 Firebase 控制台的“开发”部分中，单击“存储” 。
2. 单击开始。
3. 阅读有关您的 Firebase 项目安全规则的免责声明，然后单击知道了。

起始代码包含基本安全规则，我们稍后将在 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 应用模板，以便从应用的本地目录（您之前在 Codelab 中克隆的存储库）中提取应用的 Firebase 托管配置。但要提取配置，我们需要将您的应用程序与 Firebase 项目关联。

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

firebase use --add

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

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

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

5. 与 Firebase 性能监控集成

有多种方法可以与 Web 版 Firebase 性能监控 SDK 集成（有关详细信息，请参阅文档）。在此 Codelab 中，我们将通过托管 URL启用性能监控。

添加性能监控并初始化 Firebase

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

索引.js

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

2. 我们还需要使用一个配置对象来初始化 Firebase SDK，该对象包含有关 Firebase 项目和我们要使用的 Web 应用程序的信息。由于我们使用 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 性能监控 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. 访问您的 Web 应用程序，该应用程序现已使用 Firebase 托管完全托管在您自己的两个 Firebase 子域中： https://<projectId>.firebaseapp.com和https://<projectId>.web.app 。

验证性能监控是否已启用

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

发送图片消息

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

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

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

11.监控仪表板

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

访问您的仪表板

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

查看设备上的数据

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

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

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

2. 单击“持续时间”表中的“saveImageMes​​sage”以查看跟踪的特定指标。

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

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

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

查看网络数据

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

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

12. 恭喜！

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

我们涵盖的内容：

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

了解更多：

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