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

【问题标题】：Chrome timeline - how can I determine the cause of a "Recalculate Style" log entry?Chrome 时间线 - 如何确定“重新计算样式”日志条目的原因？
【发布时间】：2012-02-13 04:30:27
【问题描述】：

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

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

【问题讨论】：

标签： google-chrome profiling timeline

【解决方案1】：

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

window.onanimationiteration = console.log;

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

【讨论】：

谢谢，这帮助我将重绘跟踪到 css 动画！
英雄！帮助我识别了一些我认为不在 DOM 中的隐藏动画。谢谢你让我的电脑迷们沉默:)。

【解决方案2】：

我对您的建议是使用 Chrome 的 Chrome Canary 版本。 Paul Irish 有一个在 Chrome 开发工具中使用时间轴的很好的演示 here

您可以简单地单击事件，例如“重新计算样式”，您应该会获得一个微型堆栈跟踪，指向事件在您的代码中发生的位置。

【讨论】：

这是一个非常有用的演示，但也有“重新计算样式”条目不显示堆栈跟踪并且似乎没有附加到任何代码。当有很多元素时，我每次点击都会得到该条目，但无法追踪为什么需要重新计算。
我得到这个来自次要 GC。所以我想祝你好运。
如果布局重新计算是由加载的字体触发的，您可以单击重新计算样式中的“显示”链接，这将带您进入“计划样式重新计算”，这是了解的唯一方法这是由于字体，是查找网络窗格，字体的长条将在 SSR 任务上方完成。因此，如果异步加载字体可用，请使用您的直觉。

【解决方案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"

所以在刷新（重新启用动画）之后，下面的 sn-p 会记录每个定义了动画的元素：

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

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

【讨论】：

JQuery 建议非常有用，因为它允许真正快速诊断。这很快就为我找到了问题的根源——带有animation-iteration: infinite 的动画始终使 CSS 和重绘无效，即使受影响的元素不在屏幕上。

【解决方案4】：

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

【讨论】：

【解决方案5】：

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

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

实现单个更改就形成了循环

【讨论】：

你是怎么发现的，是什么原因造成的
两年前的事了，如果我的记忆有点模糊，请见谅。 ;) 但我想我只是做了一次试验和错误。删除所有转换，然后添加每个转换，直到我看到问题。当我发现只是导致问题的类时，我将转换限制为我实际需要的一个属性。运气比其他任何东西都多……

【解决方案6】：

它也可能是由某些扩展引起的。在我的情况下，由于外部第三方 chrome 扩展，样式是重新计算。当我删除扩展时 - Chrome 停止重新计算样式。

【讨论】：