Performance Paint Timing 与 FCP 采集与持久化实践

概述FCP 表示首个内容绘制时间。本文采集 Paint 指标并写入本地以便分析。采集与持久化const supportsPO = typeof PerformanceObserver === 'function';

function openDB(name) { return new Promise((resolve, reject) => { const r = indexedDB.open(name, 1); r.onupgradeneeded = () => { const db = r.result; if (!db.objectStoreNames.contains('paint')) db.createObjectStore('paint', { autoIncrement: true }); }; r.onsuccess = () => resolve(r.result); r.onerror = () => reject(r.error); }); }

async function savePaint(rec) { const db = await openDB('perf-paint'); const tx = db.transaction('paint','readwrite'); tx.objectStore('paint').add(rec); await new Promise((res, rej) => { tx.oncomplete = res; tx.onerror = () => rej(tx.error); }); db.close(); }

function collectPaint() {

if (!supportsPO) return;

const po = new PerformanceObserver(list => {

for (const e of list.getEntries()) savePaint({ name: e.name, startTime: e.startTime, ts: performance.timeOrigin + e.startTime });

});

po.observe({ type: 'paint', buffered: true });

}