Meine Frage bezieht sich auf Chrome DevTools, insbesondere auf die Registerkarte "Zeitleiste". Wie ich schon oft gelesen habe, muss mein Browser eine Geschwindigkeit von 60 fps haben, um meine Pixel wiederzugeben. Manchmal hat es jedoch einige schwere JS ausgeführt und verhindert, dass 60fps passieren. Auch wenn ich CSS und JS habe, die das Neuberechnen und Neulackieren des DOM-Baums (Teil- oder Gesamtbaum) verursachen, kann es für einen Frame auch mehr als ~ 16 ms dauern. Hier ist das Bild eines so langen Frames aus unserer App:

Ok, hier kann ich deutlich sehen, dass zwei Anfragen so viel Zeit in Anspruch nehmen (192ms + 14ms), dass der Browser keine 60fps malen kann und es dort nicht einmal annähernd wird.

Doch hier ist ein anderes Bild:

So ist es jetzt viel besser. Jetzt sind es ~ 42fps. Aber jetzt kann ich nicht verstehen warum ..

Ich habe einige "Ebenenbaum aktualisieren" - und "Malen" -Anlässe. Einige Mausereignisse, aber alle sind hier <= 1 ms.

In diesem Frame gibt es 12 solcher "Ereignisse". 10 davon sind noch kürzer als 0,30 ms. Wenn ich also alle zusammenzähle, sind es definitiv weniger als 16 ms (3,57, wenn ich richtig zähle), aber Chrome sagt, dieser Frame ist 23,9 ms.

Warum sagt Timeline, dass ich hier einen Müll habe? Was muss ich tun, um es loszuwerden und zu wissen, wo der Engpass ist?

Ich bin hier etwas verwirrt, weil ich definitiv etwas vermisse, wenn ich die Timeline untersuche. Geben Sie mir daher bitte eine detaillierte Erklärung oder einige detaillierte Tutorials darüber, wie man solche "Junks" loswird und wie man sie erkennt. Obwohl ich bereits einige Artikel gelesen und den Udemy-Kurs über Performance fast abgeschlossen habe, bin ich immer noch verwirr

Vielen Dan