Question

TLDR;向存储分派操作会导致http请求的内容加载出现重大的增量缺陷。请求本身，如果不涉及存储逻辑，或者不涉及将http请求的内容带入自身，则不会导致任何问题，无论事后是否对数据进行了任何操作（No reducer与指定类型匹配）。也使用ngrx / entity框架。我似乎无法找到一种方法来阻止性能上的这种不足，并且应用程序会因为它而在一段时间后崩溃。

用于测试事物并查看瓶颈发生位置的函数表明，获取get的操作是最昂贵的部分，以及随后图像上看到的瀑布。

  @Effect()
  getAllClusterInfo: Observable<Action> = this.actions$
  .ofType<actions.GetAllClusterInfoObjectsAction>(actions.GET_ALL_CLUSTER_INFO_OBJECTS)
  .do(_ => console.log(_))
  .switchMap(() => {
     const str = `Info: ${Math.round(Math.random() * 10000)}`;
     console.time('Full ' + str)
     console.time('Get ' + str)
     return this.service$.getAllClusterInfoObjects().do(_ => console.timeEnd('Get ' + str))
       .map(info => new actions.GetAllClusterInfoObjectsSuccessAction(info)).do(_ => console.timeEnd('Full ' + str))
       .catch(err => of(new actions.GetAllClusterInfoObjectsFailAction(err)));
   });

我已经在我的应用程序上设置了一个中央存储实例，在此之前它正在按预期工作，并且在大多数情况下仍然这样做。即将出现的问题是，在定时循环中从系统获取数据，并启动两个操作，基于Chrome-DevTools的瀑布视图，内容加载所需的时间量正在增加由于处理应用程序所需的时间，加载操作实际上可能会使应用程序崩溃，因此逐渐更高，更高。

我做了一些轻微的测试，以验证当前发生的情况，但似乎无法找到解决问题的方法。问题不在于从服务器本身加载内容，而是在＆lt; 300ms内完成存储/操作逻辑之外的两个调用。

我已经创建了一个虚拟动作，它不会向商店本身写任何东西，因为将这些内容写入商店的时间不到一毫秒，用console.time观察到，我知道它不是异步环境中最好的工具，但使用chrome性能监视器进行验证。此操作可以获取有效负载，并且当给出http请求结果的有效负载时，将执行以下操作。如果我从被触发的虚拟操作中删除有效负载，则行为保持大致相同进行纯HTML调用。通过使用服务类来发出http请求，然后调用虚拟操作，在给予有效负载之后再次尝试不以任何方式改变存储，导致相同的性能减慢，尽管不会因为我所认为的问题是正在调度的行为的同步性。这两个案例是第一个调用动作的情况，有效载荷，但没有减速器处理它的类型（基本上应该是忽略我假设。）第二种，用空载荷调度动作，这也不应该做任何事情。

Answer 1

原来，罪魁祸首就是使用了DevTools模块。通过更多地检查生成的测试和此票证获得答案，以获得更好的解释。 Angular2 NGRX Performance Issues On Dispatch?

ngrx存储有效负载的操作导致内容负载逐渐变差

1 个答案: