JavaScript Performance API: Mestring af indsamling af kørselsmetrikker

I nutidens hurtige digitale verden er ydeevnen for hjemmesider og webapplikationer altafgørende. Brugere forventer øjeblikkelig respons og problemfri oplevelser. Langsomme indlæsningstider eller træge interaktioner kan føre til frustration og i sidste ende, at brugerne forlader siden. For at sikre optimal ydeevne har udviklere brug for værktøjer til at måle, analysere og forbedre kørselsadfærden for deres JavaScript-kode. JavaScript Performance API'et giver en kraftfuld og standardiseret måde at indsamle kørselsmetrikker på, hvilket gør det muligt for udviklere at identificere ydeevneflaskehalse og optimere deres applikationer for en mere jævn brugeroplevelse.

Hvad er JavaScript Performance API?

JavaScript Performance API er en samling af grænseflader og metoder, der er tilgængelige i moderne webbrowsere, som giver udviklere mulighed for at tilgå og måle forskellige ydeevnerelaterede data. Det giver indsigt i forskellige aspekter af kørselsadfærd, herunder:

• Navigation Timing: Måler den tid, det tager for forskellige stadier af sideindlæsning, såsom DNS-opslag, TCP-forbindelse, anmodnings- og svartider.
• Resource Timing: Giver detaljerede tidsoplysninger for individuelle ressourcer, der indlæses af siden, såsom billeder, scripts og stylesheets.
• User Timing: Giver udviklere mulighed for at definere og måle brugerdefinerede ydeevnemetrikker, der er specifikke for deres applikations logik.
• Long Tasks: Identificerer opgaver, der blokerer hovedtråden i en længere periode, hvilket potentielt kan forårsage frysninger i brugergrænsefladen (UI).
• Memory Measurement: (Tilgængelig i nogle browsere) Giver oplysninger om sidens hukommelsesforbrug.
• Element Timing: Giver tidsmetrikker for, hvornår specifikke HTML-elementer bliver synlige for brugeren.
• Event Timing: Måler varigheden af hændelser, såsom klik, tastetryk og andre brugerinteraktioner.

Ved at udnytte disse funktioner kan udviklere få en dyb forståelse af, hvordan deres JavaScript-kode præsterer i virkelige scenarier og identificere områder, der kan optimeres.

Nøglekomponenter i Performance API'et

1. performance-objektet

performance-objektet er det primære adgangspunkt til Performance API'et. Det er en egenskab ved window-objektet og giver adgang til forskellige metoder og egenskaber til at måle og analysere ydeevnedata. De mest almindeligt anvendte egenskaber er performance.timing og performance.now().

2. performance.now()

performance.now() returnerer et tidsstempel med høj opløsning (i millisekunder), der repræsenterer den forløbne tid siden dokumentets navigationsstart. Det er grundlaget for at måle varigheden af kodeudførelse. I modsætning til Date.now() er performance.now() monoton, hvilket betyder, at den ikke påvirkes af justeringer af systemuret.

Eksempel: Måling af en funktions eksekveringstid

            const startTime = performance.now();
// Kode, der skal måles
for (let i = 0; i < 1000000; i++) {
  // Udfør en operation
}
const endTime = performance.now();
const executionTime = endTime - startTime;
console.log(`Eksekveringstid: ${executionTime} millisekunder`);

            

              
                Copy
              
            
          

3. Performance-tidslinjen

Performance-tidslinjen er en registrering af ydeevnerelaterede hændelser, der opstår i løbet af en sides levetid. Den indeholder poster for navigation timing, resource timing, user timing og mere. Performance-tidslinjen kan tilgås ved hjælp af metoder som performance.getEntries(), performance.getEntriesByType() og performance.getEntriesByName().

4. PerformanceEntry-grænsefladen

Hver post i Performance-tidslinjen er repræsenteret af et PerformanceEntry-objekt. Denne grænseflade giver egenskaber, der beskriver ydeevnehændelsen, såsom dens navn, starttidspunkt, varighed og posttype. Forskellige typer af ydeevneposter har yderligere egenskaber, der er specifikke for deres hændelsestype.

Indsamling og analyse af kørselsmetrikker

JavaScript Performance API tilbyder en række metoder til at indsamle og analysere kørselsmetrikker. Her er nogle almindelige anvendelsesscenarier:

1. Måling af sidens indlæsningstid

performance.timing-objektet giver detaljerede oplysninger om de forskellige stadier af sidens indlæsning. Du kan bruge disse data til at identificere flaskehalse og optimere indlæsningsprocessen.

Eksempel: Beregning af DOMContentLoaded-hændelsestiden

            window.addEventListener('load', () => {
  const loadTime = performance.timing.domContentLoadedEventEnd - performance.timing.navigationStart;
  console.log(`DOMContentLoaded hændelsestid: ${loadTime} millisekunder`);
});

            

              
                Copy
              
            
          

Fortolkning af resultaterne: En høj domContentLoadedEventEnd-værdi kan indikere, at browseren bruger meget tid på at parse og eksekvere JavaScript-kode, rendere DOM'en eller vente på, at ressourcer indlæses. Analyse af de individuelle ressourcetider (se nedenfor) kan hjælpe med at udpege de specifikke ressourcer, der forårsager forsinkelser.

Optimeringsstrategier: Mulige løsninger inkluderer at udskyde eksekvering af ikke-kritisk JavaScript, optimere levering af CSS og minimere antallet af DOM-elementer.

2. Måling af ressourceindlæsningstider

Resource Timing API'et giver detaljerede tidsoplysninger for hver ressource, der indlæses af siden. Dette giver dig mulighed for at identificere langsomt indlæsende ressourcer og optimere deres levering.

Eksempel: Hentning af ressourcetidsoplysninger

            const resourceEntries = performance.getEntriesByType('resource');

resourceEntries.forEach(entry => {
  console.log(`Ressource: ${entry.name}`);
  console.log(`  Varighed: ${entry.duration} millisekunder`);
  console.log(`  Fetch Start: ${entry.fetchStart}`);
  console.log(`  Response End: ${entry.responseEnd}`);
});

            

              
                Copy
              
            
          

Fortolkning af resultaterne: Ved at undersøge duration-egenskaben for hver ressourcepost kan man identificere langsomt indlæsende ressourcer. En høj duration kan indikere netværksforsinkelse, store filstørrelser eller ineffektiv server-side-behandling.

Optimeringsstrategier: Potentielle løsninger inkluderer komprimering af billeder, minificering af JavaScript- og CSS-filer, brug af et Content Delivery Network (CDN) og optimering af server-side caching.

Globalt eksempel: En hjemmeside, der serverer billeder i høj opløsning til brugere i regioner med begrænset båndbredde (f.eks. dele af Sydøstasien, Afrika), kan opleve betydeligt langsommere indlæsningstider for disse brugere. Implementering af responsive billeder, der tilpasser sig brugerens forbindelseshastighed og skærmstørrelse, kan forbedre ydeevnen markant.

3. Måling af brugerinteraktioner

User Timing API'et giver dig mulighed for at definere og måle brugerdefinerede ydeevnemetrikker, der er specifikke for din applikations logik. Dette er nyttigt til at spore ydeevnen for kritiske brugerinteraktioner, såsom formularindsendelser, søgeforespørgsler og navigationsovergange.

Eksempel: Måling af den tid, det tager at indsende en formular

            const form = document.getElementById('myForm');

form.addEventListener('submit', (event) => {
  performance.mark('formSubmitStart');
  // Simuler forsinkelse ved formularindsendelse
  setTimeout(() => {
    performance.mark('formSubmitEnd');
    performance.measure('formSubmitDuration', 'formSubmitStart', 'formSubmitEnd');

    const measure = performance.getEntriesByName('formSubmitDuration')[0];
    console.log(`Varighed af formularindsendelse: ${measure.duration} millisekunder`);
  }, 1000); //Simuler netværksanmodning, der tager 1 sekund

  event.preventDefault();
});

            

              
                Copy
              
            
          

Fortolkning af resultaterne: En høj formSubmitDuration kan indikere langsom server-side-behandling, netværksforsinkelse eller ineffektiv validering på klientsiden.

Optimeringsstrategier: Potentielle løsninger inkluderer optimering af server-side-kode, reducering af netværksanmodninger og forbedring af validering på klientsiden.

4. Identificering af lange opgaver

Lange opgaver er opgaver, der blokerer hovedtråden i en længere periode (typisk mere end 50 millisekunder), hvilket potentielt kan forårsage frysninger i brugergrænsefladen og en dårlig brugeroplevelse. Long Tasks API'et giver dig mulighed for at identificere disse opgaver og optimere din kode for at forhindre dem.

Eksempel: Identificering af lange opgaver

            const observer = new PerformanceObserver((list) => {
  list.getEntries().forEach((entry) => {
    console.log(`Lang opgave: ${entry.name}`);
    console.log(`  Varighed: ${entry.duration} millisekunder`);
  });
});

observer.observe({ entryTypes: ['longtask'] });

// Simuler en lang opgave
setTimeout(() => {
  let sum = 0;
  for (let i = 0; i < 1000000000; i++) {
    sum += i;
  }
  console.log(`Lang opgave fuldført: ${sum}`);
}, 0);

            

              
                Copy
              
            
          

Fortolkning af resultaterne: En lang opgavevarighed fremhæver kode, der forhindrer browseren i at opdatere brugergrænsefladen jævnt.

Optimeringsstrategier: Kodesplitting, debouncing, throttling og aflastning af opgaver til web workers er strategier til at reducere varigheden af lange opgaver.

5. Måling af elementsynlighed

Element Timing API'et giver dig mulighed for at måle, hvornår specifikke HTML-elementer bliver synlige for brugeren. Dette er især nyttigt til at spore indlæsnings- og renderingsydeevnen for kritiske elementer, såsom hero-billeder eller vigtige indholdssektioner.

Eksempel: Måling af elementsynlighedstid

            <img src="hero-image.jpg" elementtiming="hero-image" id="heroImage">

