Inexplicit 'task' in Chrome Perfomance DevTools

Question

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?

Answer 1

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

Answer 2

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

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:

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.

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

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.

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