PerformanceElementTiming

Интерфейс PerformanceElementTiming содержит информацию о времени рендеринга для элементов изображений и текстовых узлов, которые разработчик отметил атрибутом elementtiming для наблюдения.

Цель API Element Timing — предоставить веб-разработчикам или инструментам аналитики возможность измерять временные метки рендеринга критически важных элементов на странице.

API поддерживает информацию о времени рендеринга для следующих элементов:

• <img> элементов,
• <image> элементов внутри <svg>,
• изображения-заглушки для <video> элементов,
• элементов, у которых свойство background-image содержит ссылку на фактически доступный ресурс, и
• группы текстовых узлов, например, <p>.

Автор помечает элемент для наблюдения, добавив атрибут elementtiming к элементу.

PerformanceElementTiming наследуется от PerformanceEntry.

Этот интерфейс расширяет следующие свойства PerformanceEntry для типов входов производительности, квалифицируя их следующим образом:

PerformanceEntry.duration Только для чтения Экспериментально

Всегда возвращает 0, так как duration не применяется к этому интерфейсу.

PerformanceEntry.entryType Только для чтения Экспериментально

Всегда возвращает "element".

PerformanceEntry.name Только для чтения Экспериментально

Возвращает "image-paint" для изображений и "text-paint" для текста.

PerformanceEntry.startTime Только для чтения Экспериментально

Возвращает значение renderTime этого входа, если оно не 0, иначе значение loadTime этого входа.

Этот интерфейс также поддерживает следующие свойства:

PerformanceElementTiming.element Только для чтения Экспериментально

Объект Element, представляющий элемент, о котором мы возвращаем информацию.

PerformanceElementTiming.id Только для чтения Экспериментально

Строка, представляющая id элемента.

PerformanceElementTiming.identifier Только для чтения Экспериментально

Строка, представляющая значение атрибута elementtiming элемента.

PerformanceElementTiming.intersectionRect Только для чтения Экспериментально

Объект DOMRectReadOnly, представляющий прямоугольник элемента в области просмотра.

PerformanceElementTiming.loadTime Только для чтения Экспериментально

DOMHighResTimeStamp с loadTime элемента.

PerformanceElementTiming.naturalHeight Только для чтения Экспериментально

Целое беззнаковое 32-битное число (unsigned long), представляющее внутреннюю высоту изображения, если это применяется к изображению, 0 для текста.

PerformanceElementTiming.naturalWidth Только для чтения Экспериментально

Целое беззнаковое 32-битное число (unsigned long), представляющее внутреннюю ширину изображения, если это применяется к изображению, 0 для текста.

PerformanceElementTiming.renderTime Только для чтения Экспериментально

DOMHighResTimeStamp с renderTime элемента.

PerformanceElementTiming.url Только для чтения Экспериментально

Строка, представляющая исходный URL запроса ресурсов для изображений, 0 для текста.

PerformanceElementTiming.toJSON() Экспериментально

Возвращает JSON-представление объекта PerformanceElementTiming.

В этом примере два элемента наблюдаются путем добавления атрибута elementtiming. Регистрируется PerformanceObserver для получения всех записей производительности типа "element" и используется флаг buffered для доступа к данным до создания наблюдателя.

<img src="image.jpg" elementtiming="big-image" />
<p elementtiming="text" id="text-id">text here</p>

const observer = new PerformanceObserver((list) => {
  list.getEntries().forEach((entry) => {
    console.log(entry);
  });
});
observer.observe({ type: "element", buffered: true });

В консоль будут выведены две записи. Первая содержит сведения об изображении, вторая — о текстовом узле.

• elementtiming Атрибут HTML