Wie verfolge ich Devtools Timeline richtig?

Meine Frage bezieht sich auf Chrome DevTools, insbesondere habe ich eine Frage zum Tab "Zeitleiste". Wie ich schon oft gelesen habe, muss mein Browser eine Geschwindigkeit von 60 fps haben, um meine Pixel zu rendern. Manchmal, obwohl es einige schwere JS ausführt und verhindert 60fps passiert. Auch wenn ich etwas CSS und JS habe, die eine Neuberechnung und Neubemalung des DOM-Baums (Teil- oder Vollbaum) verursachen, kann es auch mehr als ~ 16 ms für einen Rahmen dauern. Hier ist das Bild eines so langen Rahmens aus unserer App:

Ok, hier kann ich deutlich sehen, dass zwei Anfragen so viel Zeit brauchen (192ms + 14ms), dass der Browser 60fps nicht ausmalen kann und es auch nicht annähernd ankommt.

Obwohl hier ein anderes Bild ist:

Also ist es jetzt viel besser. Jetzt sind es ~ 42 Bilder pro Sekunde. Aber jetzt kann ich nicht verstehen, warum ..

Ich habe einige "update layer tree" und "paint" Gelegenheiten. Einige Mausereignisse, aber alle sind & lt; = 1ms hier.

Während dieses Rahmens gibt es 12 solcher "Ereignisse". 10 von ihnen sind sogar weniger als 0.30ms, also wenn ich sie alle summiere, wird es definitiv weniger als 16ms sein (3.57, wenn ich richtig zähle), aber Chrome sagt, dass dieser Frame 23.9ms ist.

Warum Timeline sagt, dass ich hier einen Müll habe? Was soll ich tun, um es los zu werden und zu wissen, wo der Flaschenhals ist?

Ich bin hier etwas verwirrt, weil ich definitiv etwas vermisse, wenn ich die Timeline untersuche. Also bitte, geben Sie mir eine detaillierte Erklärung oder einige detaillierte Tutorials darüber, wie man solche "Dschunken" los wird und wie man sie erkennt. Obwohl ich schon ein paar Artikel gelesen habe und Udemy Kurs auf Performance fast beendet habe, bin ich immer noch verwirrt.

Danke