1

When my application page is not in focus, chrome drops below 3% cpu utilization. When my app is in focus, it jumps to 30-50% cpu utilization, and hums there constantly. I use a utility function to start interval timers, and log anything that is adding them: one running every 30s (potentially sending a websocket message), every 1s (a couple boolean tests and some string manipulation), and every 0.5s (check the content of a single text box).

You can see in this screenshot that the profiler is showing most of that time is being spent in recalculate style and update layer tree.

This is baffling considering that nothing is changing in the dom of my app during the profile period.

each of the purple humps in 1, happening about every 10-12ms, lasting about 4ms, is blown up in detail in 2, and consists of a "recalculate style" with no information about a cause in the javascript code or any other indication of why it is happening. It is always the same number of elements affected (in this case, 96, if you change the dom in certain ways, the number of elements affected will be different, but once you stop changing the dom the forced recalcs will start humming along over and over, with no apparent cause, affecting the same set of elements.)

In light of this, I have 2 questions. One, why isn't chrome reporting the javascript cause of the repeated style recalcs? and Two: what else might be causing the constant cpu thrashing in case this is a red herring?

Jeff Bay
  • 11
  • 1

1 Answers1

0

css animations turned out to be the culprit.

https://stackoverflow.com/a/41047041/8099558

my coworker found the answer by not including the word "javascript" in her google searches, even in the negative.

It turns out that our site generally hides elements without using display: none, and that does not turn off the animations for those elements.

Jeff Bay
  • 11
  • 1