JavaScript Performance API: Bemästra insamling av körtidsmått

I dagens snabbrörliga digitala värld är prestandan hos webbplatser och webbapplikationer av yttersta vikt. Användare förväntar sig omedelbar respons och sömlösa upplevelser. Långsamma laddningstider eller tröga interaktioner kan leda till frustration och i slutändan att användaren lämnar sidan. För att säkerställa optimal prestanda behöver utvecklare verktyg för att mäta, analysera och förbättra körtidsbeteendet hos sin JavaScript-kod. JavaScript Performance API erbjuder ett kraftfullt och standardiserat sätt att samla in körtidsmått, vilket gör det möjligt för utvecklare att identifiera prestandaflaskhalsar och optimera sina applikationer för en smidigare användarupplevelse.

Vad är JavaScript Performance API?

JavaScript Performance API är en samling gränssnitt och metoder som finns tillgängliga i moderna webbläsare och som låter utvecklare komma åt och mäta olika prestandarelaterade data. Det ger insikter i olika aspekter av körtidsbeteendet, inklusive:

• Navigeringstidtagning: Mäter tiden det tar för olika steg vid sidladdning, såsom DNS-uppslag, TCP-anslutning, förfrågnings- och svarstider.
• Resurstidtagning: Ger detaljerad tidinformation för enskilda resurser som laddas av sidan, såsom bilder, skript och stilmallar.
• Användartidtagning: Låter utvecklare definiera och mäta anpassade prestandamått specifika för deras applikationslogik.
• Långa uppgifter: Identifierar uppgifter som blockerar huvudtråden under en längre period, vilket potentiellt kan orsaka frysningar i användargränssnittet.
• Minnesmätning: (Tillgängligt i vissa webbläsare) Ger information om sidans minnesanvändning.
• Elementtidtagning: Ger tidmått för när specifika HTML-element blir synliga för användaren.
• Händelsetidtagning: Mäter varaktigheten för händelser, som klick, tangenttryckningar och andra användarinteraktioner.

Genom att utnyttja dessa funktioner kan utvecklare få en djup förståelse för hur deras JavaScript-kod presterar i verkliga scenarier och identifiera områden för optimering.

Nyckelkomponenter i Performance API

1. performance-objektet

performance-objektet är den huvudsakliga ingångspunkten för att komma åt Performance API. Det är en egenskap hos window-objektet och ger tillgång till olika metoder och egenskaper för att mäta och analysera prestandadata. De vanligaste egenskaperna är performance.timing och performance.now().

2. performance.now()

performance.now() returnerar en högupplöst tidsstämpel (i millisekunder) som representerar tiden som förflutit sedan dokumentets navigationsstart. Det är grunden för att mäta varaktigheten av kodexekvering. Till skillnad från Date.now() är performance.now() monotont, vilket innebär att det inte påverkas av justeringar i systemklockan.

Exempel: Mäta exekveringstiden för en funktion

            const startTime = performance.now();
// Kod som ska mätas
for (let i = 0; i < 1000000; i++) {
  // Utför någon operation
}
const endTime = performance.now();
const executionTime = endTime - startTime;
console.log(`Exekveringstid: ${executionTime} millisekunder`);

            

              
                Copy
              
            
          

3. Prestandatidslinjen

Prestandatidslinjen är en logg över prestandarelaterade händelser som inträffar under en sidas livstid. Den inkluderar poster för navigeringstidtagning, resurstidtagning, användartidtagning med mera. Prestandatidslinjen kan nås med metoder som performance.getEntries(), performance.getEntriesByType() och performance.getEntriesByName().

4. PerformanceEntry-gränssnittet

Varje post i prestandatidslinjen representeras av ett PerformanceEntry-objekt. Detta gränssnitt tillhandahåller egenskaper som beskriver prestandahändelsen, såsom dess namn, starttid, varaktighet och posttyp. Olika typer av prestandaposter har ytterligare egenskaper som är specifika för deras händelsetyp.

Samla in och analysera körtidsmått

JavaScript Performance API erbjuder en mängd metoder för att samla in och analysera körtidsmått. Här är några vanliga användningsfall:

1. Mäta sidladdningstid

performance.timing-objektet ger detaljerad information om de olika stegen i sidladdningen. Du kan använda dessa data för att identifiera flaskhalsar och optimera laddningsprocessen.

Exempel: Beräkna tiden för DOMContentLoaded-händelsen

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

            

              
                Copy
              
            
          