const observer = new PerformanceObserver((list) => {
  list.getEntries().forEach((entry) => {
    if (entry.name === 'hero-image') {
      console.log(`Hero-billede render start: ${entry.renderStart} millisekunder`);
    }
  });
});

observer.observe({ type: 'element', buffered: true });

            

              
                Copy
              
            
          

Fortolkning af resultaterne: En sen renderStart-værdi indikerer, at elementet tager lang tid om at blive synligt, potentielt på grund af langsomme indlæsnings- eller renderingsprocesser.

Optimeringsstrategier: Optimer billedkomprimering, brug lazy loading og prioriter indlæsningen af kritiske ressourcer.

6. Måling af hændelseslatens

Event Timing API'et måler den tid, det tager for hændelseslyttere at eksekvere. Dette er værdifuldt til at identificere hændelsesbehandlere (event handlers), der kan gøre brugerinteraktioner langsommere.

Eksempel: Måling af klikhændelseslatens

            <button id="myButton">Click Me</button>

const button = document.getElementById('myButton');

button.addEventListener('click', (event) => {
  performance.mark('clickStart');
  // Simuler noget behandling
  for (let i = 0; i < 1000000; i++) {
    // Udfør en operation
  }
  performance.mark('clickEnd');
  performance.measure('clickDuration', 'clickStart', 'clickEnd');

  const measure = performance.getEntriesByName('clickDuration')[0];
  console.log(`Klikhændelsens varighed: ${measure.duration} millisekunder`);
});

            

              
                Copy
              
            
          

Fortolkning af resultaterne: En lang clickDuration indikerer, at hændelsesbehandleren tager for lang tid at eksekvere, hvilket potentielt forårsager en forsinkelse i UI-responsen.

Optimeringsstrategier: Optimer koden i hændelsesbehandlere, brug debounce eller throttle på hændelseslyttere, og aflast tung behandling til web workers.

Bedste praksis for brug af Performance API

• Brug performance.now() til nøjagtige tidsmålinger. Det giver højere præcision og er monotont, hvilket gør det ideelt til måling af kodeeksekveringstid.
• Udnyt Performance-tidslinjen til at analysere ydeevnehændelser. Performance-tidslinjen giver en omfattende registrering af ydeevnerelaterede hændelser, der opstår i løbet af en sides levetid.
• Brug User Timing API til at definere brugerdefinerede ydeevnemetrikker. Dette giver dig mulighed for at spore ydeevnen for kritiske brugerinteraktioner og applikationsspecifik logik.
• Overvåg ydeevne i virkelige miljøer. Brug værktøjer som Google Analytics, New Relic eller Sentry til at indsamle ydeevnedata fra faktiske brugere. Dette vil give dig et mere præcist billede af din applikations ydeevne.
• Sæt ydeevnebudgetter og følg fremskridt over tid. Definer ydeevnemål for din applikation og følg dine fremskridt over tid. Dette vil hjælpe dig med at holde fokus på at optimere ydeevnen og sikre, at din applikation lever op til dine brugeres forventninger.
• Kombiner Performance API med andre fejlfindingsværktøjer. Browserudviklerværktøjer tilbyder kraftfulde funktioner til profilering og fejlfinding af JavaScript-kode. Ved at kombinere disse værktøjer med Performance API'et kan man få endnu dybere indsigt i ydeevneflaskehalse.

Værktøjer og biblioteker til ydeevneovervågning

Mens Performance API'et leverer de rå data, kan flere værktøjer og biblioteker hjælpe dig med at analysere og visualisere disse data mere effektivt:

• Google Lighthouse: Et automatiseret værktøj til revision af hjemmesiders ydeevne, tilgængelighed og SEO. Det bruger Performance API til at indsamle metrikker og giver handlingsrettede anbefalinger til forbedringer.
• WebPageTest: Et gratis værktøj til hastighedstest af hjemmesider, der giver dig mulighed for at teste din hjemmesides ydeevne fra forskellige steder og browsere.
• New Relic Browser: Et omfattende værktøj til ydeevneovervågning, der giver realtidsindsigt i hjemmesiders ydeevne, herunder sideindlæsningstider, JavaScript-fejl og brugeroplevelsesmetrikker.
• Sentry: En platform til fejlsporing og ydeevneovervågning, der hjælper dig med at identificere og løse problemer i din JavaScript-kode.
• Perfume.js: Et lille, open source-bibliotek, der giver et simpelt API til at indsamle og rapportere ydeevnemetrikker.

Konklusion

JavaScript Performance API er et uundværligt værktøj for enhver webudvikler, der ønsker at bygge højtydende webapplikationer. Ved at udnytte funktionerne i Performance API'et kan du få en dyb forståelse af din applikations kørselsadfærd, identificere ydeevneflaskehalse og optimere din kode for en mere jævn brugeroplevelse. Implementering af disse teknikker til ydeevneovervågning og løbende iteration af din kode vil resultere i hurtigere, mere responsive hjemmesider og webapps, der glæder brugere verden over. Husk at tage højde for forskellige netværksforhold og enheders kapaciteter, når du optimerer din webapplikations ydeevne, for at sikre en ensartet brugeroplevelse for alle.