无法弄清楚导致这种无休止的Recalculate Style循环的原因

时间:2015-01-06 20:09:51

标签: google-chrome-devtools cpu-usage

一位客户给我发了一封电子邮件,说他注意到他的电脑很迟钝,当他运行诊断程序时,他确定原因是他的网页耗尽了一堆CPU。在尝试调试为什么他的网站可能在他的计算机上使用如此多的CPU时,我注意到在使用Chrome时控制台中没有发生任何事情,但在时间轴中,有一个无休止的循环“重新计算样式,更新层树,复合图层“尽管网页上没有任何内容。

时间轴的屏幕截图:http://i.imgur.com/kW6CedU.png

我试着找出如何确定原因,并发现Canary可能有所帮助,所以我在Canary尝试了时间轴并没有看到任何不同。

我已经读过它可以来自CSS转换被写为转换:所有而不是需要转换的实际属性,所以我改变了所有转换实例:所有在CSS中的一个单一目标(转换:高度)例如)仍然继续这个循环。

我也不确定这个循环是什么导致他的CPU受到打击,但这是我最好的猜测。我注意到该网站不断在Chrome的窗口选项卡中显示“加载”圆圈动画,但现在它不再那样做了。我不确定是不是因为我改变了CSS转换规则,它现在不是经常“加载”,也不确定它与CPU使用情况有关。

任何建议表示赞赏。

0 个答案:

没有答案