Google 致力于为黑人社区推动种族平等。查看具体举措
此页面由 Cloud Translation API 翻译。
Switch to English

Web的Firebase性能监控

在此代码实验室中,您将学习如何使用Firebase Performance Monitoring来衡量聊天Web应用程序的性能。访问https://fireperf-friendlychat.web.app/观看实时演示。

3b1284f5144b54f6.png

你会学到什么

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

你需要什么

  • 您选择的IDE或文本编辑器,例如WebStormAtomSublimeVS Code
  • 终端/控制台
  • 您选择的浏览器,例如Chrome
  • 该代码实验室的示例代码(有关如何获取代码,请参见本代码实验室的下一部分。)

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

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

或者,如果您尚未安装git,则可以将回购作为zip文件下载

导入入门应用

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

创建一个Firebase项目

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

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

  1. 单击创建项目

将Firebase Web应用添加到项目

  1. 点击网页图标58d6543a156e56f9.png创建一个新的Firebase Web应用程序。
  2. 使用昵称“ Friendly Chat注册该应用程序,然后选中“同时为此应用程序设置Firebase托管”旁边的框。
  3. 点击注册应用
  4. 单击其余步骤。您无需立即按照屏幕上的说明进行操作;这些将在本代码实验室的后续步骤中介绍。

ea9ab0db531a104c.png

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

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

您需要启用Google登录:

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

d89fb3873b5d36ae.png

启用Cloud Firestore

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

您需要启用Cloud Firestore:

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

此代码实验室的入门代码包括更安全的规则。稍后我们将在代码实验室中部署它们。

24bd1a097492eac6.png

启用云存储

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

您需要启用云存储:

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

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

Firebase命令行界面(CLI)允许您使用Firebase Hosting在本地提供Web应用程序,以及将Web应用程序部署到Firebase项目。

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

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

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

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

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

如果您有多个环境(生产,暂存等),则别名很有用。但是,对于此代码实验室,我们仅使用default的别名。

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

有多种方法可以与Firebase Performance Monitoring SDK for Web集成(有关详细信息,请参阅文档)。在此代码实验室中,我们将从Hosting URLs启用性能监视。

添加性能监控并初始化Firebase

  1. 打开public/index.html文件,然后在TODO下添加以下行以包括Firebase Performance Monitoring SDK。

index.html

<!-- TODO: Import the Firebase Performance Monitoring library here. -->
<script src="/__/firebase/7.14.2/firebase-performance.js"></script>
  1. 我们还需要使用配置对象初始化Firebase SDK,该配置对象包含有关Firebase项目和我们要使用的Web应用程序的信息。由于我们使用的是Firebase托管,因此您可以导入一个特殊的脚本来为您执行此配置。对于此代码实验室,我们已经在public/index.html文件的底部为您添加了以下行,但是请仔细检查它是否存在。

index.html

<script src="/__/firebase/init.js"></script>
  1. public/scripts/main.js文件中,在TODO下面添加以下行以初始化性能监视。

main.js

// TODO: Initialize Firebase Performance Monitoring.
firebase.performance();

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

添加第一个输入延迟polyfill库

第一次输入延迟非常有用,因为浏览器对用户交互的响应会给用户带来有关应用程序响应性的第一印象。

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

该polyfill库对于性能监视集成是可选的。

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

index.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 Performance Monitoring添加自定义跟踪的信息。如果只想收集自动跟踪,请转到“部署并开始发送图像”部分。

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

  1. public/scripts/main.js文件中,获取一个性能对象,然后创建一个自定义跟踪以上传图像消息。

main.js

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

main.js

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

 ...

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

您已经成功定义了定制跟踪!部署代码后,如果用户发送图像消息,则将记录自定义跟踪的持续时间。这将使您了解现实世界中的用户在您的聊天应用中发送图像需要多长时间。

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

  1. 找到上一步中的自定义跟踪(在public/scripts/main.js文件中定义)。
  2. TODO下方添加以下行,以记录上载图像的大小。

main.js

 ...

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

 ...

通过该指标,性能监视可以记录自定义跟踪持续时间以及上载的图像大小。

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

  1. 使用在public/scripts/main.js文件中定义的定制跟踪。
  2. TODO下面添加以下行,以记录上载图像的MIME类型。

main.js

 ...

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

 ...

使用此属性,性能监视可以基于上载的图像类型对自定义跟踪持续时间进行分类。

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

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

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

index.html

<!-- TODO: Mark the starting of `timer` for loading App Styling script. -->
<script type="text/javascript">performance && performance.mark('loadStylingStart');</script>
  1. 添加以下行以标记应用程序样式脚本加载的结束,并测量开始和结束之间的持续时间。

index.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 Performance Monitoring自动收集。稍后,您将能够在Firebase Performance控制台中找到一个名为loadStyling的自定义跟踪。

部署到Firebase托管

将Firebase Performance Monitoring添加到代码中之后,请按照以下步骤将代码部署到Firebase Hosting:

  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应用程序,该应用程序现在已经在您自己的两个Firebase子域中使用Firebase Hosting进行了完全托管: https://<projectId>.firebaseapp.comhttps://<projectId>.web.app

验证是否启用了性能监视

打开Firebase控制台,然后转到“性能”选项卡。如果您看到显示“检测到SDK”的欢迎消息,则说明您已成功与Firebase Performance Monitoring集成!

ac917a089e9c89d1.png

发送图片信息

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

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

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

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

访问您的仪表板

  1. Firebase控制台中,选择具有“ 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. 浏览它们以找出缓慢的请求,然后开始进行修复以提高应用程序的性能!

1ab598284eea6581.png

您已启用Firebase SDK进行性能监控,并收集了自动跟踪和自定义跟踪来衡量您的聊天应用程序的真实性能!

我们涵盖了:

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

了解更多: