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

Posted 2023-01-17

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

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

答案

我给你的建议是使用Chrome Canary构建的Chrome。 Paul Irish在Chrome Dev Tools here中使用时间轴有一个很好的演示

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

另一答案

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

window.onanimationiteration = console.log;

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

另一答案

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

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

另一答案

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

另一答案

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

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

实现单个更改使循环成为可能