模式需要30秒钟才能打开

Question

我的应用程序中有一个模式，有时需要30秒钟才能打开。 chrome devtools探查器显示react组件完成了渲染，然后还有很长的一段空白，那里没有报告正在运行的javascript代码，然后该模式在屏幕上可见。在此空白期间，探查器仅在“交互”部分显示一个较长的动画。

如何使模式打开更快？动画期间浏览器在做什么？

有关该应用的信息

1. 使用react + redux
2. 使用redux-saga进行副作用
3. 使用redux-form进行表单管理
4. 使用语义UI反应UI组件
5. 对CSS使用样式化的组件

有关模式的信息

1. 有一个自动完成输入字段，您可以在其中搜索项目。从搜索结果中选择一项后，便会发出触发传奇的动作。
2. 在传奇中，进行了API调用以获取有关商品的其他信息。
3. API调用完成后，将分派一个动作，该动作设置模态内部使用的redux形式的initialValues属性。
4. 然后调度另一个动作以打开模式。

其他观察结果

1. 从模态内部的表单中删除字段/组件使其打开速度更快（〜5-6秒，而〜30秒）。但是，似乎没有特定的组件有问题，因为删除任何一个组件都具有与删除任何其他组件相同的效果。
2. 在Chrome中，最多可能需要30秒才能打开，但在Firefox中，最多可能需要5-6秒才能打开。
3. 在分派设置redux表单的initialValues的操作之前分派操作以打开模式，这也使其打开得更快。

Answer 1

这里有一些关于减少加载时间的想法：

1. 尝试从后端实现延迟加载到加载部分 数据的。
2. 跟踪在网络中进行API调用所花费的时间 标签，因此您将看到哪些请求花费的时间最长。 您还可以使用console.time（）/ timeEnd（）从代码内部跟踪时间。
3. 不同的浏览器使用不同的引擎（例如Chrome V8 for Chrome），并且可以具有不同的加载数据优先级。