Wie bekommt man die erste Farbe der Seite

Question

Während es einfach genug ist, firstPaint mal von Dev-Tools zu bekommen, gibt es eine Möglichkeit, das Timing von JS zu bekommen?

Answer 1

Ja, das ist Teil der paint timing API.

Sie wollen wahrscheinlich das Timing für first-contentful-paint, mit der Sie mit bekommen können:

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`); 

Answer 2

Kürzlich neuen Browser-APIs wie PerformanceObserver und PerformancePaintTiming haben es leichter gemacht Erste gehalt Paint (FCP) von Javascript abzurufen.

machte ich eine JavaScript-Bibliothek namens Perfume.js die

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

Ich weiß, Sie über First Paint (FP) gebeten, mit wenigen Zeilen Code funktioniert würden, sondern mit Ersten gehalt Paint (FCP) vorschlagen.

Der wesentliche Unterschied zwischen den beiden Metriken ist FP den Punkt markiert, wenn der Browser etwas macht, die von optisch anders ist, was auf dem Bildschirm zur Navigation vor war. Im Gegensatz dazu ist FCP der Punkt , wenn der Browser das erste Bit des Inhalts aus dem DOM rendert, das Text, ein Bild, SVG oder sogar ein Canvas-Element sein kann.