重复相同请求时IndexedDB速度变慢

ctrmrzij  于 2022-12-09  发布在  IndexedDB
关注(0)|答案(1)|浏览(480)

我使用TypeScriptObservablesAngularJS 2中实现IndexedDB。我发现打开IndexedDB数据库并提取500条记录所用的时间不到一秒钟。再次获取相同的数据大约需要110秒。我尝试了包括游标在内的各种选项来检索数据,结果都是一样的。这家商店也只有大约4000条记录。
我在下面包含了一些示例代码,以尝试演示我要做的事情。

export class OfflineService {
    constructor(private indexedDbService: IndexedDbService) {
    }

    test(): void {
        this.indexedDbService.openDb()
            .subscribe((open: boolean) => {
                if (!open) {
                    // IndexedDB not supported
                    return;
                }
                this.indexedDbService.getObjectsById("items", 1, 500)
                    .subscribe((results: any[]) => {
                        // results returned in < 1 second

                        // retrieve again
                        this.indexedDbService.getObjectsById("items", 1, 500)
                            .subscribe((results: any[]) => {
                                // results returned in around 110 seconds
                            });
                    });
            });
    }
}

export class IndexedDbService {
    private db: any;

    openDb(): Observable<boolean> {
        return Observable.create((observer: any) => {
            try {
                if (this.db) {
                    observer.next(true);
                    observer.complete();
                    return;
                }

                const request = indexedDB.open("testDb", 1);
                request.onupgradeneeded = (event: any) => {
                    event.currentTarget.result.createObjectStore("items", { keyPath: "Id", autoIncrement: false });
                };
                request.onsuccess = () => {
                    this.db = request.result;
                    observer.next(true);
                    observer.complete();
                };
                request.onerror = () => {
                    observer.next(false);
                    observer.complete();
                };
            } catch (err) {
                observer.next(false);
                observer.complete();
            }
        });
    }

    getObjectsById(storeName: string, lowerId: number, upperId: number): Observable<any> {
        return Observable.create((observer: any) => {
            try {
                const results: any[] = [];
                const store = this.getObjectStore(storeName, false);
                const request = store.openCursor(IDBKeyRange.bound(lowerId, upperId));
                request.onsuccess = () => {
                    var cursor = request.result;
                    if (cursor) {
                        results.push(cursor.value);
                        cursor.continue();
                    } else {
                        observer.next(results);
                        observer.complete();
                    }
                };
                request.onerror = (event) => {
                    observer.error(Error(event.target.errorCode));
                };
            } catch (err) {
                observer.error(err);
            }
        });
    }

    private getObjectStore(storeName: string, writable: boolean): any {
        const transaction = this.db.transaction(storeName, writable ? "readwrite" : "readonly");
        return transaction.objectStore(storeName);
    }
}
4jb9z9bj

4jb9z9bj1#

最后我发现这与IndexedDBObservables无关,只是在加载第一组结果后,对IndexedDB的第二次调用速度变慢了,这是因为使用了更多的内存。在进行第二次调用之前清除原始结果修复了性能问题。

相关问题