PerformanceElementTiming: свойство renderTime

Чтение-только свойство renderTime интерфейса PerformanceElementTiming возвращает время отрисовки связанного элемента.

Значение типа DOMHighResTimeStamp с временем отрисовки элемента.

Для изображений это будет временная метка отрисовки изображения. Она определяется как следующий рендеринг, который происходит после того, как изображение полностью загрузится. Если проверка временных ограничений не выполняется (как определено в заголовке Timing-allow-origin), это вернет 0.

Для текстовых узлов это будет временная метка отрисовки текста. Она определяется как момент, когда элемент становится нарисованным текстом.

В этом примере элемент <img> наблюдается путём добавления атрибута elementtiming. Регистрируется PerformanceObserver для получения всех записей производительности типа "element" и используется флаг buffered, чтобы получить данные до создания наблюдателя. Вызов entry.renderTime возвращает время отрисовки элемента изображения.

<img
  src="image.jpg"
  alt="a nice image"
  elementtiming="big-image"
  id="myImage" />

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

По соображениям безопасности, значение свойства renderTime первоначально было 0, если ресурс был запросом с другого домена. Вместо этого следует использовать свойство loadTime в качестве резервного варианта.

Браузеры могут теперь показывать немного грубоватое время отрисовки в таких ситуациях. Проверьте поддержку браузера в таблице совместимости.

Чтобы получить более точную информацию о времени отрисовки с разных доменов, необходимо установить заголовок HTTP Timing-Allow-Origin.

Например, чтобы позволить https://developer.mozilla.org видеть точное renderTime, ресурс с другого домена должен отправлять:

Timing-Allow-Origin: https://developer.mozilla.org

В качестве альтернативы, можно использовать startTime, который возвращает значение renderTime записи, если оно не 0, и в противном случае значение loadTime этой записи. Однако рекомендуется устанавливать заголовок Timing-Allow-Origin, чтобы метрики были более точными.

Если вы используете startTime, вы можете отметить любые неточности, проверив, использовалось ли renderTime:

const isRenderTime = entry.renderTime ? true : false;