1. 概览
在此 Codelab 中，您将学习如何使用 Firebase Performance Monitoring 衡量一款聊天 Web 应用的性能。如需观看实时演示，请访问 https://fireperf-friendchat.web.app/。
学习内容
- 如何将 Firebase Performance Monitoring 添加到您的 Web 应用，以获取开箱即用的指标（网页加载和网络请求）。
- 如何使用自定义跟踪记录衡量特定代码段。
- 如何记录与自定义跟踪记录关联的其他自定义指标。
- 如何使用自定义属性进一步细分效果数据。
- 如何使用性能监控信息中心来了解 Web 应用的性能。
所需条件
2. 获取示例代码
从命令行克隆此 Codelab 的 GitHub 代码库：
git clone https://github.com/firebase/codelab-friendlychat-web
或者，如果您尚未安装 git，可以以 zip 文件的形式下载代码库。
导入 starter 应用
使用 IDE，打开或导入克隆的代码库中的 📁? performance-monitoring-start 目录。此 📁? performance-monitoring-start 目录包含此 Codelab 的起始代码，它是一款聊天 Web 应用。
3. 创建和设置 Firebase 项目
创建 Firebase 项目
- 在 Firebase 控制台中，点击添加项目。
- 将您的 Firebase 项目命名为
FriendlyChat。
记住 Firebase 项目的 ID。
- 点击创建项目。
将 Firebase Web 应用添加到项目中
- 点击 Web 图标
以创建新的 Firebase Web 应用。 - 使用别名
Friendly Chat注册该应用，然后选中同时为此应用设置 Firebase Hosting 旁边的复选框。 - 点击注册应用。
- 点击完成其余步骤。您现在无需按照屏幕上的说明操作；这些内容将在此 Codelab 的后续步骤中进行介绍。
为 Firebase 身份验证启用 Google 登录
为了允许用户使用其 Google 账号登录聊天应用，我们将使用 Google 登录方法。
您需要启用 Google 登录：
- 在 Firebase 控制台中，找到左侧面板中的开发部分。
- 点击身份验证，然后点击登录方法标签页（转到控制台）。
- 启用 Google 登录提供方，然后点击保存。
启用 Cloud Firestore
Web 应用使用 Cloud Firestore 保存聊天消息并接收新的聊天消息。
您需要启用 Cloud Firestore：
- 在 Firebase 控制台的开发部分中，点击数据库。
- 点击 Cloud Firestore 窗格中的创建数据库。
- 选择以测试模式开始选项，然后在阅读有关安全规则的免责声明后点击启用。
此 Codelab 的起始代码包含更安全的规则。我们稍后会在此 Codelab 中部署它们。
启用 Cloud Storage
Web 应用使用 Cloud Storage for Firebase 来存储、上传和分享照片。
您需要启用 Cloud Storage：
- 在 Firebase 控制台的开发部分中，点击存储。
- 点击开始使用。
- 阅读关于为 Firebase 项目创建安全规则的免责声明，然后点击知道了。
起始代码包括一条基本安全规则，我们稍后将在此 Codelab 中部署此规则。
4.安装 Firebase 命令行界面
借助 Firebase 命令行界面 (CLI)，您可以使用 Firebase Hosting 在本地提供 Web 应用，以及将 Web 应用部署到 Firebase 项目。
- 按照 Firebase 文档中的这些说明安装 CLI。
- 在终端中运行以下命令，验证 CLI 是否已正确安装：
firebase --version
确保您的 Firebase CLI 版本为 v8.0.0 或更高版本。
- 通过运行以下命令向 Firebase CLI 授权：
firebase login
我们已设置 Web 应用模板，以从应用的本地目录（您在本 Codelab 前面克隆的代码库）中提取 Firebase Hosting 的应用配置。但要提取配置，我们需要将您的应用与 Firebase 项目相关联。
- 确保您的命令行正在访问应用的本地
performance-monitoring-start目录。 - 通过运行以下命令，将您的应用与 Firebase 项目相关联：
firebase use --add
- 出现提示时，选择您的项目 ID，然后为您的 Firebase 项目指定一个别名。
如果您有多个环境（生产、预演等），别名会非常有用。不过，在此 Codelab 中，我们直接使用 default 这个别名。
- 请按照命令行中的其余说明进行操作。
5. 与 Firebase Performance Monitoring 集成
您可以通过多种方式与网页版 Firebase Performance Monitoring SDK 集成（如需了解详情，请参阅相关文档）。在此 Codelab 中，我们将通过 Hosting 网址启用性能监控。
添加性能监控并初始化 Firebase
- 打开
src/index.js文件，然后在TODO下方添加下面这行代码，以添加 Firebase Performance Monitoring SDK。
index.js
// TODO: Import the Firebase Performance Monitoring library here.
import {
getPerformance,
trace
} from 'firebase/performance';
- 我们还需要使用一个配置对象来初始化 Firebase SDK，该对象包含我们要使用的 Firebase 项目和 Web 应用的相关信息。由于我们使用的是 Firebase Hosting，因此您可以导入一个特殊的脚本来为您完成此配置。对于此 Codelab，我们已在
public/index.html文件的底部为您添加了以下代码行，但请仔细检查该行是否存在。
index.html
<!-- This script is created by webpack -->
<script type="module" src="scripts/main.js"></script>
- 在
src/index.js文件中的TODO下方，添加以下代码行以初始化性能监控。
index.js
// TODO: Initialize Firebase Performance Monitoring.
getPerformance();
现在，当用户使用您的网站时，Performance Monitoring 会自动为您收集网页加载和网络请求指标！如需详细了解自动页面加载跟踪记录，请参阅相关文档。
添加 First Input Delay polyfill 库
First Input Delay 很有用，因为在响应用户互动时，浏览器会呈现出用户对应用的响应速度的第一印象。
首次输入延迟在用户首次与页面上的元素互动（例如点击按钮或超链接）时开始。当浏览器能够响应输入（意味着浏览器不会忙于加载或解析您的内容）时，它会立即停止。
对于性能监控集成，此 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 添加自定义跟踪记录。如果您只想收集自动跟踪记录，请转到“部署并开始发送映像”部分。
6. 向应用添加自定义跟踪记录
借助 Performance Monitoring，您可以创建自定义跟踪记录。自定义跟踪记录是有关应用中某个执行块持续时间的报告。您可以使用 SDK 提供的 API 指定自定义跟踪记录的开始和结束。
- 在
src/index.js文件中，获取性能对象，然后创建用于上传图片消息的自定义跟踪记录。
index.js
// TODO: Create custom trace to monitor image upload.
const t = trace(perf, "saveImageMessage");
- 如需记录自定义跟踪记录，您需要指定跟踪记录的起点和停止点。您可以将跟踪记录视为计时器。
index.js
// TODO: Start the "timer" for the custom trace.
t.start();
...
// TODO: Stop the "timer" for the custom trace.
t.stop();
您已成功定义自定义跟踪记录！部署代码后，如果用户发送图片消息，系统会记录自定义跟踪记录的时长。这样您就可以了解真实用户在您的聊天应用中发送图片需要多长时间。
7. 向您的应用添加自定义指标。
您可以进一步配置自定义跟踪记录，以记录其范围内发生的性能相关事件的自定义指标。例如，对于我们在上一步中定义的自定义跟踪记录，您可以使用指标来调查上传时间是否受图片大小影响。
- 找到上一步中的自定义跟踪记录（在
src/index.js文件中定义）。 - 在
TODO下方添加以下代码行，以记录所上传图片的大小。
index.js
...
// TODO: Record image size.
t.putMetric('imageSize', file.size);
...
借助此指标，性能监控可以记录自定义跟踪记录时长以及上传的图片大小。
8. 向应用添加自定义属性
在前面的步骤的基础上，您还可以收集自定义跟踪记录中的自定义属性。自定义属性有助于按特定于您的应用的类别来细分数据。例如，您可以收集图片文件的 MIME 类型，以调查 MIME 类型可能会对性能产生的影响。
- 使用
src/index.js文件中定义的自定义跟踪记录。 - 在
TODO下方添加以下代码行，以记录所上传图片的 MIME 类型。
index.js
...
// TODO: Record image MIME type.
t.putAttribute('imageType', file.type);
...
通过此属性，性能监控可以根据上传的图片类型对自定义跟踪记录时长进行分类。
9. [扩展] 使用 User Timing API 添加自定义跟踪记录
Firebase Performance Monitoring SDK 经过精心设计，可以异步加载，因此不会对页面加载期间的 Web 应用性能产生负面影响。在加载 SDK 之前，Firebase Performance Monitoring API 不可用。在这种情况下，您仍然可以使用 User Timing API 添加自定义跟踪记录。Firebase 性能 SDK 将从 measure() 提取时长，并将其记录为自定义跟踪记录。
我们将使用 User Timing API 测量加载应用样式脚本的时长。
- 在
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>
- 添加以下代码行，以标记应用样式设置脚本的加载结束，并测量开始和结束之间的时长。
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 性能控制台中找到名为 loadStyling 的自定义跟踪记录。
10. 部署并开始发送映像
部署到 Firebase Hosting
将 Firebase Performance Monitoring 添加到您的代码后，请按照以下步骤将代码部署到 Firebase Hosting：
- 确保您的命令行正在访问应用的本地
performance-monitoring-start目录。 - 运行以下命令，将您的文件部署到 Firebase 项目：
firebase deploy
- 控制台应显示以下内容：
=== 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
- 访问您的 Web 应用，该应用现已使用 Firebase Hosting 完全托管在您自己的两个 Firebase 子网域中：
https://<projectId>.firebaseapp.com和https://<projectId>.web.app。
验证是否已启用性能监控
打开 Firebase 控制台并前往 Performance（性能）标签页。如果看到一条显示“检测到 SDK”的欢迎消息，则表示您已成功与 Firebase Performance Monitoring 集成！
发送图片消息
通过在聊天应用中发送图片来生成一些性能数据。
- 登录聊天应用后，点击图片上传按钮
。 - 使用文件选择器选择一个图片文件。
- 请尝试发送多张图片（一些示例存储在
public/images/中），以便测试自定义指标和自定义属性的分布情况。
新消息应与您选择的图片一起显示在应用的界面中。
11. 监控信息中心
以用户身份部署 Web 应用并发送图片消息后，您可以在 Firebase 控制台的性能监控信息中心查看性能数据。
访问您的信息中心
- 在 Firebase 控制台中，选择包含您的
Friendly Chat应用的项目。 - 在左侧面板中，找到 Quality（质量）部分，然后点击 Performance（效果）。
查看设备上的数据
性能监控处理完应用数据后，您会在信息中心顶部看到标签页。如果您没有看到任何数据或标签页，请务必稍后再回来查看。
- 点击“基于设备”标签页。
- “网页加载”表格会显示在加载网页时性能监控自动收集的各种性能指标。
- Durations 表显示了您在应用代码中定义的任何自定义跟踪记录。
- 点击时长表中的 saveImageMessage 可查看跟踪记录的特定指标。
- 点击汇总可查看图片大小的分布情况。您可以查看为衡量此自定义跟踪记录的图片大小而添加的指标。
- 在上一步中，点击“汇总”旁边的随时间变化情况。您还可以查看自定义跟踪记录的“时长”。点击查看更多可更详细地查看收集的数据。
- 在打开的页面中，您可以点击 imageType，按图片 MIME 类型细分时长数据。系统记录了此特定数据，原因是您添加到自定义跟踪记录中的 imageType 属性。
查看网络数据
“HTTP/HTTPS 网络请求”报告用于捕获网络调用的响应时间和载荷大小。
- 返回性能监控信息中心的主屏幕。
- 点击网络标签页，查看您的 Web 应用的网络请求条目列表。
- 请浏览这些问题，找出缓慢的请求，然后开始设法解决问题，提升应用的性能！
12. 恭喜！
您已启用 Firebase SDK 进行性能监控，并收集了自动跟踪记录和自定义跟踪记录来衡量聊天应用的实际性能！
所学内容：
- 将 Firebase Performance Monitoring SDK 添加到您的 Web 应用。
- 向代码添加自定义跟踪记录。
- 记录与自定义跟踪记录关联的自定义指标。
- 使用自定义属性细分效果数据。
- 了解如何使用性能监控信息中心深入了解应用的性能。