Utvikling av Electron-skrivebordsapper · leksjon

Ytelsesprofilering

Bruk innebygde verktøy og eksterne hjelpemidler til å profilere ytelsen til Electron-appen Deres og finne flaskehalser og forbedringsområder.

Leksjon 3 av 411 trinn

Ytelsesprofilering er en gratis leksjon i Utvikling av Electron-skrivebordsapper på CoddyKit. Dette er leksjon 3 av 4. Du kan lese hele leksjonen gratis nedenfor – og deretter øve praktisk i nettleseren med en innebygd kodeeditor og en AI-veileder som er tilgjengelig døgnet rundt. Den er en del av læringsløpet i Utvikling av Electron-skrivebordsapper, og fremdriften din synkroniseres mellom nettet og CoddyKit-appen. Kurset i Utvikling av Electron-skrivebordsapper inneholder totalt 4 leksjoner.

Hva er ytelsesprofilering?

Ytelsesprofilering er som å gi Electron-appen en helsesjekk! Det er prosessen med å analysere appens ressursbruk (CPU, minne og nettverk) for å finne ut hvor den blir treg.

For skrivebordsapper er en jevn og responsiv brukeropplevelse avgjørende. Profilering hjelper oss med å finne flaskehalser og få appene til å føles raske.

Finn vanlige flaskehalser

Electron-apper kombinerer webteknologi med Node.js, så treghet kan oppstå mange steder:

Gjengivelse av brukergrensesnittet: Komplekse animasjoner eller omfattende DOM-manipulering.
Tung JavaScript: Langvarige skript som blokkerer brukergrensesnittet.
IPC-overhead: For mye kommunikasjon mellom hovedprosessen og renderer-prosessene.
Minnelekkasjer: Objekter som ikke frigjøres, bruker stadig mer RAM.
Disk-I/O: Treg lesing og skriving av filer i hovedprosessen.

DevTools for renderer-prosessen

Ettersom renderer-prosessen i Electron i praksis er en Chromium-nettside, kan du bruke de kjente utviklerverktøyene i Chromium! De er viktige for feilsøking og profilering av brukergrensesnittet.

For å åpne DevTools for et vindu bruker du myWindow.webContents.openDevTools(); i hovedprosessen.

Profiler CPU-bruk i renderer-prosessen

Åpne DevTools (Ctrl+Shift+I eller Cmd+Option+I) og gå til fanen Performance. Klikk på opptaksknappen, samhandle med brukergrensesnittet og stopp deretter opptaket.

Se etter flammegrafer og identifiser lange oppgaver som blokkerer hovedtråden. Her er et eksempel på et CPU-intensivt renderer-skript:

/*
This code runs in the renderer process (e.g., in index.html).
It's a snippet, not a full standalone program.
*/

function performHeavyTask() {
  console.log('Starting heavy renderer task...');
  let sum = 0;
  for (let i = 0; i < 50000000; i++) { // 50 million iterations
    sum += Math.sqrt(i);
  }
  console.log('Heavy renderer task finished:', sum);
  return sum;
}

// Example usage: call this function on a button click
// document.getElementById('myButton').addEventListener('click', performHeavyTask);

Profilering av minnet i renderer-prosessen

Fanen Memory i DevTools er avgjørende for å finne minnelekkasjer. Du kan ta heap snapshots for å se objekter som for øyeblikket ligger i minnet, eller ta opp en allocation timeline for å følge minnebruken over tid.

En vanlig lekkasje oppstår når referanser til frakoblede DOM-elementer beholdes. Her er et enkelt eksempel som allokerer minne:

/*
This code runs in the renderer process (e.g., in index.html).
It's a snippet, not a full standalone program.
*/

let memoryHog = [];

function allocateMoreMemory() {
  console.log('Allocating more memory...');
  for (let i = 0; i < 10000; i++) {
    memoryHog.push({
      id: i,
      data: new Array(1000).fill('some long string to consume memory')
    });
  }
  console.log('Current memoryHog size:', memoryHog.length);
}

// Example usage: call this function repeatedly
// document.getElementById('allocateBtn').addEventListener('click', allocateMoreMemory);

Node.js Inspector for hovedprosessen

Hovedprosessen er et Node.js-miljø. For å profilere den bruker vi Node.js Inspector, som er kompatibel med Chrome DevTools!

