如何最容易地识别render性能中的瓶颈？

Question

在处理JSON查看器时，我在识别呈现性能的瓶颈方面遇到了问题。由于元素不多，它执行得很好，但在某一点上，它变得缓慢得令人讨厌。

查看分析器，元素呈现的速度似乎够快了，但我注意到了一些问题，我不知道如何处理。

概述

• 该应用程序是一个JSON查看器，它允许您同时展开/最小化所有元素以及单个元素。
• 少数元素的性能很好，但随着元素数量的增加，性能似乎会急剧下降。
• 当使用performance.now()分析我的对象筛选方法以及检查React中的呈现时间时，这些图形似乎没有问题。我可能理解错了。
• 我尝试过在无状态元素上使用React.memo() (特别是键/值，这是最常见的组件)，但它似乎并没有明显提高性能。诚然，我不确定我是否足够理解回忆录的推理，以便有效地实现这一点。

实现

• 目前，我的应用程序将数据加载到父程序中，该父程序将数据输入到使用递归元素加载JSON树的组件中。
• 从URL加载JSON提要会改变父组件的状态，通过使用输入字段中输入的值的助手方法过滤父组件。

问题

有两个功能可以使用(不太大)的JSON文档来重现较慢的响应时间：

• 展开“全部”按钮
• 筛选器查询的前几个键。

对于当前的实现，过滤和扩展all都会触发子元素上的display: none更改，这种行为使我相信我正在做一些处理这个用例的无效操作。

复制步骤

代码可在这里获得：https://codesandbox.io/s/react-json-view-4z348

在这里使用生产构建(没有任何更好的表现)：https://csb-4z348.vercel.app/

要重现这个问题，请使用展开All函数(过滤器输入旁边的加号)和一些筛选器输入。

然后，尝试加载一个包含更多元素的JSON提要(您可以在我的GitHub API提要上进行测试)，并尝试过滤/扩展all。注意主要的表现。

我注意到了什么，

• 当记录useEffect时，最小化似乎会导致~2倍于扩展所有的重发器。
• 随着过滤器输入变得更加具体，呈现的元素越少，性能(逻辑)就越好。

问题

虽然我希望能在这个特定的情况下朝着正确的方向前进，但我最好奇的是如何最好地识别导致这些性能问题的原因。

我已经看过窗口输出，但这不是我的第一选择，我很确定我做错了什么，而不是原因是太多的元素渲染。

我感谢您的时间，并感谢您的任何提示，您可以提供！

Answer 1

看来我已经回答了我自己的问题。这个问题是一个和解问题，因为使用UUID作为我的子组件( )中的一个关键支柱，这使得它们在每次发生最小化状态更改时都会重新呈现。从医生那里：

键应该是稳定的，可预测的，并且是唯一的。不稳定键(如Math.random()生成的键)将导致不必要地重新创建许多组件实例和DOM节点，这可能导致子组件中的性能下降和状态丢失。

我会把这些步骤留给其他遇到这个问题的人。

在(太长时间)在性能分析器中进行挖掘之后，我注意到每次我最小化或扩展元素时，每个子元素都会再次被装入。在与谷歌进行了更具体的查询之后，我找到了这篇博客文章，并意识到我犯了这个公然的性能错误。

一旦我找到了问题的根源，我就用找到 许多 其他 参考文献来解决这个问题。

在固定关键支柱后，交互时间缩短了60%，以最小化/扩展所有。

最后，我回忆录了一些与即时过滤器相关的其他组件，最后，它似乎表现得和我目前想要的一样好。

感谢在这段时间里看到这一点的人，我希望这对任何可能遇到这件事的人都有帮助。