Att bryta Ner resultatet API

0
88

JavaScript-Prestanda API är klokt, eftersom det händer över verktyg för att noggrant mäta resultatet av webbsidor, vilka, trots att de utförts sedan långt innan, aldrig riktigt blev lätt eller tillräckligt exakta.

Som sagt, det är inte så lätt att komma igång med API som det är att faktiskt använda den. Även om jag har sett en förlängning av det som avhandlas här och där i andra inlägg, den stora bilden som binder allt samman är svårt att hitta.

En titt på alla dokument som förklarar den totala prestanda, gränssnitt (åtkomstpunkten för Prestanda API) och du kommer att bombarderas med en massa andra specifikationer, inklusive en högupplöst Tid API, Prestanda Tidslinje API och Navigering API bland vad som känns som många, många andra. Det är tillräckligt att göra som det övergripande begreppet mer än lite förvirrande om vad exakt API är att mäta men, ännu viktigare, gör det lätt att förbise de särskilda godsaker som vi får med det.

Här är en illustration av hur alla dessa bitar att passa ihop. Detta kan vara super förvirrande, så att ha en visuell kan bidra till att klargöra vad vi talar om.

Prestanda API innehåller Prestanda Tidslinje API och tillsammans utgör de en rad olika metoder för att hämta användbart mått på Web-sidan prestanda.

Låt oss gräva i, ska vi?

Hög Upplösning i Tid API

Prestanda gränssnittet är en del av den högupplösta Tid API.

“Vad är högupplöst Tid?” frågar du kanske. Det är ett viktigt begrepp som vi inte kan förbise.

En tid baserat på Datum är korrekt millisekund. En hög upplösning i tid, å andra sidan, är precis upp till fraktioner av millisekunder. Det är ganska exakt, vilket gör det perfekt för framställning av noggranna mätningar av tid.

Det är värt att påpeka att en hög upplösning i tid mätt med User Agent (UA) ändras inte med några förändringar i systemet eftersom det är taget från en global, allt monoton klocka som skapats av UA. Den tid som alltid ökar, och inte kan tvingas att minska. Det blir en bra begränsning för tidpunkt för mätning.

Varje gång en mätning mäts i Prestation API är en hög upplösning i tid. Inte bara gör att det är en super exakt sätt att mäta prestanda, men det är också det som gör det API som en del av den högupplösta Tid API och varför ser vi de två som ofta nämns tillsammans.

Prestanda Tidslinje API

Prestanda Tidslinje API är en förlängning av Prestanda API. Det innebär att där resultatet API är en del av den högupplösta Tid API, Prestanda Tidslinje API är en del av resultatet API.

Eller, för att uttrycka det mer koncist:

Hög Upplösning i Tid API
└── Prestanda API
└── Prestanda Tidslinje API

Prestanda Tidslinje API ger oss tillgång till nästan alla mätningar och värderingar som vi möjligen kan komma från hela föreställningen API sig. Det är en massa information på våra fingertoppar med ett enda API och varför diagrammet i början av denna artikel visar dem nästan på samma plan som något annat.

Det finns många tillägg av Prestanda API. Var och en avkastning-relaterade poster och alla av dem kan nås och även filtreras genom Prestanda Tidslinjen, vilket gör detta till ett måste-läs-API för den som vill komma igång med mätningar. De är så nära förbundna med varandra och kompletterar varandra att det är vettigt att vara bekant med båda.

Följande är tre metoder för Utförandet Tidslinje API som ingår i prestanda gränssnitt:

  • getEntries()
  • getEntriesByName()
  • getEntriesByType()

Varje metod som returnerar en lista av (valfritt filtrerat) resultat poster som samlats in från alla andra tillägg av Prestanda API och vi kommer att få mer bekant med dem när vi går.

En annan viktig gränssnitt som ingår i API är PerformanceObserver. Det klockor för en ny post i en lista av poster resultat, och meddelar om samma sak. Ganska praktiskt för övervakning i realtid!

Prestanda Poster

De saker som vi mäter med Prestanda API kallas “poster” och de alla erbjuder en hel del insikt i Webb-prestanda.

Nyfiken på vad de är? MDN har en full lista som sannolikt kommer att uppdateras när nya artiklar publiceras, men detta är vad vi har för närvarande:

Inlägg
Vad det Mäter
Förälder API
ram Åtgärder ramar, som utgör en slinga av den mängd arbete en webbläsare måste göra för att behandla saker som DOM händelser, ändra storlek på, bläddra och CSS-animationer. Ram Timing API
mark Skapar en tidsstämpel i prestanda tidslinje som ger värden för namn, starttid och varaktighet. User Timing (API
mått Liknande för att markera att de är punkter på tidslinjen, men de är uppkallade efter dig och placeras mellan märken. I grund och botten, de är en mittpunkt mellan märken med inga egna namn värde. User Timing (API
navigering Ger sammanhang för lasten, såsom vilka typer av händelser som inträffar. Navigation Timing API
färg Rapporter stunder när bildpunkter visas på skärmen, till exempel de första måla, först måla med innehåll, start-tid och total tid. Måla Timing API
resurs Åtgärder för fördröjning av beroenden för att göra skärmen, som bilder, skript och stilmallar. Det är där caching gör skillnad! Resurs Timing API

Låt oss titta på ett par exempel för att illustrera hur varje API ser i bruk. För att lära dig mer ingående om dem, du kan kolla in de specifikationer som är kopplade upp i tabellen ovan. Ramen Timing API är fortfarande fungerar.

Måla Timing API, bekvämt, har redan behandlats grundligt på CSS-Tricks, men här är ett exempel på att dra tidsstämpel för när målning börjar:

// Tid när sidan började att göra
konsolen.log(prestanda.getEntriesByType(‘färg’)[0].startTime)

Den User Timing (API kan mäta resultatet för utvecklare skript. Till exempel, säga att du har kod som validerar en uppladdad fil. Vi kan mäta hur lång tid det tar att utföra:

// Med tid att trösta-skriv “hej”
// Vi kan också använda sig av “performance.mått()” för att mäta tid
// i stället för att beräkna skillnaden mellan markeringarna i den sista raden.
prestanda.mark(“)
konsolen.logga in (“hej”)
prestanda.mark(“)
var markerar = prestanda.getEntriesByType(‘markera’)
console.info(`Tid tog det för att säga hej ${markerar[1].starttid – marks[0].startTime}`)

Den Navigation Timing API visar statistik för att läsa in den aktuella sidan, statistik även från när lossningen av den föregående sida ägde rum. Vi kan mäta med en ton av precision för exakt hur lång tid en aktuell sida tar att ladda:

// Tid för att slutföra DOM innehållet laddas händelse
var navEntry = prestanda.getEntriesByType(‘navigation’)[0]
konsolen.log(navEntry.domContentLoadedEventEnd – navEntry.domContentLoadedEventStart)

Den Resurs Timing API är liknande till Navigation Timing API, att det mäter laddningstider, utom den mäter alla värden för lastning begärda resurser för en aktuell sida, snarare än den aktuella sidan i sig. Till exempel, vi kan mäta hur lång tid det tar för en bild som lagras på en annan server, såsom en CDN, för att ladda om sidan:

// Svar tid av resurser
prestanda.getEntriesByType (“resurs”).forEach((r) => {
konsolen.logga in (“svar tid för ${r.namn}: ${r.responseEnd – r.responseStart}`);
});

Navigering Anomali

Vill du höra en intressant godbit om Navigation Timing API?

Det var tänkt innan föreställningen Tidslinje API. Det är därför, även om du kan få tillgång till vissa navigering värden med hjälp av Prestanda Tidslinje API (genom att filtrera navigering inlägg-typ), Navigation Timing API själv har två gränssnitt som är direkt sträckte sig från Prestanda API:

  • prestanda.timing
  • prestanda.navigering

Alla värden som tillhandahålls av prestanda.navigering kan tillhandahållas av navigering poster av Prestanda Tidslinje API. Som för de mått du hämta från prestanda.tidpunkten, dock, endast en del är tillgänglig från föreställningen Tidslinje API.

Som ett resultat, vi använder prestanda.timing för att få den navigering värden för den aktuella sidan i stället för att använda Performance Tidslinje API via prestanda.getEntriesByType(“navigation”):

// Och då från början av navigering till den aktuella sidan till slutet av sin last händelse
addEventListener(‘load’, () => {
med(prestanda.tidpunkten)
konsolen.log(navigationStart – loadEventEnd);
})

Låt oss slå Upp Detta

Jag skulle säga är din bästa insats för att komma igång med Prestanda API är att börja med att bekanta dig med den prestanda inlägg typer och deras attribut. Detta kommer att få dig att snabbt bekanta sig med slutresultatet av alla Api: er—och den makt detta API för att mäta prestanda.

Som en andra åtgärd, få veta hur resultatet Tidslinje API sonder i alla de tillgängliga statistik. Som vi berört, de två är nära besläktade och samspelet mellan de två kan öppna upp intressanta och användbara metoder för mätning.

Vid denna punkt, du kan göra ett drag mot att behärska konsten att sätta andra utökat Api: er för att använda. Det är där allt kommer samman och man äntligen får se en fullständig bild av hur alla dessa Api: er, metoder och poster är sammankopplade.