Du starter Electron-appen med flagget --inspect og kobler deretter DevTools til den oppgitte URL-en (vanligvis chrome-devtools://...) via chrome://inspect i Chrome-nettleseren.

Profilering av CPU og minne i hovedprosessen

Når du har koblet DevTools til hovedprosessen, ser du en DevTools-instans som er spesifikt for Node.js. Bruk fanen Profiler for CPU-flammegrafer og fanen Memory for heap snapshots, på samme måte som for renderer-prosessen.

Kjør dette eksempelet som et Node.js-skript, og prøv å koble DevTools til det for å profilere CPU-bruken:

// main_process_profiling_example.js
// To run: node --inspect main_process_profiling_example.js
// Then open chrome://inspect in Chrome and click "Open dedicated DevTools for Node"

function calculateHeavySum() {
  console.log('Starting heavy main process task...');
  let sum = 0;
  for (let i = 0; i < 200000000; i++) { // 200 million iterations
    sum += Math.sin(i) * Math.cos(i);
  }
  console.log('Heavy main process task finished:', sum);
  return sum;
}

console.log("Main process example started.");
// Simulate a recurring task or an event that triggers heavy work
setTimeout(() => {
  const result = calculateHeavySum();
  console.log("Result of heavy calculation:", result);
}, 1000);

// Keep the process alive for a bit for inspection
setInterval(() => {
  // console.log("Main process still running...");
}, 5000);

// This is a standalone Node.js program entry point.

Tolke profileringsdata

Når du har en profil, begynner det egentlige arbeidet! Se etter:

Flame Charts: Visualiserer kallstakker over tid. Bredere søyler betyr at det er brukt mer tid. Se etter «hot paths» (funksjoner som kalles ofte eller bruker lang tid).
Call Tree/Bottom-Up: Viser funksjoner sortert etter total tid og gjør det enklere å identifisere de mest kostbare operasjonene.
Memory Snapshots: Viser antall objekter, størrelser og beholdte størrelser, slik at du kan oppdage lekkasjer.

Utover DevTools: eksterne verktøy

For en dypere ytelsesanalyse på systemnivå kan det hende du trenger verktøy utenfor DevTools:

Linux: perf for profilering av CPU og kjernenivå.
macOS: Instruments for omfattende analyse av systemytelse.
Windows: Windows Performance Recorder (WPR) for detaljert systemaktivitet.

Dette er avanserte verktøy, men det er nyttig å vite at de finnes når du står overfor krevende ytelsesproblemer.

Velge riktig profileringsverktøy

Du mistenker at brukergrensesnittet i Electron-applikasjonen av og til fryser, samtidig som minnebruken sakte øker over tid. Hvilke to verktøy eller metoder vil være mest effektive for å undersøke disse problemene?

Besvar den i den interaktive leksjonen

Oppsummering: ytelsesprofilering

Godt jobbet! Du har lært hvordan du kan gå frem ved ytelsesprofilering i Electron:

Bruk Chromium DevTools for både renderer-prosesser (UI/JS) og hovedprosesser (Node.js).
Fokuser på fanen Performance for CPU-bruk og responsivitet i brukergrensesnittet.
Bruk fanen Memory for å identifisere minnelekkasjer og overdreven allokering.
Lær å tolke flammegrafer og minneopptak.

Profilering er avgjørende for å bygge raske og pålitelige Electron-applikasjoner!

Gratis å komme i gang

Lær deg JavaScript med en AI-veileder – gratis

Skriv og kjør ekte kode i nettleseren, få umiddelbar hjelp fra en AI-veileder som er tilgjengelig døgnet rundt, og fortsett der du slapp – på nettet eller i appen.

Kurs: 12
Leksjoner: 47

Start læringen gratis Se hele kurset

Ofte stilte spørsmål

Er leksjonen «Ytelsesprofilering» gratis?

Ja – hele teksten i «Ytelsesprofilering» er gratis å lese her på nettet. For å øve interaktivt med en innebygd kodeeditor og en AI-veileder som er tilgjengelig døgnet rundt, og for å låse opp resten av Utvikling av Electron-skrivebordsapper-kurset, kan du oppgradere til CoddyKit PRO. Kurset i Utvikling av Electron-skrivebordsapper inneholder totalt 4 leksjoner.

Hva lærer jeg i «Ytelsesprofilering»?

Bruk innebygde verktøy og eksterne hjelpemidler til å profilere ytelsen til Electron-appen Deres og finne flaskehalser og forbedringsområder. Du øver på Utvikling av Electron-skrivebordsapper med praktisk kode som du kjører direkte i nettleseren, mens en AI-veileder som er tilgjengelig døgnet rundt, svarer på spørsmålene dine mens du jobber deg gjennom leksjonen.

Trenger jeg erfaring for å begynne med Utvikling av Electron-skrivebordsapper?

Ingen tidligere erfaring er nødvendig. Utvikling av Electron-skrivebordsapper på CoddyKit er lagt opp for både nybegynnere og viderekomne, så De kan begynne her eller helt fra start og lære i Deres eget tempo. Dette er leksjon 3 av 4.

Hvor lang tid tar leksjonen «Ytelsesprofilering»?

De fleste CoddyKit-leksjoner tar omtrent 5–10 minutter. Hver leksjon er kort og interaktiv, slik at De gjør jevne fremskritt og kan fortsette akkurat der De slapp – både på nettet og i appen.

Kan jeg skrive og kjøre kode i denne Utvikling av Electron-skrivebordsapper-leksjonen?

Ja. Alle Utvikling av Electron-skrivebordsapper-leksjoner har en innebygd kodeeditor, slik at De kan skrive og kjøre ekte kode direkte i nettleseren og få umiddelbar tilbakemelding fra AI – uten lokal konfigurering.

Alle leksjonene i dette kurset

← Tilbake til Utvikling av Electron-skrivebordsapper