Mismatch between Chrome Task Manager CPU usage (100%) and Performance Profile (idle)

I have a webpage I’m trying to debug in Chrome v67.0.3396.62. Intermittently the page becomes unresponsive, and both Windows Task Manager and Chrome’s built in Task Manager show 100% CPU usage [on a single core].

This problem does not happen in any reliable or reproducible way – I can go days without a problem, then have issues for hours and have to end the tab process in order to regain use of it every time the page loads.

I have somehow managed to capture a performance profile using Chrome’s Dev tools performance tab during a time that this problem was occurring. However, the profile shows the process to be mostly idle.

What could cause 100% cpu usage that is not captured by the dev tools performance profiling?

(I have already poured over my own code for infinite loops/recursion, but haven’t found anything suspect. I am using jquery, bootstrap and popper, but they’re all being served from reputable CDNs and match their integrity hashes, so I’m at a loss how to debug any further. Any suggestions would be much appreciated.)

Reading CPU profile snapshot in Chrome DevTools: is it multiple calls or one?

I’m profiling an application and I’m not sure how should I interpret the call chart. As far as I understand if a bar is split into several ones on the next line, that means that the top function calls underlying functions several times.

I mean, when I see the following in the chart:

| fn1                                                   |
| fn2     | fn2                 | fn2        | fn2      |
| ...                                                   |
| value   | value               | value      | value    |

I read it as fn1 was called only once and value was called four times inside that fn1 call.

The thing is if I insert console.log into that value function, I see it called exactly once. So what does that mean, that I have many columns with value?

profile chart