In der Zeitleiste der Entwicklungswerkzeuge, was sind die leeren grünen Rechtecke?

Question

In der Chronik der Timeline für Dev-Tools: Was ist der Unterschied zwischen den gefüllten, grünen Rechtecken (die die Maloperationen darstellen) und den leeren, grünen Rechtecken (die anscheinend auch etwas über Maloperationen darstellen ...)?

Answer 1

Malerei ist wirklich zwei Aufgaben: Anrufe und Rasterung ziehen.

Zeichnen Anrufe. Dies ist eine Liste von Dingen, die Sie zeichnen möchten, und sie wird von dem CSS abgeleitet, das auf Ihre Elemente angewendet wird. Letztendlich gibt es eine Liste von Zeichnungsaufrufen, die denen des Canvas-Elements nicht unähnlich sind: moveTo, lineTo, fillRect (obwohl sie in Skia etwas andere Namen haben, das Backend von Chrome, es ist ein ähnliches Konzept.)

Rasterisierung. Das Durchlaufen dieser Zeichenaufrufe und das Ausfüllen tatsächlicher Pixel in Puffer, die zum Compositing auf die GPU hochgeladen werden können.

Also, mit diesem Hintergrund, hier gehen wir:

• Die festen grünen Blöcke sind die Auslosung Anrufe von Chrome aufgezeichnet werden. Diese werden im Hauptthread neben JavaScript, Stilberechnungen und Layout ausgeführt. Diese Zeichenaufrufe werden als Datenstruktur zusammengefasst und an den Compositor-Thread übergeben. Die leeren grünen Blöcke sind die Rasterung. Diese werden von einem Worker-Thread behandelt, der vom Compositor erzeugt wird.

Im Wesentlichen sind dann beide Farben, sie repräsentieren nur verschiedene Teilaufgaben des Gesamtauftrags. Wenn Sie Probleme mit der Leistung haben (und aus dem von Ihnen zur Verfügung gestellten Puffersystem scheinen Sie farbgebunden zu sein), müssen Sie möglicherweise prüfen, welche Eigenschaften Sie über CSS oder JavaScript ändern und ob es nur einen Compositor gibt Das Gleiche endet. CSS Triggers kann hier wohl helfen.