如何在 Chrome 或 Firefox 中监控或分析 DOM 更新？

Question

我有一个应用程序（基于 React 构建）似乎会导致更多的开销——可能是 DOM 更新——而不是应该的。通常当用户输入任何数据时，例如单个字符，会发生 DOM 更新，但已经实现了 denounce，因此这种情况不应该发生，尽管 debounce 本身可能存在问题。

虽然我可以设计一些直观的方法来诊断这一点，但我认为收集分析数据可能会很有用，特别是像每秒 DOM 更新的直方图或图表这样的东西听起来很有用。

我不介意使用 Firefox 或 Chrome 来进行分析，但我会顺便指出，Firefox 似乎比 Chrome 更容易受到这个性能问题的影响。

Answer 1

老实说，最好的浏览器是 Microsoft Edge Dev。 Here 是下载页面的链接。 Edge Dev 在设置轮下有一堆额外的选项，并打开您可能需要的所有额外选项。有 3 个选项，但就像我说的，我建议 Dev。它具有一项功能（3-D 视图），使您能够查看页面上的所有元素以及它们如何相互堆叠/交互，如果有帮助，您可以将其更改为 DOM 视图。它允许您四处移动并与 3-D 模型交互，它会显示它实际在做什么。这是“查看”您的页面的好方法。你也可以下载 Firefox 开发者版，它也有开发工具，但不像 Edge。在 Edge 浏览器中运行程序，右键单击并检查页面，如果取消停靠控制台会更容易。更改设置以满足您的需要，然后单击配置文件选项卡。您应该能够在那里运行它并获得结果。查看“检查”窗口和“控制台”选项卡，如果您选择这些选项，它将记录错误和详细信息，这可能会告诉您是否有一些请求阻止了事情。