网页版 Firebase 性能监控

一、概述

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

3b1284f5144b54f6.png

你会学到什么

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

你需要什么

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

2.获取示例代码

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

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

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

导入入门应用

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

3. 创建并设置 Firebase 项目

创建一个 Firebase 项目

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

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

  1. 单击创建项目。

将 Firebase 网络应用添加到项目中

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

ea9ab0db531a104c.png

为 Firebase 身份验证启用 Google 登录

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

您需要启用Google登录：

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

7f3040a646c2e502.png

启用 Cloud Firestore

该网络应用使用Cloud Firestore来保存聊天消息并接收新的聊天消息。

您需要启用 Cloud Firestore：

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

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

24bd1a097492eac6.png

启用云存储

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

您需要启用云存储：

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

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

4.安装Firebase命令行界面

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

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

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

  1. 通过运行以下命令授权 Firebase CLI：
firebase login

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

  1. 确保您的命令行正在访问您的应用程序的本地performance-monitoring-start目录。
  2. 通过运行以下命令将您的应用与 Firebase 项目相关联：
firebase use --add
  1. 出现提示时，选择您的项目 ID，然后为您的 Firebase 项目指定一个别名。

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

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

5. 与 Firebase 性能监控集成

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

添加性能监控并初始化 Firebase

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

index.js

// TODO: Import the Firebase Performance Monitoring library here.
 import {
   getPerformance,
   trace
 } from 'firebase/performance';
  1. 我们还需要使用包含有关 Firebase 项目和我们要使用的 Web 应用程序的信息的配置对象来初始化 Firebase SDK。由于我们使用的是 Firebase 托管，因此您可以导入一个特殊的脚本来为您执行此配置。对于此 Codelab，我们已经在public/index.html文件的底部为您添加了以下行，但请仔细检查它是否存在。

索引.html

<!-- This script is created by webpack -->
<script type="module" src="scripts/main.js"></script>
  1. 在src/index.js文件中，在TODO下方添加以下行来初始化性能监控。

index.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文件中，获取性能对象，然后创建用于上传图像消息的自定义跟踪。

index.js

// TODO: Create custom trace to monitor image upload.
const t = trace(perf, "saveImageMessage");
  1. 要记录自定义跟踪，您需要指定跟踪的起点和终点。您可以将跟踪视为计时器。

index.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下面添加以下行来记录上传图片的大小。

index.js

 ...

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

 ...

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

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

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

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

index.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>
  1. 添加以下行以标记应用样式脚本加载的结束，并测量开始和结束之间的持续时间。

索引.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
  1. 控制台应显示以下内容：
=== 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
  1. 访问您现在使用 Firebase 托管在您自己的两个 Firebase 子域中完全托管的网络应用： https://<projectId>.firebaseapp.com和https://<projectId>.web.app 。

验证是否启用了性能监控

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

30df67e5a07d03b0.png

发送图片消息

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

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

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

11.监控仪表板

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

访问您的仪表板

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

查看设备上的数据

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

  1. 单击在设备上选项卡。
  • 页面加载表显示了性能监控在页面加载时自动收集的各种性能指标。
  • 持续时间表显示您在应用程序代码中定义的任何自定义跟踪。
  1. 单击“持续时间”表中的saveImageMes​​sage以查看跟踪的特定指标。

e28758fd02d9ffac.png

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

c3cbcfc0c739a0a8.png

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

16983baa31e05732.png

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

8e5c9f32f42a1ca1.png

查看网络数据

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

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

26a2be152a77ffb9.png

12. 恭喜！

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

我们涵盖的内容：

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

学到更多：