Firebase存储多URL Lighthouse数据的最佳数据结构设计方案

你当前直接在根路径调用set()写入单条记录的写法存在两个明显问题：

• 所有检测记录平铺在根节点，没有按URL维度做拆分，查询单个URL的历史记录需要遍历全量数据，数据量上来之后查询效率会极低
• set()方法会直接覆盖路径下的所有原有数据，根本无法存储同一个URL的多条历史记录

推荐存储结构 #

核心思路是以URL为一级维度拆分存储节点，利用Firebase push ID自带时间排序的特性，天然支持按时间范围取数，结构如下：

/pagespeed-records  // 所有Lighthouse检测记录的根节点
  /{encoded_url_key}  // 转义后的合法URL字符串作为节点key
    /{firebase_push_id}  // Firebase自动生成的push ID，自带时间序属性
      url: 原始URL明文
      jsondata: PageSpeed接口返回的完整JSON响应
      created_at: ISO格式的检测时间戳
      // 可选：提前抽离常用核心字段（比如性能得分、LCP、FID等指标），减少前端拉取全量JSON的流量消耗
      performance_score: 数值类型的性能得分

注意不要直接把原始URL作为节点key，URL中包含的/、:、?、#、[]等字符属于Firebase路径非法字符，直接使用会抛错，提前做转义处理即可，比如简单的转义函数：

// 将原始URL转成Firebase支持的合法路径key
function encodeUrlToKey(url) {
  return btoa(encodeURIComponent(url)).replace(/[.=\/#$\[\]]/g, '_');
}

写入与查询逻辑改造 #

1. 写入逻辑替换 #

不再使用根路径set，而是将新记录push到对应URL的节点下：

const urlKey = encodeUrlToKey(message);
const recordRef = firebase.database().ref(`/pagespeed-records/${urlKey}`).push();

// 写入新的检测记录
await recordRef.set({
  url: message,
  jsondata: data,
  created_at: new Date().toISOString(),
  performance_score: data.categories.performance.score * 100 // 可选抽离字段
});

// 写入完成后自动清理旧记录，只保留最近3条
const allRecordsSnapshot = await firebase.database()
  .ref(`/pagespeed-records/${urlKey}`)
  .orderByKey()
  .once('value');
const recordKeys = [];
allRecordsSnapshot.forEach(child => recordKeys.push(child.key));
// 超过3条就删除更早的记录，避免冗余存储
if (recordKeys.length > 3) {
  const needDeleteKeys = recordKeys.slice(0, recordKeys.length - 3);
  await Promise.all(
    needDeleteKeys.map(key => 
      firebase.database().ref(`/pagespeed-records/${urlKey}/${key}`).remove()
    )
  );
}

2. 前端查询最近3条记录 #

直接定位到对应URL的节点，利用Firebase自带的分页查询方法拉取即可，不需要扫描全量数据：

async function getLatest3Records(originalUrl) {
  const urlKey = encodeUrlToKey(originalUrl);
  const snapshot = await firebase.database()
    .ref(`/pagespeed-records/${urlKey}`)
    .orderByKey() // push ID字典序和生成时间正相关，直接按键排序即可
    .limitToLast(3) // 只取最后3条，也就是最新的3条
    .once('value');
  // 转成数组后倒序，让最新的记录排在最前面
  return Object.values(snapshot.val() || {}).reverse();
}

如果你觉得URL转义比较麻烦，也可以单独维护一份URL和自增数字ID的映射表，用数字ID作为检测记录的一级key，查询逻辑完全一致。

内容的提问来源于stack exchange，提问作者Trey Copeland