Thomas Steiner
Chrome팀은 IndexedDB (IDB) 구현에 여러 가지 성능 관련 개선사항을 적용했습니다. 이러한 개선사항 중 하나는 각 인스턴스의 백업 저장소를 별도의 시퀀스로 이동하는 것이었습니다 (대략 별도의 스레드로 생각할 수 있음). 즉, 이제 동일한 사이트 또는 교차 사이트에서 IDB를 동시에 사용할 때 속도가 빨라집니다. 이 게시물에서는 Chrome 126부터 사용할 수 있는 이 변경사항을 활용하기 위해 해야 할 작업을 자세히 설명합니다.
교차 사이트
IDB를 교차 사이트에서 사용하는 경우 별도의 조치를 취하지 않아도 됩니다. 이 브라우저 수준 이동이 발생하고 각 IDB 인스턴스의 백업 저장소가 별도의 시퀀스로 이동하면 아무것도 하지 않아도 성능이 향상됩니다.
Same-site
동일 사이트 사용에 이 성능 향상을 적용하려면 IDB 사용을 서로 다른 인스턴스(즉, 스토리지 버킷)로 분리해야 합니다. 다음 코드 샘플은 작동 방식을 보여줍니다.
const request = indexedDB.open('main', 1);
request.onsuccess = (event) => {
/* Do stuff with the main instance. */
};
// By default, just use the regular IDB instance.
let idb = indexedDB;
// Open a separate storage bucket if the API is supported.
if ('storageBuckets' in navigator) {
const bucket = await navigator.storageBuckets.open('logs-bucket');
// Get access to the storage bucket's IDB instance.
idb = bucket.indexedDB;
}
const bucketRequest = idb.open('logs', 1);
bucketRequest.onsuccess = (event) => {
/* Do stuff with the separate instance. */
};
브라우저 지원
이 게시물에 언급된 성능 향상은 브라우저에서 Storage Buckets API가 지원되는 경우(Chrome 122부터) 그리고 IDB 인스턴스가 샤딩된 경우(Chrome 126부터) 활용할 수 있는 점진적 개선사항입니다.
데모
Glitch에서 이 기능의 데모를 확인하세요. 소스 코드는 이전 코드 스니펫의 개념을 보여줍니다. 데모의 안내를 주의 깊게 따르세요. Chrome DevTools로 IDB 인스턴스를 검사하면 다음 스크린샷에서 빨간색 상자로 강조 표시된 버킷 이름 섹션에 사용된 스토리지 버킷이 표시됩니다.
