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. */
};
브라우저 지원
이 게시물에 언급된 성능 향상은 브라우저에서 스토리지 버킷 API가 지원되고(Chrome 122부터) IDB 인스턴스가 샤딩되는 경우(Chrome 126부터) 사용할 수 있는 점진적 개선사항입니다.
DevTools
Chrome DevTools로 IDB 인스턴스를 검사하면 다음 스크린샷에서 빨간색 상자로 강조 표시된 버킷 이름 섹션에 사용된 스토리지 버킷이 표시됩니다.
관련 링크
감사의 말씀
이 게시물은 Evan Stade와 Rachel Andrew가 검토했습니다.