PerformancePaintTiming

Интерфейс PerformancePaintTiming предоставляет информацию о времени выполнения операций «рисования» (также называемых «рендерингом») во время построения веб-страницы. «Рисование» относится к преобразованию дерева рендеринга в пиксели на экране.

Этот API предоставляет две ключевые временные метки рисования:

• Первое рисование (FP): Время, когда что-либо отрисовано. Обратите внимание, что пометка первого рисования необязательна, не все пользовательские агенты её сообщают.
• Первое отрисованное содержимое (FCP): Время, когда первый фрагмент текстового или графического контента DOM отрисован.

Третью ключевую временную метку рисования предоставляет API LargestContentfulPaint:

• Самое большое отрисованное содержимое (LCP): Время рендеринга самого большого изображения или блока текста, видимого в области просмотра, зафиксированное с момента начала загрузки страницы.

Предоставляемые данным API данные помогают вам минимизировать время ожидания пользователями, пока на странице не начнёт отображаться содержимое. Уменьшение времени до этих ключевых моментов рисования делает сайты более отзывчивыми, производительными и привлекательными для пользователей.

Как и другие API производительности, этот API расширяет PerformanceEntry.

У этого интерфейса нет свойств, но он расширяет следующие свойства PerformanceEntry, квалифицируя и ограничивая свойства следующим образом:

PerformanceEntry.entryType

Возвращает "paint".

PerformanceEntry.name

Возвращает либо "first-paint" либо "first-contentful-paint".

PerformanceEntry.startTime

Возвращает timestamp момент рисования.

PerformanceEntry.duration

Возвращает 0.

У этого интерфейса нет методов.

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

const observer = new PerformanceObserver((list) => {
  list.getEntries().forEach((entry) => {
    console.log(
      `The time to ${entry.name} was ${entry.startTime} milliseconds.`,
    );
    // Logs "The time to first-paint was 386.7999999523163 milliseconds."
    // Logs "The time to first-contentful-paint was 400.6999999284744 milliseconds."
  });
});

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

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

const entries = performance.getEntriesByType("paint");
entries.forEach((entry) => {
  console.log(`The time to ${entry.name} was ${entry.startTime} milliseconds.`);
  // Logs "The time to first-paint was 386.7999999523163 milliseconds."
  // Logs "The time to first-contentful-paint was 400.6999999284744 milliseconds."
});

• LargestContentfulPaint