From 48a326c0d47c8f49eb50706420a33bfcbe24f2c7 Mon Sep 17 00:00:00 2001 From: tristantheb Date: Sun, 11 Apr 2021 09:03:44 +0200 Subject: L10N: Translation of all Performance APIs/Interfaces/Properties/Methods (#232) * L10N: Translation of the Performance API pages * L10N: Translation of the Performance Timeline API pages * Fix typo, style and KS elements * UPDATE: Update content of code blocks with the Guideline * L10N: Translation of the PerformanceElementTiming pages * L10N: Translation of the PerformanceEntry pages * L10N: Translation of the PerformanceEventTiming interface * L10N: Translation of the PerformanceFrameTiming interface * L10N: Translation of the PerformanceLongTaskTiming interface * L10N: Translation of the PerformanceMark interface * L10N: Translation of the PerformanceMeasure interface * L10N: Translation of the PerformanceNavigation interface * L10N: Translation of the PerformanceNavigationTiming interface * L10N: Translation of the PerformanceObserver interface * L10N: Translation of the PerformanceObserverEntryList interface * L10N: Translation of the PerformancePaintTiming interface * L10N: Translation of the PerformanceResourceTiming interface * L10N: Translation of the PerformanceServerTiming interface * L10N: Translation of the PerformanceTiming interface * FIX: Fix KS error on PerformanceTiming interface * FIX: Change some summary and typo * FIX: Fix CSS and sentences on PerformanceObserverEntryList interface * FIX: Update KS + Change {{event()}} by link on PerformanceEventTiming interface * Review - Landing page * Review 'using' page - rm domxref * Perforamance_timeline review: rm domxref, minor rewording, missing translation * Review timeline guide page, rm domxref, rm vars in pre * Review - PerformanceElementTiming - rm domxref + trailing spaces * Review - PerformanceElementTiming.id - rm xref macros + trailing spaces * Review - PerformanceElementTiming.identifier - rm xref macros + trailing spaces * Review - PerformanceElementTiming - rm xref macros + trailing spaces * Review - PET.intersectionrect - rm domxref / minor typos * Undo spec table mixup * Review - loadTime - rm domxref * Review - naturalheight - rm domxref / trailing spaces * Review - naturalwidth - rm domxref / trailing spaces * Review - renderTime - rm domxref / trailing spaces / minor rewordings * Review - tojson - rm domxref / trailing spaces * Review - url - rm domxref / trailing spaces * Review - duration - rm domxref / minor rewordings * Review - entryType - rm domxref / minor rewordings * Review - performanceentry index - rm domxref / minor rewordings * Review PerformanceEntry.name - rm xref macros * Review PerformanceEntry.startTime - rm xref macros * Review PerformanceEntry.toJSON - rm xref macros * Review PerformanceEventTiming - rm domxref * Review PerformanceFrameTiming - rm xref macros * Review PerformanceLongTaskTiming.attribution - rm xref macros * Review PerformanceLongTaskTiming - rm xref macros * Review - PerformanceMark - rm domxref * Review - PerformanceMeasure - rm domxref * Review - PerformanceNavigation - rm domxref * Review - PerformanceNavigation.redirectcount - rm domxref * Review - PerformanceNavigation.type - rm domxref * Review - PerformanceNavigationTiming.domComplete - rm domxref * Review - PerformanceNavigationTiming.domContentLoadedEvent - rm domxref * Review - PerformanceNavigationTiming.domContentLoadedEventStart - rm domxref * Review - PerformanceNavigationTiming.domInteractive - rm domxref * Review - PerformanceNavigationTiming - rm domxref * Review - PerformanceNavigationTiming.loadEventEnd - rm domxref * Review - PerformanceNavigationTiming.loadEventStart - rm domxref * Review - PerformanceNavigationTiming.redirectCount - rm domxref * Review - PerformanceNavigationTiming.toJSON - rm domxref * Review - PerformanceNavigationTiming.type - rm domxref * Review - PerformanceNavigationTiming.unloadEventEnd - rm domxref * Review - PerformanceNavigationTiming.unloadEventStart - rm domxref * Remove DOMxRef for PerformanceTiming * Remove DOMxRef for PerformanceServerTiming * Remove DOMxRef for PerformanceResourceTiming * Review - PerformanceObserver.disconnect - rm domxref * Review - PerformanceObserver - rm domxref * Review - PerformanceObserver.observe - rm domxref * Review - PerformanceObserver.PerformanceObserver() - rm domxref * Review - PerformanceObserver.takeRecords() - rm domxref * Review - PerformanceObserverEntryList.getEntries() - rm domxref * Review - PerformanceObserver.getEntriesByName() - rm domxref * Review - PerformanceObserver.getEntriesByType() - rm domxref * Review - PerformanceObserverEntryList - rm domxref * Review - PerformanceResourceTiming.connectEnd - rm domxref * Review - PerformanceResourceTiming.connectStart * Review - PerformanceResourceTiming.decodedBodySize * Review - PerformanceResourceTiming.domainLookupEnd * Review - PerformanceResourceTiming.domainLookupStart * Review - PerformanceResourceTiming.encodedBodySize * Review - PerformanceResourceTiming.fetchStart * Review - PerformanceResourceTiming * Review - PerformanceResourceTiming.iniatorType * Review - PerformanceResourceTiming.nextHopProtocol * Review - PerformanceResourceTiming.redirectEnd * Review - PerformanceResourceTiming.redirectStart * Review - PerformanceResourceTiming.requestStart * Review - PerformanceResourceTiming.responseEnd * Review - PerformanceResourceTiming.responseStart * Review - PerformanceResourceTiming.secureConnectionStart * Review - PerformanceResourceTiming.toJSON() * Review - PerformanceResourceTiming.transferSize * Review - PerformanceResourceTiming.workerStart * Review - PerformanceServerTiming.description * Review - PerformanceServerTiming.duration * Review - PerformanceServerTiming * Review - PerformanceServerTiming.name * Review - PerformanceServerTiming.toJSON() * Review - PerformanceTiming.domComplete - rm Event * Review - PerformanceTiming.domContentLoadedEventStart - rm Event * Review - PerformanceTiming.domInteractive - rm Event * Review - PerformanceTiming.domLoading - rm Event * Review - PerformanceTiming - minor typos + thead spec * Review - PerformanceTiming.loadEventEnd - rm Event * Review - PerformanceTiming.loadEventStart - rm Event * Review - PerformanceTiming.unloadEventEnd - rm Event * Review - PerformanceTiming.unloadEventStart - rm Event * Remove final domxref / rm var in examples Co-authored-by: julieng --- files/fr/web/api/performanceeventtiming/index.html | 170 +++++++++++++++++++++ 1 file changed, 170 insertions(+) create mode 100644 files/fr/web/api/performanceeventtiming/index.html (limited to 'files/fr/web/api/performanceeventtiming') diff --git a/files/fr/web/api/performanceeventtiming/index.html b/files/fr/web/api/performanceeventtiming/index.html new file mode 100644 index 0000000000..083b200b42 --- /dev/null +++ b/files/fr/web/api/performanceeventtiming/index.html @@ -0,0 +1,170 @@ +--- +title: PerformanceEventTiming +slug: Web/API/PerformanceEventTiming +tags: + - API + - Event Timing API + - Interface + - Performance + - PerformanceEventTiming + - Reference + - Performance Web +translation_of: Web/API/PerformanceEventTiming +--- +
{{APIRef("Event Timing API")}}
+ +

L'interface PerformanceEventTiming des événements de l'Event Timing API fournit des informations de chronométrage pour les types d'événements énumérés ci-dessous.

+ +
+ +
+ +

Propriétés

+ +
+
PerformanceEventTiming.processingStart lecture seule {{ExperimentalBadge}}
+
Retourne un DOMHighResTimeStamp représentant l'heure à laquelle la diffusion des événements a commencé.
+
PerformanceEventTiming.processingEnd lecture seule {{ExperimentalBadge}}
+
Retourne un DOMHighResTimeStamp représentant l'heure à laquelle la diffusion de l'événement s'est terminée.
+
PerformanceEventTiming.cancelable lecture seule {{ExperimentalBadge}}
+
Retourne un Boolean représentant l'attribut annulable de l'événement associé.
+
PerformanceEventTiming.target lecture seule {{NonStandardBadge}}
+
Retourne un Node représentant la dernière cible de l'événement associé, si elle n'est pas supprimée.
+
+ +

Méthodes

+ +
+
PerformanceEventTiming.toJSON() {{ExperimentalBadge}}
+
Convertit l'objet PerformanceEventTiming en JSON.
+
+ +

Exemples

+ +

L'exemple suivant montre comment utiliser l'API pour tous les événements :

+ +
const observer = new PerformanceObserver(function(list) {
+  const perfEntries = list.getEntries().forEach(entry => {
+    // Durée totale
+    const inputDuration = entry.duration;
+    // Retard d'entrée (avant l'événement de traitement)
+    const inputDelay = entry.processingStart - entry.startTime;
+    // Temps de traitement d'un événement synchrone (entre le début et la fin de la diffusion).
+    const inputSyncProcessingTime = entry.processingEnd - entry.processingStart;
+  });
+});
+// Enregistre un observateur pour l'événement.
+observer.observe({entryTypes: ["event"]});
+
+ +

Nous pouvons également interroger directement le premier délai d'entrée. Le premier délai d'entrée ou « FID : First input delay », mesure le temps entre le moment où un utilisateur interagit pour la première fois avec une page (c'est-à-dire lorsqu'il clique sur un lien ou sur un bouton) et le moment où le navigateur est effectivement en mesure de commencer à traiter les gestionnaires d'événements en réponse à cette interaction.

+ +
// Pour savoir si (et quand) la page a été masquée pour la première fois, voir :
+// https://github.com/w3c/page-visibility/issues/29
+// NOTE : idéalement, cette vérification devrait être effectuée dans le <head> du document
+// pour éviter les cas où l'état de visibilité change avant l'exécution de ce code.
+let firstHiddenTime = document.visibilityState === 'hidden' ? 0 : Infinity;
+document.addEventListener('visibilitychange', (event) => {
+  firstHiddenTime = Math.min(firstHiddenTime, event.timeStamp);
+}, {once: true});
+
+// Envoie les données transmises à un point de terminaison analytique. Ce code
+// utilise `/analytics` ; vous pouvez le remplacer par votre propre URL.
+function sendToAnalytics(data) {
+  const body = JSON.stringify(data);
+  // Utilise `navigator.sendBeacon()` si disponible, en revenant à `fetch()`.
+  (navigator.sendBeacon && navigator.sendBeacon('/analytics', body)) ||
+      fetch('/analytics', {body, method: 'POST', keepalive: true});
+}
+
+// Utilise un try/catch au lieu de la fonction de détection de la prise en charge de `first-input`
+// car certains navigateurs lancent des requêtes lorsqu'ils utilisent la nouvelle option `type`.
+// https://bugs.webkit.org/show_bug.cgi?id=209216
+try {
+  function onFirstInputEntry(entry) {
+    // Ne rapporte le FID que si la page n'était pas cachée avant que
+    // l'entrée soit envoyée. Cela se produit généralement lorsqu'une
+    // page est chargée dans un onglet en arrière-plan.
+    if (entry.startTime < firstHiddenTime) {
+      const fid = entry.processingStart - entry.startTime;
+
+      // Rapporte la valeur du FID à un terminal d'analyse.
+      sendToAnalytics({fid});
+    }
+  }
+
+  // Crée un PerformanceObserver qui appelle `onFirstInputEntry` pour chaque entrée.
+  const po = new PerformanceObserver((entryList) => {
+    entryList.getEntries().forEach(onFirstInputEntry);
+  });
+
+  // Observe les entrées de type `first-input`, y compris les entrées en mémoire tampon,
+  // c'est-à-dire les entrées qui ont eu lieu avant d'appeler `observe()` ci-dessous.
+  po.observe({
+    type: 'first-input',
+    buffered: true,
+  });
+} catch (e) {
+  // Ne fait rien si le navigateur ne prend pas en charge cette API.
+}
+
+ +

Spécifications

+ + + + + + + + + + + + + + + + +
SpécificationStatutCommentaire
{{SpecName('Event Timing API','#sec-performance-event-timing','PerformanceEventTiming')}}{{Spec2('Event Timing API')}}Définition initiale.
+ +

Compatibilité des navigateurs

+ +

{{Compat("api.PerformanceEventTiming")}}

-- cgit v1.2.3-54-g00ecf