Question

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

如何最好地确定这些条目的原因？

Answer 1

我的建议是使用Chrome的Chrome Canary版本。 Paul Irish有一个很好的演示，可以在Chrome开发工具here

中使用时间轴

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

Answer 2

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

window.onanimationiteration = console.log;

每次动画运行时都会打印一行，包括动画名称和动画应用的元素。

Answer 3

我能够测试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"

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

$('*').each(function(){
  if($(this).css('animation').split(' ')[0] != 'none'){ //you could also check for infinite here if you want
    console.log(this);
  }
});

通过单独禁用每个动画，我能够确定哪一个导致了我的问题。

Answer 4

我几乎可以肯定你的页面上有一些无限的重复动画。这就是导致Recalculate Style而不说是什么导致它的原因。

Answer 5

我遇到了同样的问题（这就是我找到你问题的原因）。

我的问题是由CSS3转换所有属性引起的。当我只需要过渡填充时，我一直很懒惰。

实现单个更改使循环

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

5 个答案: