admin管理员组文章数量:1185142
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?
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?
Share Improve this question edited Jan 26, 2024 at 20:54 InSync 10.4k4 gold badges15 silver badges51 bronze badges asked May 27, 2019 at 16:44 Sergei IllarionovSergei Illarionov 7431 gold badge8 silver badges19 bronze badges 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 Commented May 27, 2019 at 18:01
- 4 Please star these chromium issues: bugs.chromium.org/p/chromium/issues/detail?id=967211 bugs.chromium.org/p/chromium/issues/detail?id=967217 – matteo Commented May 27, 2019 at 18:03
- 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 Commented May 28, 2019 at 14:35
- 15 This question is being discussed on meta. – Jack Bashford Commented Jun 6, 2019 at 1:33
- 3 I found the reason in my code, the continuation of the topic: stackoverflow.com/questions/56472959/… – Sergei Illarionov Commented Jun 6, 2019 at 7:55
2 Answers
Reset to default 10I ran into a similar issue where I had a long, opaque "task" taking several seconds without further information in the Dev Tools.
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:
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 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.
Hopefully this example is illustrative to others trying to solve opaque "system task" issues in Chrome.
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!
本文标签：
javascriptInexplicit 39task39 in Chrome Performance DevToolsStack Overflow
版权声明：本文标题：javascript - Inexplicit 'task' in Chrome Performance DevTools - Stack Overflow 内容由网友自发贡献，该文观点仅代表作者本人，
转载请联系作者并注明出处：http://www.betaflare.com/web/1738290892a2073160.html，
本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容，一经查实，本站将立刻删除。
发表评论