Google chrome Chrome timeline-我如何确定“a”的原因；“重新计算样式”；日志条目？

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

---

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

我给您的建议是使用Chrome的构建。Paul Irish在Chrome开发工具中有一个很好的使用时间线的演示

---

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

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

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

---

实现这一单一的更改使循环

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

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

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

$（'*'）。每个（函数（）{
if（$（this.css（'animation'）.split（“”）[0]！='none'）{//如果需要，也可以在此处检查无限
console.log（this）；
}
});

---

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

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

window.onanimationiteration = console.log;

---

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

这是一个非常有用的演示，但也有一些“重新计算样式”条目不显示堆栈跟踪，并且似乎没有附加到任何代码。当有很多元素时，我每次单击都会得到该条目，但无法跟踪它需要重新计算的原因。因此，我想这是个好运气。如果版面重新计算是由加载的字体触发的，您可以单击重新计算样式中的“显示”链接，这将带您进入“日程样式重新计算”，并且只有这样才能知道这是由字体引起的，是查找网络窗格，字体的长条将在SSR任务的正上方完成。因此，当字体异步加载时可用时，请使用您的直觉。您是如何发现的，是什么原因造成的？这是两年多前的事了，请原谅，如果我的记忆有点模糊的话但我想我只是尝试了一下。删除所有转换，然后添加每个转换，直到我看到问题。当我发现只是类引起了问题时，我将转换限制为我实际需要的单个属性。比其他任何东西都幸运…JQuery建议非常有用，因为它允许真正快速的诊断。这很快就找到了问题的根源——一个带有

动画迭代：infinite

的动画一直在使CSS和重画无效，即使受影响的元素不在屏幕上。谢谢，这帮助我跟踪重画到CSS动画！英雄帮助我识别一些我认为不在DOM中的隐藏动画。谢谢你让我的电脑迷们安静下来：）。