Wöchentliche Plattformnachrichten: Layoutschicht, bitrierte Videos mit hohem Bitrat, Screenshots in Firefox

Die Webplattform-Nachrichten in dieser Woche umfassen Layout-Shift-Debugging, hochrangige Videoprobleme und eine neue Firefox-Screenshot-Funktion. Lass uns eintauchen!

Diagnose von Layoutverschiebungen mit WebPagetest

WebPagetest hilft nun dabei, das Layout -Verschiebungen beim Laden von Seite zu bestimmen. So wie: wie:

Schritt 1: Fügen Sie eine benutzerdefinierte Metrik hinzu

Fügen Sie in WebPagetests "Advanced Settings" ( benutzerdefinierte Registerkarte) diesen Code in das Feld "benutzerdefinierte Metriken" ein. Stellen Sie sicher, dass Chrome als Browser ausgewählt wird.

 <code>[LayoutShifts] return new Promise(resolve => { new PerformanceObserver(list => { resolve(JSON.stringify(list.getEntries().filter(entry => !entry.hadRecentInput))); }).observe({type: "layout-shift", buffered: true}); });</code>

Schritt 2: Ergebnisse untersuchen

Überprüfen Sie nach dem Test die "LayoutShifts" -Erträge auf der Seite "benutzerdefinierte Metriken" (verknüpft aus dem Abschnitt "Details").

Schritt 3: Filmstrip -Analyse

Verwenden Sie die Daten "Starttime" und "Wert", um die Verschiebungen im WebPagetest Filmstrip zu lokalisieren und ihre Ursachen zu identifizieren.

(über Rick Viscomi)

Hochbitrate -Videos und 3G -Wiedergabe

Selbst gehostete Videos mit Bitraten von mehr als 1,5 Mbit / s können in 3G-Netzwerken Wiedergabestände verursachen. Tools wie FFMPEG und StreamClarity.com können Bitrate überwachen. Eine Studie ergab, dass mehr als die Hälfte der Videos Bitraten über 3G -Download -Geschwindigkeiten überschreiten, was zu Verzögerungen und Ständen von Wiedergabe führt.

(über Doug Sillare)

Firefox's Enhanced Screenshot -Befehl

Firefox Devtools bietet jetzt einen mächtigen Befehl :screenshot . Es spiegelt die Funktionalität von Chrome (Element, Ansichtsfenster, ganzseitige Screenshots) wider, fügt jedoch das Geräte-Pixel-Verhältnis und Verzögerungsoptionen hinzu.

 <code>// Full-page screenshot at 2x DPR :screenshot --fullpage --dpr 2 // Viewport screenshot with 5-second delay :screenshot --delay 5</code>

(über Reddit)

Abonnieren Sie den wöchentlichen Sonntags -E -Mail -Newsletter, der jeden Montagmorgen geliefert wird.

Webplattform News: Sonntag Ausgabe →

Das obige ist der detaillierte Inhalt vonWöchentliche Plattformnachrichten: Layoutschicht, bitrierte Videos mit hohem Bitrat, Screenshots in Firefox. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!