网页版 Firebase 性能监控

1. 概述

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

3b1284f5144b54f6.png

你会学到什么

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

你需要什么

  • 您选择的IDE或文本编辑器,如WebStorm凌动崇高,或VS代码
  • 一个终端/控制台
  • 您选择的浏览器,例如 Chrome
  • Codelab 的示例代码(有关如何获取代码,请参阅此 Codelab 的下一部分。)

2.获取示例代码

克隆代码实验室的GitHub的库在命令行:

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

另外,如果你没有安装git的,你可以下载回购作为一个zip文件

导入入门应用

使用你的IDE,打开或导入📁 performance-monitoring-start从克隆库目录。这📁 performance-monitoring-start目录包含代码实验室,这是一个聊天web应用程序的启动代码。

3. 创建并设置 Firebase 项目

创建 Firebase 项目

  1. 火力地堡控制台,点击添加项目
  2. 命名您的火力地堡项目FriendlyChat

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

  1. 单击创建项目

将 Firebase 网络应用添加到项目

  1. 单击网络图标58d6543a156e56f9.png创建一个新的 Firebase 网络应用。
  2. 注册昵称应用Friendly Chat ,然后检查旁边还设置了火力地堡主机为这个应用程序的复选框。
  3. 点击注册应用
  4. 单击剩余的步骤。您现在不需要按照屏幕上的说明进行操作;这些将在本 Codelab 的后续步骤中介绍。

ea9ab0db531a104c.png

为 Firebase 身份验证启用 Google 登录

要允许用户登录到他们的谷歌账号的聊天应用程序,我们将使用谷歌登录方法。

你将需要启用谷歌登录:

  1. 在火力地堡控制台,定位在左侧面板的开发部分。
  2. 点击身份验证,然后点击登录方法选项卡(去安慰)。
  3. 启用谷歌登录提供者,然后单击保存

7f3040a646c2e502.png

启用 Cloud Firestore

Web应用程序使用云公司的FireStore保存聊天消息和接收新的聊天消息。

您需要启用 Cloud Firestore:

  1. 在火力地堡控制台的开发部分,单击数据库
  2. 单击云公司的FireStore窗格中创建数据库
  3. 在测试模式选项选择开始,然后单击阅读安全规则的免责条款后启用

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

24bd1a097492eac6.png

启用云存储

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

您需要启用云存储:

  1. 在火力地堡控制台的开发部分,单击存储
  2. 点击开始使用
  3. 阅读关于你的火力地堡项目安全规则的免责声明,然后单击得到它

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

4. 安装 Firebase 命令行界面

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

  1. 按照安装CLI这些指令在火力地堡文档。
  2. 通过在终端中运行以下命令来验证 CLI 是否已正确安装:
firebase --version

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

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

我们已经设置了网络应用模板,以从应用的本地目录(您之前在 codelab 中克隆的存储库)中提取应用的 Firebase 托管配置。但是要提取配置,我们需要将您的应用与您的 Firebase 项目相关联。

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

如果您有多个环境(生产、暂存等),则别名很有用。然而,对于本程式码实验室,就让我们用的别名default

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

5. 与 Firebase 性能监控集成

有与火力地堡性能监控的网络SDK整合各种方式(请参考文档了解详细信息)。在本程式码实验室中,我们将启用性能从托管的URL监控。

添加性能监控并初始化 Firebase

  1. 打开src/index.js文件,然后添加下面的下面一行TODO以包括火力地堡性能监视SDK。

索引.js

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

索引.html

<!-- This script is created by webpack -->
<script type="module" src="scripts/main.js"></script>
  1. 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 Performance Monitoring 的集成!

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

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

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

  1. src/index.js文件,得到一个性能对象,然后上传图像信息创建一个自定义跟踪。

索引.js

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

索引.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. [Extend] 使用 User Timing API 添加自定义跟踪

Firebase 性能监控 SDK 的设计使其可以异步加载,因此不会在页面加载期间对网络应用的性能产生负面影响。在加载 SDK 之前,Firebase Performance Monitoring API 不可用。在这种情况下,您仍然可以通过添加自定义跟踪用户计时API 。火力性能SDK将拿起从持续时间衡量() ,并记录他们定制的痕迹。

我们将使用 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 性能监控自动收集。你将能够找到调用自定义跟踪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. 访问您的Web应用程序,现在使用火力地堡托管在两个你自己的火力地堡子域的完全托管: https://<projectId>.firebaseapp.comhttps://<projectId>.web.app

验证是否启用了性能监控

打开火力地堡控制台并转到Performance选项卡。如果您看到一条显示“检测到 SDK”的欢迎消息,那么您已成功与 Firebase 性能监控集成!

30df67e5a07d03b0.png

发送图片信息

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

  1. 登录聊天应用后,点击图片上传按钮13734cb66773e5a3.png .
  2. 使用文件选择器选择图像文件。
  3. 尝试发送多张图片(少数样本存储在public/images/ ),这样就可以测试自定义指标和自定义属性的分布。

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

11.监控仪表板

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

访问您的仪表板

  1. 火力地堡控制台,选择具有您的项目Friendly Chat应用程序。
  2. 在左边的面板中,找到质量部分,然后单击性能

查看设备上的数据

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

  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 添加到您的网络应用。
  • 将自定义跟踪添加到您的代码中。
  • 记录与自定义跟踪相关的自定义指标。
  • 使用自定义属性细分性能数据。
  • 了解如何使用性能监控仪表板深入了解您的应用程序的性能。

了解更多: