Het afbreken van de Prestaties van de API

0
68

JavaScript Prestaties API is verstandig, omdat het handen over tools om het nauwkeurig meten van de prestaties van de Web pagina ‘ s, die, in weerwil van het feit dat zijn uitgevoerd sinds lang voor, nooit echt werd gemakkelijk of nauwkeurig genoeg.

Dat gezegd hebbende, het is niet zo makkelijk aan de slag met de API als het is om daadwerkelijk te gebruiken. Hoewel ik heb gezien uitbreidingen van het overdekte hier en daar in andere berichten, het grote beeld dat aansluit alles samen is moeilijk te vinden.

Een blik op een document waarin de globale prestaties van de interface (het toegangspunt voor de Prestaties API) en u zult worden bestookt met een hele reeks andere specificaties, met inbegrip van Hoge-Resolutie API, Prestaties Tijdlijn API en de Navigatie API onder wat voelt als vele, vele anderen. Het is genoeg om het overkoepelende concept van meer dan een beetje verwarrend wat nu precies de API is meten, maar, nog belangrijker, het gemakkelijk over het hoofd specifieke goodies die we krijgen.

Hier is een illustratie van hoe al deze stukken in elkaar passen. Dit kan heel verwarrend zijn, dus met een visuele kunt helpen verduidelijken wat we het over hebben.

De Prestaties van de API bevat de Prestaties van de Tijdlijn API, en samen vormen ze een breed scala van methoden die fetch nuttige gegevens op de Web pagina van de prestaties.

Laten we graven in, zullen we?

Hoge Resolutie API

De prestaties van de interface is een deel van de Hoge Resolutie van de API.

“Wat is Hoge Resolutie Tijd?” vraag je je misschien af. Dat is een belangrijk concept kunnen we niet over het hoofd zien.

Een tijd op basis van de Datum is nauwkeurig tot op de milliseconde. Een hoge resolutie in de tijd, aan de andere kant, is nauwkeurig tot op fracties van milliseconden. Dat is behoorlijk nauwkeurig, waardoor het ideaal is voor opbrengst van nauwkeurige metingen van de tijd.

Het is de moeite waard erop te wijzen dat een hoge resolutie in tijd gemeten door de User Agent (UA) verandert niet met eventuele wijzigingen in de systeem-tijd, omdat het is genomen uit een wereldwijde, steeds meer monotone klok gemaakt door de UA. De tijd altijd verhoogt en kunnen niet gedwongen worden te verminderen. Dat wordt een nuttig beperking voor het meten.

Elke keer meting gemeten in de Prestaties van de API is een hoge resolutie. Niet alleen dat het een super nauwkeurige manier om de prestaties te meten, maar het is ook wat maakt de API een deel van de Hoge Resolutie API en waarom zien we de twee vaak samen genoemd.

Prestaties Tijdlijn API

De Prestaties van de Tijdlijn API is een uitbreiding van de Prestaties van de API. Dat betekent dat de Prestaties van de API is een onderdeel van de Hoge Resolutie van de API, de Prestaties van de Tijdlijn API is een onderdeel van de Prestaties van de API.

Of, om het wat beknopter:

Hoge Resolutie API
└── Prestaties API
└── Prestaties Tijdlijn API

Prestaties Tijdlijn API geeft ons toegang tot bijna alle van de metingen en de waarden die we kunnen krijgen van het geheel van de Prestaties van de API zelf. Dat is een hoop informatie tot onze beschikking met een enkele API en waarom het schema aan het begin van dit artikel worden ze bijna op hetzelfde vlak als een ander.

Er zijn vele uitbreidingen van de Prestaties van de API. Elk resultaat prestatie-gerelateerde posten en alle van hen kan worden geopend en zelfs gefilterd door middel van Prestatie-Tijdlijn, waardoor dit een must-leren API voor iedereen die wil aan de slag met performance metingen. Ze zijn zo nauw verbonden en complementair aan dat het zinvol is om bekend te zijn met beide.

De volgende drie methoden van de Prestaties van de Tijdlijn API die zijn opgenomen in de prestaties van de interface:

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

Elke methode geeft als resultaat een lijst van (eventueel gefiltreerde) prestaties items verzameld van alle van de andere extensies van de Prestaties van de API en we krijgen meer kennis met hen als we gaan.

Een andere belangrijke interface inbegrepen in de API is PerformanceObserver. Deze horloges voor een nieuwe vermelding in een lijst van prestaties items en houdt van hetzelfde. Erg handig voor real-time monitoring!

De Prestaties Vermeldingen

De dingen die we meten met de Prestaties van de API worden aangeduid als “items” en ze bieden veel inzicht in de Web performance.

Benieuwd wat ze zijn? MDN heeft een volledige lijst die waarschijnlijk zal worden bijgewerkt als nieuwe items worden uitgebracht, maar dit is wat we nu hebben:

Invoer
Wat het Maatregelen
Ouder API
frame Maatregelen frames, die een lus van de hoeveelheid werk die een browser moet doen om dingen verwerken zoals DOM evenementen, vergroten, verkleinen, scrollen en CSS-animaties. Frame Timing API
mark Creëert een timestamp in de prestaties van de tijdlijn die de waarden voor een naam, tijdstip van aanvang en duur. Gebruiker Timing API
maat Vergelijkbaar met mark in dat ze punten op de tijdlijn, maar ze zijn genoemd naar u en geplaatst tussen aanhalingstekens. Eigenlijk, zijn ze een ontmoeting tussen de merken met geen aangepaste naam waarde. Gebruiker Timing API
navigatie Biedt een context voor de belasting werking, zoals de soorten van gebeurtenissen die zich voordoen. Navigation Timing API
verf Rapporten momenten wanneer pixels worden weergegeven op het scherm, zoals de eerste verf, eerste lak met inhoud, de starttijd en de totale duur. Verf Timing API
bron Meet de latentie van de afhankelijkheden voor de weergave van het scherm, zoals afbeeldingen, scripts en stylesheets. Dit is waar caching maakt een verschil! Bron Timing API

Laten we eens kijken naar een paar voorbeelden die illustreren hoe elke API ziet in gebruik. Om te leren meer in de diepte over hen, kunt u de specificaties aan elkaar gekoppeld in de bovenstaande tabel. Het Frame Timing API is nog in de maak.

Verf Timing API, gunstig, al is bedekt grondig op CSS-Tricks, maar hier is een voorbeeld van het trekken van het tijdstempel bij het schilderen begint:

// De tijd wanneer de pagina begon te renderen
console.log(prestaties.getEntriesByType(‘verf’)[0].starttijd)

De Gebruiker Timing API kunnen meten van de prestaties voor de ontwikkelaar scripts. Bijvoorbeeld, zeggen dat je de code van die valideert een geüpload bestand. We meten hoe lang die het duurt om uit te voeren:

// Tijd om het console-print “hallo”
// We kunnen ook gebruik maken van de “prestaties.maatregel()” om de tijd te meten
// in plaats van het berekenen van het verschil tussen de markeringen in de laatste regel.
de prestaties.mark(“)
console.log(‘hallo’)
de prestaties.mark(“)
var markeert = prestaties.getEntriesByType(‘merk’)
console.info(`de Tijd nam om te zeggen ” hallo ${tekens[1].starttijd – tekens[0].starttijd}`)

De Navigation Timing API toont statistieken voor het laden van de huidige pagina, gegevens, zelfs wanneer de lossen van de vorige pagina heeft plaatsgevonden. Kunnen We meten met een ton van precisie voor precies hoe lang een huidige pagina duurt om te laden:

// Tijd voor het invullen van DOM inhoud geladen gebeurtenis
var navEntry = prestaties.getEntriesByType(‘navigatie’)[0]
console.log(navEntry.domContentLoadedEventEnd – navEntry.domContentLoadedEventStart)

De Bron Timing API is vergelijkbaar met Navigation Timing van de API in dat het maatregelen laadtijden, behalve dat het maatregelen van alle cijfers voor het laden van de gevraagde middelen van de huidige pagina, in plaats van de huidige pagina. Zo kunnen we meten hoe lang het duurt voor een afbeelding die wordt gehost op een andere server, zoals een CDN, aan de belasting op de pagina:

// Reactie tijd van de middelen
de prestaties.getEntriesByType(‘resource’).forEach((r) => {
console.log(`response tijd van ${r.naam}: ${r.responseEnd – r.responseStart}`);
});

De Navigatie Anomalie

Wil horen een interessant stukje info over de Navigation Timing API?

Het werd bedacht voor de Prestaties van de Tijdlijn API. Dat is de reden waarom, hoewel u toegang tot wat navigatie van gegevens met behulp van het Performance Tijdlijn API (door het filteren van de navigatie-optie), de Navigatie Timing API zelf heeft twee interfaces die direct verlengde van de Prestaties van de API:

  • de prestaties.timing
  • de prestaties.navigatie

Alle gegevens die door prestaties.de navigatie kan worden verstrekt door de navigatie-items van de Prestaties van de Tijdlijn API. Als voor de gegevens die u worden opgehaald van de prestaties.timing, maar slechts enkele zijn toegankelijk vanaf de Prestatie Tijdlijn API.

Als een resultaat hiervan is dat we gebruik maken van prestaties.timing om de navigatie gegevens voor de huidige pagina in plaats van de Prestatie Tijdlijn API via prestaties.getEntriesByType(“navigation”):

// De tijd vanaf de start van de navigatie naar de huidige pagina tot aan het eind van de gebeurtenis load
addEventListener(‘load’, () => {
met(performance.timing)
console.log(navigationStart – loadEventEnd);
})

Laat de Wrap-Up

Ik zou zeggen: uw beste weddenschap voor u aan de slag met de Prestaties van de API is om te beginnen door het vertrouwd raken met alle voor de uitvoering vermelding soorten en hun kenmerken. Zo krijgt u snel vertrouwd zijn met het eind resultaat van alle Api ‘ s van—en de kracht van deze API biedt voor het meten van de prestaties.

Als een tweede cursus van actie, om te weten hoe de Prestaties van de Tijdlijn API sondes in al die beschikbare gegevens. Als we vallen, de twee zijn nauw verwant en het samenspel tussen de twee kan leiden tot interessante en nuttige methoden van meting.

Op dat moment, je kunt een stap in de richting van het beheersen van de kunst van het zetten van de andere uitgebreide Api ‘ s te gebruiken. Dat is waar alles bij elkaar komt en je krijgt eindelijk het volledige plaatje van hoe al deze Api ‘ s, methoden en gegevens zijn met elkaar verbonden.