A client sent me an email saying that he noticed his computer was sluggish, and when he ran diagnostics he determined the cause was that his webpage was using up a bunch of CPU. In trying to debug why his site might be using so much CPU on his computer, I noticed while using Chrome that nothing was happening in the Console, but that in the Timeline, there is an unending loop of "Recalculate Style, Update Layer Tree, Composite Layers" despite nothing happening on the webpage.
Screenshot of timeline: https://i.stack.imgur.com/UYubL.png
I tried searching how to determine the cause of this, and found that Canary might help, so I tried the Timeline in Canary and didn't see anything different.
I've read it can be from CSS transitions being written as transition:all instead of the actual property that needs to be transitioned, so I changed all instances of transition:all in the CSS to a singular target (transition:height for example) and still this loop continues.
I'm also not certain that this loop is what is causing his CPU to be taking a hit, but it's my best guess. I noticed that the website constantly had the "loading" circle animation in the window's tab for Chrome, but now it's not doing that anymore. I'm not sure if it's because I changed the CSS transition rules that it isn't constantly "loading" now, nor am I sure it has anything to do with the CPU usage.
Any advice appreciated.
