L'interfacePerformancePaintTiming de l'APIPaint 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 unPerformanceObserver pour letype 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.

Propriétés

Cette interface n'a pas de propriétés mais elle étend les propriétés dePerformanceEntry suivantes (pourle 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 leDOMHighResTimeStamp du moment où la peinture s'est produite.

PerformanceEntry.duration

Retourne «0 ».

Méthodes

Cette interface n'a pas de méthodes.

Exemple

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

Compatibilité des navigateurs