OPFS 同步访问句柄与 Worker 高性能读写实践

概述OPFS 的同步访问句柄提升 Worker 场景下的读写性能。本文给出能力检测与读写示例，并在不支持时退化到异步接口。Worker 内能力检测与读写async function writeWithSyncHandle(path, bytes) { const root = await navigator.storage.getDirectory(); const segments = path.split('/').filter(Boolean); let dir = root; for (let i = 0; i < segments.length - 1; i++) { dir = await dir.getDirectoryHandle(segments[i], { create: true }); } const name = segments[segments.length - 1]; const fh = await dir.getFileHandle(name, { create: true }); if (typeof fh.createSyncAccessHandle !== 'function') { const w = await fh.createWritable(); await w.write(bytes); await w.close(); return; } const h = await fh.createSyncAccessHandle(); h.write(bytes, { at: 0 }); h.flush(); h.close(); } async function readWithSyncHandle(path) { const root = await navigator.storage.getDirectory(); const segments = path.split('/').filter(Boolean); let dir = root; for (let i = 0; i < segments.length - 1; i++) { dir = await dir.getDirectoryHandle(segments[i]); } const name = segments[segments.length - 1]; const fh = await dir.getFileHandle(name); if (typeof fh.createSyncAccessHandle !== 'function') { const file = await fh.getFile(); const buf = await file.arrayBuffer(); return new Uint8Array(buf); } const h = await fh.createSyncAccessHandle(); const size = h.getSize(); const buf = new Uint8Array(size); h.read(buf, { at: 0 }); h.close(); return buf; } 主线程与 Worker 集成function startOPFSWorker() { const worker = new Worker('opfs-worker.js'); const data = new Uint8Array([1,2,3,4]); worker.postMessage({ type: 'write', path: 'data/a.bin', payload: data }, [data.buffer]); }