PerformanceResourceTiming: свойство renderBlockingStatus

Свойство renderBlockingStatus считывания только для чтения возвращает состояние блокировки отрисовки ресурса.

Полезно для определения ресурсов, которые:

• не блокируют отрисовку и поэтому могут быть отложены, или
• блокируют отрисовку и поэтому могут быть предварительно загружены.

Ресурсы, блокирующие отрисовку, — это статические файлы, такие как шрифты, CSS и JavaScript, которые блокируют или замедляют отрисовку содержимого страницы в браузере. Браузер автоматически определяет эти блокирующие ресурсы и не рендерит пиксель на экране до загрузки и оценки всех таблиц стилей и синхронных скриптов. Это предотвращает мгновенное отображение нестилизованного содержимого («FOUC»).

В дополнение к автоматическому механизму блокировки отрисовки blocking="render" может быть предоставлен в качестве атрибута и значения для <script>, <style> или <link> элементов для указания явной блокировки отрисовки. Например:

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

Свойство renderBlockingStatus может иметь следующие значения:

"blocking"

Ресурс может потенциально заблокировать отрисовку.

"non-blocking"

Ресурс не блокирует отрисовку.

Свойство renderBlockingStatus может использоваться для просмотра ресурсов, блокирующих отрисовку.

Пример с использованием PerformanceObserver, который уведомляет о новых записях resource производительности, как только они записываются в временной шкале производительности браузера. Используйте параметр buffered для доступа к записям, созданным до создания наблюдателя.

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 });

Пример с использованием Performance.getEntriesByType(), который отображает только записи resource производительности, присутствующие во временной шкале производительности браузера в момент вызова этого метода:

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