Хотя достаточно легко получить firstPaint
раз из инструментов dev, есть ли способ получить время от JS?
Да, это часть 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');
Недавно новые 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 или даже элементом холста.
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-приложения перед всем остальным.