Chrome时间轴 - 如何确定"重新计算样式"日志条目的原因？

Question

使用Chrome中的内置时间线记录器对页面进行概要分析,我看到重复的"重新计算样式"条目.他们没有明确的信息将它们链接到DOM元素或事件.

我怎样才能最好地确定这些条目的原因？

Answer 1

我给你的建议是使用Chrome Canary版 Chrome.Paul Irish在这里有一个很好的演示,可以在Chrome开发工具中使用时间轴

您只需单击该事件,例如"重新计算样式",您就应该获得指向代码中事件发生位置的微型堆栈跟踪.

Answer 2

用于调查的已发布jQuery版本的替代方案是在控制台中使用简单的单行程序:

window.onanimationiteration = console.log;

每次运行一些动画时,这将打印一条线,包括动画的名称和应用动画的元素.

Answer 3

我几乎可以肯定您的页面上有一些无限重复的动画。这就是导致重新计算样式的原因，但没有说明是什么原因造成的。

Answer 4

我能够测试CSS过渡或动画是否触发了页面上的重新计算。我使用jQuery来做到这一点，但是您可以使用任何您想要的东西：

$('*').css('transition', 'none');
$('*').css('animation', 'none');

这有效地禁用了页面上每个元素的过渡和动画。我一次运行了一个，然后重新进行了配置。就我而言，动画是罪魁祸首。

.css('animation') 将返回类似

"myCustomAnimation 15s linear 0s infinite normal none running"

或者如果没有动画，

"none 0s ease 0s 1 normal none running"

因此，刷新（重新启用动画）后，以下代码片段记录了定义了动画的每个元素：

"myCustomAnimation 15s linear 0s infinite normal none running"

通过分别禁用每个动画，我可以确定是哪个动画引起了我的问题。