一看就会，超有用活字格技能：二百二十五、如何对接Firebase做应用性能统计和监控

收藏

本帖最后由 willning 于 2024-12-12 09:41 编辑

对于一些用户体验要求高的项目，如对外提供服务的客服工单系统，领导层希望能够记录和提升页面性能，来提升用户体验。这个时候我们需要接入应用性能监控（APM）服务。目前，适合Web应用、免费的APM主推Google的Firebase。虽然控制台需要和谐上网才能看，但数据的记录是完全没有问题的。

以下是具体的做法，其中1、2、6需要和谐上网。

1、创建项目
在https://console.firebase.google.com/?hl=zh-cn 上点击【+】创建项目
image.png163690489.png

提示：如果只做性能监控，不需要启用GA的话，那就不要勾选【为此项目启用GA】，点击【创建项目】

2、创建应用
在“首先将Firebase添加至您的应用”下方点击Web项目（左侧第三个</>图标）
140032metrftz96qr99wt1.png898456115.png

输入一个应用别名，点击【注册应用】。不勾选【Firebase Hosting】，因为这个的核心功能，咱们都用不上
image.png918607788.png

将页面中提示的SDK配置信息拷贝下来，形如：

const firebaseConfig = {
apiKey: "AIzaSyCjpFl39NCZf4RJe4Ug0wNzfIS********",
authDomain: "hac-demo.firebaseap*****",
projectId: "hac*****",
storageBucket: "hac-demo.firebasestorag*****",
messagingSenderId: "2547529*****",
appId: "1:254752917489:web:4cdbae1fd3e04e99c*****"
};

然后点击【继续前往控制台】即可打开控制台。如果没有记下，也可以在控制台左侧点击“项目概览”右侧的齿轮图标，点击【项目设置】就可以看到这些配置

3、准备初始化脚本
使用记事本或其他文本编辑器，创建一个JS文件，内容如下，firebaseConfig 中的值需要替换为上一步中记录下来的：

(async () => {
const { initializeApp } = await import('https://www.gstatic.com/firebasejs/11.0.2/firebase-app.js');
const { getAnalytics } = await import('https://www.gstatic.com/firebasejs/11.0.2/firebase-analytics.js');
const { getPerformance } = await import("https://www.gstatic.com/firebasejs/11.0.2/firebase-performance.js");
const firebaseConfig = {
apiKey: "AIzaSyCjpFl39NCZf4RJe4Ug0wNzfIS********",
authDomain: "hac-demo.firebaseap*****",
projectId: "hac*****",
storageBucket: "hac-demo.firebasestorag*****",
messagingSenderId: "2547529*****",
appId: "1:254752917489:web:4cdbae1fd3e04e99c*****"
};
// Initialize Firebase
const app = initializeApp(firebaseConfig);
const analytics = getAnalytics(app);
const perf = getPerformance(app);
window.performance.mark("pageStart");
})();

复制代码

4、接入活字格设计器
打开活字格设计器，点击【文件】→【设置】→【自定义JavaScript/CSS】，添加刚才创建的js文件。
image.png24381102.png

如果您只需要在特定的页面上做监控，需要在对应页面的【页面属性】中添加JavaScript文件。

5、发布应用
将应用发布到服务器，然后访问那些追加了监控的页面，确保让Firebase收集到应用监控数据。

6、管理监控指标
等待约1分钟后，刷新控制台，点击左侧“产品类别”→“运行”→“Performance”（如果没有出现下面的画面，说明3-5步有问题，请仔细检查）
142411iq6eu6epno7qyjks.png886008605.png

点击“选择一个指标”下方的【+】，添加需要检测的指标。常用的指标如下：

FCP：用户体验最关键的指标，指的是从页面跳转到加载出第一个元素（如加载蒙版）的时间，这段时间内，最终用户看到的是白屏
image.png511193541.png

domContentLoadedEventEnd：服务器配置最有优化潜力的指标，指的是从页面跳转到所有资源加载完成的时间，可以通过增加服务器带宽、换用更快的CDN等方式优化。
image.png572857055.png

扩展阅读

		自动登录	找回密码
密码			立即注册

[易学技巧] 一看就会，超有用活字格技能：二百二十五、如何对接Firebase做应用性能统计和监控

0 个回复

悬赏达人

微信认证勋章