准备工作
请参阅将 Firebase 添加到您的 JavaScript 项目(如果您尚未参阅),以了解如何执行以下操作:
创建 Firebase 项目
在 FireBase 中注册您的 Web 应用
请注意,将 Firebase 添加至您的应用时,您还可以完成本页面上所述的一些步骤(例如,添加 Firebase SDK 并初始化 Firebase)。
第 1 步:添加 Performance Monitoring 并初始化 Firebase
请使用以下选项之一在您的应用中添加 Performance Monitoring SDK 并初始化 Firebase(如果您尚未执行这些操作)。请考虑以下方面,以便选择合适的选项(如需了解详细信息,请参阅相应标签页):
从 CDN 添加(独立 SDK)- 如果 Performance Monitoring 是您应用中唯一的 Firebase 产品,则此选项会从 CDN 加载一个单独的轻量级 SDK。
从 CDN 添加(标准 SDK)- 如果您在自己的应用中使用其他 Firebase 产品,则此选项会从 CDN 加载 Performance Monitoring SDK 以及其他 Firebase 库。
从 Hosting 网址添加 - 如果您使用 Firebase Hosting,则此选项为您在初始化 Firebase 时管理 Firebase 配置提供了便利。
使用模块捆绑器添加 - 如果您使用捆绑器(例如 Browserify 或 webpack),则可以使用此选项在需要时导入各个模块。
添加 Performance Monitoring SDK 后,Firebase 会自动开始为您的应用的网页加载和 HTTP/HTTPS 网络请求收集数据。
从 CDN 添加
您可以将 Firebase JavaScript SDK 配置为部分导入,只加载您需要的 Firebase 库。Firebase 将各 Firebase JavaScript SDK 库存储在我们的全球 CDN(内容分发网络)上。
如需从 CDN 添加 Performance Monitoring SDK,您有两种选择:
- 独立 SDK - Performance Monitoring 是您在自己的应用中使用的唯一 Firebase 产品。
- 标准 SDK - 您在自己的应用中将 Performance Monitoring 与其他 Firebase 产品搭配使用。
独立 SDK
如果 Performance Monitoring 是您的应用中唯一的 Firebase 产品,并且您希望实现以下目的,请使用独立 Performance Monitoring SDK(以及下文推荐的文件头脚本):
- 缩小您的 SDK 软件包的大小
- 将该 SDK 的初始化操作延迟到网页加载之后
如需将独立的 Performance Monitoring SDK 添加到应用,并将其初始化操作延迟到网页加载之后,请执行以下操作:
- 将以下脚本添加到您的索引文件的文件头中。
- 确保添加应用的 Firebase 项目配置对象。
(function(sa,fbc){function load(f,c){var a=document.createElement('script'); a.async=1;a.src=f;var s=document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(a,s);}load(sa); window.addEventListener('load',function(){firebase.initializeApp(fbc).performance()}); })(performance_standalone, firebaseConfig);
其中
- performance_standalone 是
'https://www.gstatic.com/firebasejs/8.2.7/firebase-performance-standalone.js'
- firebaseConfig 是应用的 Firebase 配置对象
上面的脚本会异步加载独立 SDK,然后在窗口的 onload
事件触发后初始化 Firebase。此策略可以减少该 SDK 可能对网页加载指标造成的影响,因为浏览器在您初始化该 SDK 时已经报告了其加载指标。
标准 SDK
如果您在自己的应用中使用其他 Firebase 产品(例如 Authentication 或 Cloud Firestore),请添加标准 Performance Monitoring SDK。
请注意,此 SDK 要求您添加单独的标准 Firebase 核心 SDK,并在单独的脚本中初始化 Firebase 和 Performance Monitoring。
如需添加标准 Performance Monitoring SDK,请在使用任何 Firebase 服务之前,将以下脚本添加到
<body>
标记的底部:<body> <!-- Insert these scripts at the bottom of the HTML, but before you use any Firebase services --> <!-- Firebase App (the core Firebase SDK) is always required and must be listed first --> <script src="https://www.gstatic.com/firebasejs/8.2.7/firebase-app.js"></script> <!-- Add the standard Performance Monitoring library --> <script src="https://www.gstatic.com/firebasejs/8.2.7/firebase-performance.js"></script> <body>
在您的应用中初始化 Firebase 和 Performance Monitoring:
<body> <!-- Previously loaded Firebase SDKs --> <script> // TODO: Replace the following with your app's Firebase project configuration var firebaseConfig = { // ... }; // Initialize Firebase firebase.initializeApp(firebaseConfig); // Initialize Performance Monitoring and get a reference to the service var perf = firebase.performance(); </script> </body>
从托管网址添加
使用 Firebase Hosting 时,您可以将应用配置为从预留的网址动态加载 Firebase JavaScript SDK 库。请详细了解如何通过预留的 Hosting 网址添加 SDK。
通过此设置选项,在您将应用部署到 Firebase 后,应用会从您部署到的 Firebase 项目中自动拉取 Firebase 配置对象。您可以将同一代码库部署到多个 Firebase 项目,但不必跟踪用于 firebase.initializeApp()
的 Firebase 配置。
如需添加 Performance Monitoring SDK,请在使用任何 Firebase 服务之前,将以下脚本添加到
<body>
标记的底部:<body> <!-- Insert these scripts at the bottom of the HTML, but before you use any Firebase services --> <!-- Firebase App (the core Firebase SDK) is always required and must be listed first --> <script src="/__/firebase/8.2.7/firebase-app.js"></script> <!-- Add the Performance Monitoring library --> <script src="/__/firebase/8.2.7/firebase-performance.js"></script> </body>
在您的应用中初始化 Firebase 和 Performance Monitoring(使用预留的 Hosting 网址时无需添加 Firebase 配置对象):
<body> <!-- Previously loaded Firebase SDKs --> <!-- Initialize Firebase --> <script src="/__/firebase/init.js"></script> <!-- Initialize Performance Monitoring and get a reference to the service --> <script> var perf = firebase.performance(); // ... </script> </body>
使用模块捆绑器添加
您可将 Firebase JavaScript SDK 配置为部分导入,仅加载您需要的 Firebase 产品。如果您使用的是捆绑器(如 Browserify 或 webpack),则可以在需要时 import
各个 Firebase 产品。
运行以下命令,安装
firebase
软件包并将其保存到package.json
文件:npm install --save firebase
如需添加 Performance Monitoring SDK,请
import
Firebase 模块:// Firebase App (the core Firebase SDK) is always required and must be listed first import firebase from "firebase/app"; // If you are using v7 or any earlier version of the JS SDK, you should import firebase using namespace import // import * as firebase from "firebase/app" // Add the Performance Monitoring library import "firebase/performance";
在您的应用中初始化 Firebase 和 Performance Monitoring:
// TODO: Replace the following with your app's Firebase project configuration const firebaseConfig = { // ... }; // Initialize Firebase firebase.initializeApp(firebaseConfig); // Initialize Performance Monitoring and get a reference to the service const perf = firebase.performance();
第 2 步:添加 First Input Delay polyfill 库
如需测量 First Input Delay 指标,您需要添加 polyfill 库。如需了解安装说明,请参阅该库的文档。
Performance Monitoring 无需添加 polyfill 库即可报告其他 Web 应用指标。
第 3 步:生成性能事件以显示初始数据
Firebase 可以通过接收来自您的应用的事件信息(如应用交互)来检测该 SDK 是否已成功添加到您的应用。如果您仍在本地进行开发,请与您的应用交互,以生成 SDK 检测事件以及初始数据收集和处理事件。
在本地环境中提供和查看您的 Web 应用。
生成事件的方法包括:为您的网站加载子页面、与您的应用进行交互,以及触发网络请求。网页加载后,请确保让浏览器标签页保持打开状态至少 10 秒。
转到 Firebase 控制台的“性能”信息中心,查看 Firebase 是否已检测到 SDK。
如果您没有看到“检测到了 SDK”的消息,请查看问题排查提示。
Performance Monitoring 会先处理性能事件数据,然后再将其显示在“性能”信息中心中。 您应该会在看到 SDK 检测消息后的 24 小时内看到您的初始数据。
如果您没有看到初始数据,请查看问题排查提示。
第 4 步:(可选)查看性能事件的日志消息
打开浏览器的开发者工具(例如,Chrome DevTools 的“网络”标签页或 Firefox 的网络监视器)。
在浏览器中刷新您的 Web 应用。
检查您的日志消息中有无任何错误消息。
几秒钟后,在浏览器的开发者工具中查找对
firebaselogging.googleapis.com
的网络调用。如果存在该网络调用,表示浏览器正在向 Firebase 发送性能数据。
如果您的应用未记录性能事件,请查看问题排查提示。
第 5 步:(可选)为特定代码添加自定义监控功能
如需监控与应用中特定代码相关联的性能数据,您可以对自定义代码跟踪记录进行插桩。
借助自定义代码跟踪记录,您可以衡量应用完成一项特定任务或一组任务(例如加载一组图像或查询数据库)所需的时间。自定义代码跟踪记录的默认指标是其时长,但您也可以添加自定义指标,例如缓存命中数和内存警告。
在代码中,您可以使用 Performance Monitoring SDK 提供的 API 指定自定义代码跟踪记录的开始和结束(以及添加任何所需的自定义指标)。
请访问为特定代码添加监控功能,详细了解这些功能以及如何将其添加到您的应用中。
第 6 步:部署应用,然后查看结果
验证 Performance Monitoring 之后,您就可以将更新版应用部署给用户了。
您可以在 Firebase 控制台的“性能”信息中心中监控性能数据。
后续步骤
参阅将 Firebase Performance Monitoring 用于 Web Codelab,获得实际上手经验。
详细了解 Performance Monitoring 自动收集的数据:
- 应用中的网页加载数据
- 应用发出的 HTTP/HTTPS 网络请求的数据
在 Firebase 控制台中查看、跟踪和过滤性能数据
通过对自定义代码跟踪记录进行插桩,为特定任务或工作流添加监控功能