Performance Long Tasks 采集与持久化实践

概述长任务会阻塞主线程导致卡顿。本文展示采集与持久化的最小流程。采集与持久化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('longtask')) db.createObjectStore('longtask', { autoIncrement: true }); }; r.onsuccess = () => resolve(r.result); r.onerror = () => reject(r.error); }); } async function saveLongTask(rec) { const db = await openDB('perf-long'); const tx = db.transaction('longtask','readwrite'); tx.objectStore('longtask').add(rec); await new Promise((res, rej) => { tx.oncomplete = res; tx.onerror = () => rej(tx.error); }); db.close(); } function startLongTaskCollect() { if (!supportsPO) return; const po = new PerformanceObserver(list => { for (const e of list.getEntries()) saveLongTask({ duration: e.duration, startTime: e.startTime, name: e.name || '', ts: performance.timeOrigin + e.startTime }); }); po.observe({ type: 'longtask', buffered: true }); }