Performance Resource Timing 采集与持久化实践

概述Resource Timing 提供资源加载细节如 TTFB 与传输大小。本文给出采集并写入 IndexedDB 的实现。采集与写入const supportsRT = !!(performance && performance.getEntriesByType);

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

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

function collectRT() {

if (!supportsRT) return;

const entries = performance.getEntriesByType('resource');

for (const e of entries) {

saveRT({ name: e.name, type: e.initiatorType, ttfb: e.responseStart - e.requestStart, duration: e.duration, transferSize: e.transferSize, ts: e.startTime });

}

}