Tolka resultaten: Ett högt domContentLoadedEventEnd-värde kan indikera att webbläsaren spenderar mycket tid på att tolka och exekvera JavaScript-kod, rendera DOM eller vänta på att resurser ska laddas. Att analysera de enskilda resurstidtagningarna (se nedan) kan hjälpa till att peka ut de specifika resurser som orsakar förseningar.

Optimeringsstrategier: Möjliga lösningar inkluderar att skjuta upp icke-kritisk JavaScript-exekvering, optimera CSS-leverans och minimera antalet DOM-element.

2. Mäta resursladdningstider

Resource Timing API ger detaljerad tidinformation för varje resurs som laddas av sidan. Detta gör att du kan identifiera långsamt laddande resurser och optimera deras leverans.

Exempel: Hämta information om resurstidtagning

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

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

            

              
                Copy
              
            
          

Tolka resultaten: Att granska duration-egenskapen för varje resurspost kan hjälpa till att identifiera långsamt laddande resurser. En hög duration kan indikera nätverkslatens, stora filstorlekar или ineffektiv bearbetning på serversidan.

Optimeringsstrategier: Potentiella lösningar inkluderar att komprimera bilder, minifiera JavaScript- och CSS-filer, använda ett Content Delivery Network (CDN) och optimera cachning på serversidan.

Globalt exempel: En webbplats som serverar högupplösta bilder till användare i regioner med begränsad bandbredd (t.ex. delar av Sydostasien, Afrika) kan uppleva betydligt långsammare laddningstider för dessa användare. Att implementera responsiva bilder som anpassar sig till användarens anslutningshastighet och skärmstorlek kan avsevärt förbättra prestandan.

3. Mäta användarinteraktioner

User Timing API låter dig definiera och mäta anpassade prestandamått specifika för din applikations logik. Detta är användbart för att spåra prestandan för kritiska användarinteraktioner, såsom formulärinskickningar, sökfrågor och navigeringsövergångar.

Exempel: Mäta tiden det tar att skicka ett formulär

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

form.addEventListener('submit', (event) => {
  performance.mark('formSubmitStart');
  // Simulera fördröjning vid formulärinskickning
  setTimeout(() => {
    performance.mark('formSubmitEnd');
    performance.measure('formSubmitDuration', 'formSubmitStart', 'formSubmitEnd');

    const measure = performance.getEntriesByName('formSubmitDuration')[0];
    console.log(`Varaktighet för formulärinskickning: ${measure.duration} millisekunder`);
  }, 1000); //Simulera nätverksförfrågan som tar 1 sekund

  event.preventDefault();
});

            

              
                Copy
              
            
          

Tolka resultaten: En hög formSubmitDuration kan indikera långsam bearbetning på serversidan, nätverkslatens eller ineffektiv validering på klientsidan.

Optimeringsstrategier: Potentiella lösningar inkluderar att optimera kod på serversidan, minska antalet nätverksförfrågningar och förbättra validering på klientsidan.

4. Identifiera långa uppgifter

Långa uppgifter är uppgifter som blockerar huvudtråden under en längre period (vanligtvis längre än 50 millisekunder), vilket potentiellt kan orsaka frysningar i användargränssnittet och en dålig användarupplevelse. Long Tasks API låter dig identifiera dessa uppgifter och optimera din kod för att förhindra dem.

Exempel: Identifiera långa uppgifter

            const observer = new PerformanceObserver((list) => {
  list.getEntries().forEach((entry) => {
    console.log(`Lång uppgift: ${entry.name}`);
    console.log(`  Varaktighet: ${entry.duration} millisekunder`);
  });
});

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

// Simulera en lång uppgift
setTimeout(() => {
  let sum = 0;
  for (let i = 0; i < 1000000000; i++) {
    sum += i;
  }
  console.log(`Lång uppgift slutförd: ${sum}`);
}, 0);

            

              
                Copy
              
            
          

Tolka resultaten: En lång varaktighet för en uppgift belyser kod som hindrar webbläsaren från att uppdatera användargränssnittet smidigt.

Optimeringsstrategier: Koddelning, "debouncing", "throttling" och att flytta uppgifter till web workers är strategier för att minska varaktigheten för långa uppgifter.

5. Mäta elementsynlighet

Element Timing API låter dig mäta när specifika HTML-element blir synliga för användaren. Detta är särskilt användbart för att spåra laddnings- och renderingsprestanda för kritiska element, som "hero images" eller viktiga innehållssektioner.

