59

Chrome exhibits huge lags when viewing a given web page of mine. I'm using the DevTools Performance tab to try and find the culprit which I assume to be somewhere in my JavaScript code.

The following screenshot shows a profile recorded using DevTools. For some of the "tasks" shown in the profile, I can see the details of what the tasks are doing (for example, the one between 8700 ms and 9200 ms is GC), but for other tasks there are no details whatsoever, like the two I have highlighted in the screenshot. How do I figure out what are those tasks doing?

Screenshot

10
  • 3
    I have the exact same issue. There's obviously a bug in Chrome, actually a regression (I started observing the issue a few days ago). In my case, this happens after my JS reduces the height of a node at the top of the page, causing the entire rest of the page to move up. That happens instantly (as you'd expect, since everything just needs to move up with no changes inside) and there's no significant time spent in layout; yet, a few ms later, a long task like yours consumes 100% CPU for about 3 seconds with absolutely zero detail in devTools about what it's doing and what triggers it.
    – matteo
    May 27, 2019 at 18:01
  • 4
  • 4
    @KayceBasques if you are talking to the OP, from his screenshot it can be clearly seen that JavaScript sampling is NOT disabled (you can see the coloured stripes on other tasks except the ones the issue/question is about). In my case, I have double-checked and I don't have it disabled either.
    – matteo
    May 28, 2019 at 14:35
  • 15
    This question is being discussed on meta. Jun 6, 2019 at 1:33
  • 3
    I found the reason in my code, the continuation of the topic: stackoverflow.com/questions/56472959/… Jun 6, 2019 at 7:55

2 Answers 2

5

I ran into a similar issue where I had long, opaque "task" taking several seconds without further information in the Dev Tools.

enter image description here

A Chrome dev pointed me towards Perfetto (edit: or you can access a built-in similar tool at chrome://tracing). Perfetto lets you record traces of the internals of Chrome. In my case I suspect this was GPU related so I enabled all the gpu* switches:

enter image description here

and started my trace. After I repro'ed the issue in another tab, I went back to the Perfetto trace. I found these "ThreadControllerImpl::RunTask" slices that seemed to be about the duration of the mysterious system tasks.

enter image description here

Helpfully Perfetto has an arrow from that task to another group of "slices".

enter image description here

And each of these is catagorized as "webaudio". From that I learned that my use of AudioContext was likely the culprit, and indeed if I disabled all audio on my page the issue goes away.

enter image description here

Hopefully this example is illustrative to others trying to solve opaque "system task" issues in Chrome.

4

You can use JavaScript's performance observer to know the bottleneck of perf issues in your web app.

Precise code -

const observer = new PerformanceObserver((list) => {
    console.log('Long Task detected! 🚩️');
    const entries = list.getEntries();
    console.log(entries);
});

observer.observe({entryTypes: ['longtask']});

More details here

1
  • 3
    Unfortunately this only shows me the same information as the Profiler tab which isn't particularly useful:. All of my entries have attribution: [ { name: "unknown" } ].
    – Dai
    Aug 23, 2021 at 19:54

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Not the answer you're looking for? Browse other questions tagged or ask your own question.