Der Kampf gegen Layout Jank

Die Fertigstellung der Webseitenrendern bedeutet nicht, dass das Layout festgelegt ist. Das Laden einer Medienressource (z. B. ein Bild) kann dazu führen, dass sich das Layout aufgrund ihrer Größe ändert, und in Streaming -Layouts wird die Bildgröße normalerweise erst nach dem Rendering bestimmt. Dies kann auch durch das Layout für Schriftarten und Neulager verursacht werden, oder XHR -Anfragen bringen mehr Inhalte auf die Seite. Wir haben versucht, Layout -Jitter zu verhindern - so nenne ich Layout -Jans. Es ist ärgerlich und niemand mag es. Im besten Fall verlieren Sie Ihre Position beim Lesen. Im schlimmsten Fall können Sie auf etwas klicken, auf das Sie überhaupt nicht klicken möchten.

Eric Portis versuchte, die neue API für die Instabilität der neuen Layout -Instabilität zu verstehen und sie mit Freunden zu besprechen, und gab einige sehr aufschlussreiche Punkte. Grundsätzlich ist Layout Jitter ein Problem und arbeitet daran, es auf viele Arten zu lösen:

• Lösen Sie das Problem aus der Inhalts-/Erstellungsstufe: Wir haben jetzt als HTML-Attribut und aspect-ratio als CSS-Attribut intrinsicsize . Beide sollen dieses Problem lösen, obwohl sie noch keinen guten Browserunterstützung haben und stattdessen ein DIY -Seitenverhältnis -Box erfordern. Gleiches gilt auch für die Idee, die UA-Stylesheets zu ändern, um die Effektivität aspect-ratio zu erweitern.
• Lösen Sie das Problem aus dem Browser -Verhaltensniveau: Scroll -Verankerung dient auch zur Lösung dieses Problems. Es ist nun standardmäßig aktiviert, ist ein großer Schritt nach vorne. Wenn Sie es benötigen, können Sie es immer noch über CSS (über overflow-anchor ) steuern.
• Messen Sie Probleme und Ursachen: Die API für Layoutinstabilität ist dafür ausgelegt und kann verwendet werden, um sie zu ermöglichen, sie zu überwachen.

Das obige ist der detaillierte Inhalt vonDer Kampf gegen Layout Jank. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!