Menu
My question is about Chrome DevTools, specifically I have question about Timeline tab. So as I've read numerous times, my browser has to have 60fps speed rendering my pixels. Sometimes though it has some heavy JS executing and preventing 60fps happening. Also if I have some CSS and JS which cause recalculating and repainting of the DOM tree(part or full tree) it may also take more than ~16ms for one frame. Here is the picture of such a long frame from our app:
Ok, here I can clearly see, that two requests take so much time(192ms + 14ms), that browser can't paint 60fps and it doesn't get even close there.
Though here is another picture:
So it's much better now. Now it's ~42fps. But Now i can't understand why..
I have couple of "update layer tree" and "paint" occasions. Some mouse events, but all of them are <=1ms here.
There are 12 such "events" during this frame. 10 of them are even less then 0.30ms, so if I sum them all it will definitely be less then 16ms(3.57, if I count correctly), but Chrome says this frame is 23.9ms.
Why Timeline says that I have a junk here? What should I do to get rid of it and how to know where is the bottleneck?
I'm a bit confused here, because I definitely miss something in examining the timeline.. So please, give me some detailed explanation or some detailed tutorials about how to get rid of such "junks" and how to detect them. Though I've already read couple of articles and almost finished Udemy course on performance, I'm still confused..
Thank you
951
From the Chrome menu: Open the Chrome menu and go to “More Tools” > “Developer Tools.” Finally, you can right-click (Windows) or Ctrl-click (Mac) anything on a web page and select “Inspect Element” to open Developer Tools. The Developer Tools panel will open in whatever web page you're on.
To access the Performance tab, navigate to the website you want to profile, then open Chrome DevTools by right-clicking and selecting Inspect. Select the Performance tab inside Chrome DevTools. The easiest way to capture a performance profile is by clicking the Start profiling and reload page icon.
To break down the duration of a request, either hover over the Waterfall column, or click on the request and select the Timing tab. This way you can find out if the request is slow because the response takes a long time to download (left), or if the server takes a long time before starting to send the response (right).
I suspect that there is "native" code executing in that open space that the timeline doesn't report.
You might want to try using the "Profiles" tab in dev tools to take a CPU Profile instead. That will show a bar for "(Program)" which is native Chrome code that is executing. That might at least be a start to figuring out what is happening.
Timeline shows white gap on right side:
Profiler shows that (Program) and a garbage collection "(g...r)" happen there
If there is a big block of "(Program)" there, then I think you can use the chrome://tracing tab which will show all the native / internal stuff going on:
59
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
