PerformancePaintTiming

L'interface PerformancePaintTiming de l'API Paint Timing API fournit des informations de temps sur les opérations de « peinture » (également appelées « render ») pendant la construction de la page Web. « Paint » fait référence à la conversion de l'arbre de rendu en pixels à l'écran.

Une application peut enregistrer un PerformanceObserver pour le type d'entrée de performance « paint » et l'observateur peut récupérer les heures auxquelles les événements de peinture se produisent. Utilisez ces informations pour aider à identifier les zones qui prennent trop de temps pour offrir une bonne expérience utilisateur.

PerformanceEntry PerformancePaintTiming

Propriétés

Cette interface n'a pas de propriétés mais elle étend les propriétés de PerformanceEntry suivantes (pour le type d'entrée de performance « paint ») en qualifiant/contraignant les propriétés comme suit :

PerformanceEntry.entryType

Retourne « paint ».

PerformanceEntry.name

Retourne soit "first-paint" ou "first-contentful-paint".

PerformanceEntry.startTime

Retourne le DOMHighResTimeStamp du moment où la peinture s'est produite.

PerformanceEntry.duration

Retourne « 0 ».

Méthodes

Cette interface n'a pas de méthodes.

Exemple

js
function showPaintTimings() {
  if (window.performance) {
    let performance = window.performance;
    let performanceEntries = performance.getEntriesByType("paint");
    performanceEntries.forEach((performanceEntry, i, entries) => {
      console.log(
        "Le temps pour " +
          performanceEntry.name +
          " est de " +
          performanceEntry.startTime +
          " millisecondes.",
      );
    });
  } else {
    console.log("Performance Timing n'est pas prise en charge.");
  }
}

Le code ci-dessus produit une sortie de console semblable à ce qui suit :

Le temps pour first-paint est de 2785.915 millisecondes.
Le temps pour first-contentful-paint est de 2787.460 millisecondes.

Spécifications

Specification
Paint Timing
# sec-PerformancePaintTiming

Compatibilité des navigateurs

Report problems with this compatibility data on GitHub
desktopmobile
Chrome
Edge
Firefox
Opera
Safari
Chrome Android
Firefox for Android
Opera Android
Safari on iOS
Samsung Internet
WebView Android
WebView on iOS
PerformancePaintTiming
first-contentful-paint named entry
first-paint named entry

Legend

Tip: you can click/tap on a cell for more information.

Full support
Full support
No support
No support