CODEWITHSUNDEEP
javascriptperformancegoogle-chromegoogle-chrome-devtools
Sergei Illarionov
Sergei Illarionov

Reputation: 753

Inexplicit 'task' in Chrome Performance DevTools

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

Upvotes: 61

Views: 7025

Answers (2)

Daryl
Daryl

Reputation: 3343

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

Enter image description here

A Chrome developer pointed me towards Perfetto (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 categorized 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.

Upvotes: 10

C Ankita
C Ankita

Reputation: 175

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

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 are here.

Upvotes: 4

Related Questions