Как получить время первой краски страницы

1

Хотя достаточно легко получить firstPaint раз из инструментов dev, есть ли способ получить время от JS?

Теги:
web-performance

3 ответа

3

Да, это часть API графики времени рисования.

Вероятно, вам нужны сроки для first-contentful-paint, которую вы можете использовать:

const paintTimings = performance.getEntriesByType('paint');
const fmp = paintTimings.find(({ name }) => name === "first-contentful-paint");
enter code here
console.log('First contentful paint at ${fmp.startTime}ms');
1

Недавно новые API-интерфейсы браузеров, такие как PerformanceObserver и PerformancePaintTiming, упростили загрузку первой контентной краски (FCP) с помощью Javascript.

Я создал библиотеку JavaScript под названием Perfume.js, которая работает с несколькими строками кода

const perfume = new Perfume({
  firstContentfulPaint: true
});
// ️ Perfume.js: First Contentful Paint 2029.00 ms

Я понимаю, что вы спросили о First Paint (FP), но предложили бы использовать First Contentful Paint (FCP).

Основное различие между двумя метриками - это FP, указывающий точку, когда браузер отображает все, что визуально отличается от того, что было на экране перед навигацией. Напротив, FCP - это точка, когда браузер отображает первый бит контента из DOM, который может быть текстом, изображением, SVG или даже элементом холста.

0
if(typeof(PerformanceObserver)!=='undefined'){ \\if browser is supporting
const observer = new PerformanceObserver((list) => {
for (const entry of list.getEntries()) {
     console.log(entry.entryType);
     console.log(entry.startTime);
     console.log(entry.duration);
   }
  });
  observer.observe({entryTypes: ['paint']});
}


это поможет вам просто вставить этот код в начало вашего js-приложения перед всем остальным.

Ещё вопросы

Сообщество Overcoder
Наверх
Меню