Exempel: Mäta tid för elementsynlighet

            <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 image render start: ${entry.renderStart} millisekunder`);
    }
  });
});

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

            

              
                Copy
              
            
          

Tolka resultaten: Ett sent renderStart-värde indikerar att det tar lång tid för elementet att bli synligt, potentiellt på grund av långsamma laddnings- eller renderingsprocesser.

Optimeringsstrategier: Optimera bildkomprimering, använd "lazy loading" och prioritera laddningen av kritiska resurser.

6. Mäta händelselatens

Event Timing API mäter tiden det tar för händelselyssnare att exekvera. Detta är värdefullt för att identifiera händelsehanterare som kan sakta ner användarinteraktioner.

Exempel: Mäta latens för klickhändelse

            <button id="myButton">Klicka här</button>

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

button.addEventListener('click', (event) => {
  performance.mark('clickStart');
  // Simulera viss bearbetning
  for (let i = 0; i < 1000000; i++) {
    // Utför någon operation
  }
  performance.mark('clickEnd');
  performance.measure('clickDuration', 'clickStart', 'clickEnd');

  const measure = performance.getEntriesByName('clickDuration')[0];
  console.log(`Varaktighet för klickhändelse: ${measure.duration} millisekunder`);
});

            

              
                Copy
              
            
          

Tolka resultaten: En lång clickDuration indikerar att händelsehanteraren tar för lång tid att exekvera, vilket potentiellt orsakar en fördröjning i UI-svaret.

Optimeringsstrategier: Optimera koden i händelsehanterare, använd "debounce" eller "throttle" på händelselyssnare och flytta tung bearbetning till web workers.

Bästa praxis för att använda Performance API

• Använd performance.now() för noggranna tidsmätningar. Det ger högre precision och är monotont, vilket gör det idealiskt för att mäta kodexekveringstid.
• Utnyttja prestandatidslinjen för att analysera prestandahändelser. Prestandatidslinjen ger en omfattande logg över prestandarelaterade händelser som inträffar under en sidas livstid.
• Använd User Timing API för att definiera anpassade prestandamått. Detta låter dig spåra prestandan för kritiska användarinteraktioner och applikationsspecifik logik.
• Övervaka prestanda i verkliga miljöer. Använd verktyg som Google Analytics, New Relic eller Sentry för att samla in prestandadata från faktiska användare. Detta ger dig en mer exakt bild av din applikations prestanda.
• Sätt prestandabudgetar och följ framstegen över tid. Definiera prestandamål för din applikation och följ dina framsteg över tid. Detta hjälper dig att hålla fokus på att optimera prestanda och säkerställa att din applikation uppfyller dina användares förväntningar.
• Kombinera Performance API med andra felsökningsverktyg. Webbläsarens utvecklarverktyg erbjuder kraftfulla funktioner för att profilera och felsöka JavaScript-kod. Att kombinera dessa verktyg med Performance API kan ge ännu djupare insikter i prestandaflaskhalsar.

Verktyg och bibliotek för prestandaövervakning

Medan Performance API tillhandahåller rådata, kan flera verktyg och bibliotek hjälpa dig att analysera och visualisera denna data mer effektivt:

• Google Lighthouse: Ett automatiserat verktyg för att granska webbplatsers prestanda, tillgänglighet och SEO. Det använder Performance API för att samla in mätvärden och ger handlingsbara rekommendationer för förbättring.
• WebPageTest: Ett gratis verktyg för att testa webbplatsers hastighet som låter dig testa din webbplats prestanda från olika platser och webbläsare.
• New Relic Browser: Ett omfattande prestandaövervakningsverktyg som ger realtidsinsikter i webbplatsprestanda, inklusive sidladdningstider, JavaScript-fel och mätvärden för användarupplevelse.
• Sentry: En plattform för felspårning och prestandaövervakning som hjälper dig att identifiera och lösa problem i din JavaScript-kod.
• Perfume.js: Ett litet, öppen källkods-bibliotek som tillhandahåller ett enkelt API för att samla in och rapportera prestandamått.

Slutsats

JavaScript Performance API är ett oumbärligt verktyg för alla webbutvecklare som vill bygga högpresterande webbapplikationer. Genom att utnyttja funktionerna i Performance API kan du få en djup förståelse för din applikations körtidsbeteende, identifiera prestandaflaskhalsar och optimera din kod för en smidigare användarupplevelse. Att implementera dessa tekniker för prestandaövervakning och kontinuerligt iterera din kod kommer att resultera i snabbare, mer responsiva webbplatser och webbappar som gläder användare över hela världen. Kom ihåg att ta hänsyn till olika nätverksförhållanden och enhetskapaciteter när du optimerar din webbapplikations prestanda för att säkerställa en konsekvent användarupplevelse för alla.