模态打开需要30秒

Question

我的应用程序中有一个模式，有时需要大约30秒才能打开。chrome分析器显示react组件完成呈现，然后在没有报告正在运行的javascript代码的情况下存在很长的空白，然后模式在屏幕上变得可见。在此空白期间，分析器只显示交互部分中发生的长动画。

怎样才能使模态更快地打开呢？在这个动画过程中，浏览器在做什么？

有关应用程序的信息

1. 使用redux +redux
2. 使用redux-saga作为副作用
3. 使用redux-form进行表单管理
4. 使用语义用户界面反应用户界面组件
5. 使用CSS的样式组件

关于模态的信息

1. 有一个自动完成输入字段，您可以在其中搜索项。在从搜索结果中选择一项时，发出一项操作，该操作触发一个事件。
2. 在saga中，进行API调用以获取有关该项的其他信息。
3. 在API调用完成后，将分派一个操作，它设置在模型中使用的redux表单的initialValues支柱。
4. 然后再发送另一个动作来打开模态。

其他观测

1. 从模态内的表单中移除字段/组件可以使其更快地打开(~5-6秒，而不是30秒)。但是，没有任何特定组件出现故障，因为删除任何一个组件与删除任何其他组件具有相同的效果。
2. 在Chrome中，打开最多需要30秒，而火狐则需要5-6秒。
3. 在发送操作之前，将操作分派到打开模型，这将设置redux表单的initialValues，这也使其打开速度快得多。

Answer 1

以下是关于减少加载时间的一些想法：

1. 尝试实现从后端加载数据的延迟加载。
2. 在Network选项卡中跟踪API调用所花费的时间，这样您将看到哪些请求花费的时间最长。此外，您还可以使用console.time()/timeEnd()从代码中跟踪时间。
3. 不同的浏览器使用不同的引擎(即Chrome V8表示Chrome)，并且可以有不同的加载数据优先级。