Javascript 重复同一请求时IndexedDB变慢

Javascript 重复同一请求时IndexedDB变慢,javascript,angular,typescript,indexeddb,angular2-observables,Javascript,Angular,Typescript,Indexeddb,Angular2 Observables,我正在AngularJS2中使用TypeScript和Observables实现IndexedDB。我发现打开IndexedDB数据库,然后获取500条记录不到一秒钟。但是,在数据库连接仍然打开的情况下,再次获取相同的数据大约需要110秒。我尝试了各种方法,包括使用游标来检索数据,结果都是一样的。这家商店里也只有大约4000张唱片 我在下面提供了一些示例代码,试图说明我要做的事情。正在执行OfflineService.test作为入口点 export class OfflineService {

我正在AngularJS2中使用TypeScript和Observables实现IndexedDB。我发现打开IndexedDB数据库,然后获取500条记录不到一秒钟。但是,在数据库连接仍然打开的情况下,再次获取相同的数据大约需要110秒。我尝试了各种方法,包括使用游标来检索数据,结果都是一样的。这家商店里也只有大约4000张唱片

我在下面提供了一些示例代码,试图说明我要做的事情。正在执行OfflineService.test作为入口点

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);
    }
}

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

这听起来不正常。但是,如果您的代码是问题的最小自包含示例,则您更有可能获得帮助。比如,试着去掉可观察到的东西,看看能不能解决它。如果没有,请包含设置数据库并实际运行示例的代码。@我包含了上面所有的代码,因为我不确定是Observable还是IndexedDB导致了问题。事实证明两者都不是。见下面我的答案。我同意你的观点,尽管可以运行的最少代码或更多代码总是最好的。