A client sent me an email informing me that he noticed that his computer was sluggish, and when he ran the diagnostics, he decided that the reason was that his webpage was using a bunch of processor. While trying to debug why his site can use so much processor on my computer, I noticed that when using Chrome nothing happened in the console, but on the timeline there is an endless loop "Recalculate the style, update the layer tree", Composite Layers, despite what doesn’t happen on the web page.
Timeline screenshot: http://i.imgur.com/kW6CedU.png
I tried to find the reason for this and found that Canary could help, so I tried Timeline in Canary and did not see anything else.
I read that this could be from CSS transitions that are written as a transition: everything instead of the actual property that needs to be moved, so I changed all instances of the transition: everything in CSS into a single goal (transition: height for example), and this loop continues.
I'm also not sure if this loop is causing its processor to get hit, but this is my best guess. I noticed that the website constantly had a “download circle” animation on the window tab for Chrome, but now it no longer does this. I'm not sure, because I changed the CSS transition rules that it is not constantly “loading” now, and I'm not sure that it has anything to do with CPU usage.
Any advice is appreciated.
source share