Paint Holding: Weiß blinken bei Navigationen mit demselben Ursprung reduzieren

Vor einiger Zeit hat Chrome beim Wechsel zu einem neuen Seite, um den Nutzern die Gewissheit zu geben, dass die Seite geladen wird. Dieser "Blitz von Weiß“ ist der kurze Moment, in dem der Browser weiß gestrichen wird, eine Seite geladen wird. Dies kann dich während der Navigation ablenken, besonders wenn die Seite relativ schnell in einen interessanteren Zustand gelangt.

Bei Seiten, die blitzschnell geladen werden, ist dieser Ansatz jedoch schädlich für die Nutzerfreundlichkeit. In der folgenden Animation sehen Sie ein Beispiel dafür, wie das heute aussieht.

Wir sind große Fans dieser Website und sie trauen uns, dass ihre Qualität ein weißes Blinken aufweist, und wir wollten das Problem beheben. Dazu haben wir ein neues Verhalten eingeführt, das wir „Paint Holding“ nennen. Dabei wartet der Browser kurz, bevor er mit dem Zeichnen beginnt, insbesondere wenn die Seite schnell genug ist. So wird sichergestellt, dass die Seite als Ganzes gerendert wird und die Nutzer sofort loslegen können.

Commits werden so lange zurückgestellt, bis eine bestimmte Seite geladen ist. Signal (PLS) (z.B. First Contentful Paint / festes Zeitlimit) erreicht wurde. Mi. zwischen Hauptthread-Rendering und Commit auf den Impliz-Thread unterscheiden (nur Letzteres wird verschoben). Wenn Sie warten, bis ein PLS auftritt, verringert sich die Wahrscheinlichkeit von Weißblitzen oder durchgehender Farbe.

Unser Ziel bei dieser Arbeit war es, die Navigation in Chrome zwischen zwei Seiten mit derselben Quelle nahtlos zu gestalten und so eine schnelle Standardnavigation ohne Blitze von weißem/einfarbigem Hintergrund zwischen alten und neuen Inhalten zu ermöglichen.

Probieren Sie die Farbspeicherung in Chrome Canary (Chrome 76) aus und teilen Sie uns Ihre Meinung mit. Entwickler sollten sich keine Gedanken darüber machen müssen, Seiten, um sie für sich zu nutzen.