PerformanceResourceTiming: renderBlockingStatus Eigenschaft

Beschreibung

Render-blockierende Ressourcen sind statische Dateien wie Schriftarten, CSS und JavaScript, die den Browser daran hindern oder verzgern, Seiteninhalte auf dem Bildschirm darzustellen. Der Browser bestimmt diese blockierenden Ressourcen automatisch und rendert keine Pixel auf dem Bildschirm, bevor alle Stylesheets und synchronen Skripte geladen und ausgewertet wurden. Dies verhindert das Flash of Unstyled Contents ("FOUC").

Zustzlich zum automatischen Render-Blocking-Mechanismus kann blocking="render" als Attribut und Wert fr <script>, <style> oder <link> Elemente angegeben werden, um explizites Render-Blocking zu definieren. Zum Beispiel:

<script blocking="render" src="important.js" defer></script>

Wert

Die renderBlockingStatus Eigenschaft kann folgende Werte haben:

"blocking"

Die Ressource knnte potenziell das Rendering blockieren.

"non-blocking"

Die Ressource blockiert das Rendering nicht.

Beispiele

Protokollierung von Ressourcen, die das Rendering blockieren

Die renderBlockingStatus Eigenschaft kann verwendet werden, um Ressourcen zu sehen, die das Rendering blockieren.

Beispiel unter Verwendung eines PerformanceObserver, der ber neue resource Performance-Eintrge benachrichtigt, sobald sie in der Leistungschronik des Browsers aufgezeichnet werden. Verwenden Sie die buffered Option, um auf Eintrge vor der Beobachtererstellung zuzugreifen.

const observer = new PerformanceObserver((list) => {
  list.getEntries().forEach((entry) => {
    if (entry.renderBlockingStatus === "blocking") {
      console.log(`${entry.name} is render-blocking.`);
    }
  });
});

observer.observe({ type: "resource", buffered: true });

Beispiel mit Performance.getEntriesByType(), welches nur resource Performance-Eintrge anzeigt, die in der Leistungschronik des Browsers zum Zeitpunkt des Aufrufs dieser Methode vorhanden sind:

const resources = performance.getEntriesByType("resource");
resources.forEach((entry) => {
  if (entry.renderBlockingStatus === "blocking") {
    console.log(`${entry.name} is render-blocking.`);
  }
});

Spezifikationen

Browser-Kompatibilitt