获取 Chrome 的“重新计算样式”分析事件影响的 DOM 元素答案

【问题标题】：Get Chrome's "Recalculate Style" Profiling Event Affected DOM Elements获取 Chrome 的“重新计算样式”分析事件影响的 DOM 元素
【发布时间】：2017-02-08 04:07:02
【问题描述】：

有没有办法真正获取 Chrome 的“重新计算样式”事件中涉及的 DOM 元素？

它所说的就像“59 个元素”。但是慢慢开始从 DOM 中删除元素并重新运行时间线分析器以查看它如何影响受影响元素的元素计数是非常耗时的。即便如此，仍然很难弄清楚哪些因素可能是负责任的。

同样的问题也适用于“更新层树”和“布局”事件。

【问题讨论】：

标签： css performance google-chrome profiling

【解决方案1】：

所以，有一些方法可以帮助你。

您可以使用 Chrome Canary：https://www.google.com/intl/en/chrome/canary/ 您可以在开发工具中单击一个事件，它应该会显示一个简单的堆栈跟踪。

我也使用过这段调试代码 CSS 动画

window.onanimationiteration = console.log;

希望对你有所帮助

【讨论】：