我在使用 Angular 4 应用程序中的 Dexie 从我的 IndexedDB 查询选择项目（1.000 到 4.000 之间）时遇到问题。
表中最多只有 20.000 个项目，但选择这些项目需要几秒钟（Chrome 61 上为 5 秒，iOS 10 和 iOS 11 上最多（甚至更多）20 秒）
下面是我的服务，它获取两个不同的表并通过返回 ObservableloadItems()
@Injectable()
export class ItemService {
private buildings: Dexie.Table<Building, string>;
private people: Dexie.Table<Person, string>;
private activeZip: string;
constructor(
private db: IndexeddbService,
) {
this.buildings = this.db.table('buildings');
this.people = this.db.table('people');
}
loadItems(): Observable<{
buildings: Building[],
people: Person[]
}> {
return Observable.combineLatest(
this.loadBuildings(),
this.loadPeople(),
).map(([buildings, people]) => {
return {
buildings,
people
};
});
}
private loadBuildings(): Observable<Building[]> {
return Observable.from(this.buildings.where('zip').equals(this.activeZip).toArray());
}
private loadPeople(): Observable<Person[]> {
return Observable.from(this.people.where('zip').equals(this.activeZip).toArray());
}
}
生成的 Observable 使用 ngrx 效果进行异步处理，该效果分派一个将数据写入状态的 Action，因此组件可以呈现信息。
@Effect()
loadItems$: Observable<Action> = this.actions$
.ofType(actions.ActionTypes.LOAD_ITEMS)
.map(_ => this.itemService.setActiveZip(this.localStorageService.getActiveZip()))
.switchMap(_ => this.itemService.loadItems())
.map(items => new actions.LoadItemsSuccessAction(items))
.catch(error => Observable.of(new actions.LoadItemsFailAction(error)));
我尝试通过https://github.com/raphnesse/dexie-batch以块的形式“延迟加载”这些项目，但生成的批次需要 500 多毫秒才能到达。
我在哪里可能存在性能瓶颈？我已经尝试在 Angular 的区域之外运行此查询，但这并没有产生和性能改进。