我正在寻找有关如何跟踪应用程序性能的一些建议;该应用程序是使用ReactJS开发的，我正在用webpack构建它。
首先，我将介绍我所做的以及应用程序应该做的事情：
- 我需要渲染很多，让我们只是称它们为小部件，它们可以实时更新大量数据。因此，在规模上，我会说每个小部件呈现大约50到80个值，这些更新可能会同时从服务器端接收，因此它们应该在收到数据时立即发生。考虑一下我可能有大约25到30个需要实时更新的小部件。
让我告诉你一些关于实施的内容：
- 我使用了ReactJS组件的智能/哑模式
- 实际数据存储在应用程序状态，并由智能组件通过props
分发给哑组件
- 我正在使用Pure Render Mixin来避免不必要的渲染
- 还使用不可变数据，这样我就可以确保Pure Render Mixin正常工作，也就是说，准确判断渲染是否必要，同时快速，非常快。
- 没有奇怪的回调绑定，这可能决定了组件的重新渲染，这已经进行了双重检查。
现在我遇到的问题：
我尝试过：
- 使用Chrome开发工具衡量效果;但是，我能看到的是，一切都没问题。并且我无法读取此工具提供的所有图形。 （我已经阅读了很多关于它的文章）
- 尝试在Firefox中使用Firebug。这是一个了不起的工具，但在这种情况下并非如此;只需用上面提到的负载打开它（30个小部件）就可以让Firefox冻结......并且探测器没有给我任何东西）
- 最后，我使用了Firefox的默认开发工具，它有一个性能选项卡。这让我了解了应用程序的哪些部分在浏览器上负载最大的一些信息。似乎是一些重要的计算决定了Immutable.List的最小值/最大值。
不幸的是，该应用程序仍然存在性能问题，并且使其完美运行非常重要，并且Firefox Profiler不会给我任何其他潜在客户。
所以我的问题是：
- 为了确定性能问题，下一步要采取什么措施？ （尽可能多的地方：class / method /至少文件）
- 你们有没有使用任何性能测试工具让你深入了解到底发生了什么？
- 还有什么需要考虑来改善整体功能，特别是针对多个浏览器？ （Firefox，Chrome，IE11）