Udvikling af desktopapps med Electron · Lektion

Ydeevneprofilering

Brug indbyggede værktøjer og eksterne hjælpeprogrammer til at profilere Deres Electron-apps ydeevne og finde flaskehalse og områder, der kan forbedres.

Lektion 3 af 411 trin

Ydeevneprofilering er en gratis Udvikling af desktopapps med Electron-lektion på CoddyKit. Dette er lektion 3 af 4. Du kan læse hele lektionen gratis nedenfor — og derefter øve dig praktisk i browseren med en indbygget kodeeditor og en AI-vejleder, der er tilgængelig døgnet rundt. Den er en del af læringsforløbet i Udvikling af desktopapps med Electron, og dine fremskridt synkroniseres på tværs af nettet og CoddyKit-appen. Udvikling af desktopapps med Electron-kurset indeholder 4 lektioner i alt.

Hvad er ydelsesprofilering?

Ydelsesprofilering er som et sundhedstjek af din Electron-app! Det er processen, hvor du analyserer appens ressourceforbrug (CPU, hukommelse og netværk) for at finde ud af, hvor den bliver langsommere.

For desktop-apps er en problemfri og responsiv brugeroplevelse afgørende. Profilering hjælper os med at finde flaskehalse og få vores apps til at føles hurtige.

Find almindelige flaskehalse

Electron-apps kombinerer webteknologi med Node.js, hvilket betyder, at langsommelighed kan komme mange steder fra:

Gengivelse af brugergrænsefladen: Komplekse animationer eller omfattende manipulation af DOM'en.
Tung JavaScript: Langvarige scripts, der blokerer brugergrænsefladen.
IPC-overhead: For meget kommunikation mellem main- og renderer-processer.
Hukommelseslækager: Objekter, der ikke er frigivet, og som bruger mere og mere RAM.
Disk-I/O: Langsom læsning og skrivning af filer i main-processen.

DevTools til renderer-processen

Da Electron-renderer-processen grundlæggende er en Chromium-webside, kan du bruge de velkendte Chromium Developer Tools! De er afgørende til fejlfinding og profilering af din brugergrænseflade.

Hvis du vil åbne DevTools for et vindue, skal du bruge myWindow.webContents.openDevTools(); i main-processen.

Profilér renderer-processens CPU-forbrug

Åbn DevTools (Ctrl+Shift+I eller Cmd+Option+I), og gå til fanen Performance. Klik på optageknappen, interagér med din brugergrænseflade, og stop derefter optagelsen.

Se efter flammekort, og identificér lange opgaver, der blokerer hovedtråden. Her er et eksempel på et script til rendering, der kræver meget CPU:

/*
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 af rendererens hukommelse

Fanen Memory i DevTools er afgørende, når du skal finde hukommelseslækager. Du kan tage "Heap snapshots" for at se objekter, der aktuelt ligger i hukommelsen, eller optage en "Allocation timeline" for at følge hukommelsesforbruget over tid.

En almindelig lækage opstår, når der bevares referencer til frakoblede DOM-elementer. Her er et enkelt eksempel, der allokerer hukommelse:

/*
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 til hovedprocessen

Hovedprocessen er et Node.js-miljø. For at profilere den bruger vi Node.js Inspector, som er kompatibel med Chrome DevTools!

Du starter din Electron-app med flaget --inspect og forbinder derefter DevTools med den angivne URL (normalt chrome-devtools://...) via chrome://inspect i din Chrome-browser.

Profilering af hovedprocessens CPU og hukommelse

Når du har forbundet DevTools med din hovedproces, får du vist en DevTools-instans specifikt til Node.js. Brug fanen Profiler til CPU-flammekort og fanen Memory til heap-snapshots, ligesom med rendereren.

Kør dette eksempel som et Node.js-script, og prøv at forbinde DevTools for at profilere CPU-forbruget:

// 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.

Fortolkning af profileringsdata

Når du har en profil, begynder det egentlige arbejde! Se efter:

Flammekort: Visualiserer kaldestakke over tid. Bredere bjælker betyder, at der bruges mere tid. Se efter "hot paths" (funktioner, der kaldes ofte eller tager lang tid).
Kaldetræ/nedefra og op: Viser funktioner efter samlet tid og hjælper med at identificere de mest ressourcekrævende operationer.
Hukommelses-snapshots: Viser antal objekter, størrelser og bevarede størrelser, så du kan finde lækager.

Ud over DevTools: Eksterne værktøjer

Hvis du vil lave en dybere analyse af ydeevnen på systemniveau, kan du få brug for værktøjer uden for DevTools:

Linux: perf til profilering af CPU og kerneniveau.
macOS: Instruments til omfattende analyse af systemets ydeevne.
Windows: Windows Performance Recorder (WPR) til detaljeret registrering af systemaktivitet.

Det er avancerede værktøjer, men det er godt at vide, at de findes, når du skal løse vanskelige problemer med ydeevnen.

Vælg det rigtige profileringsværktøj

Du har mistanke om, at brugergrænsefladen i din Electron-applikation lejlighedsvis fryser, og at hukommelsesforbruget langsomt stiger over tid. Hvilke to værktøjer eller metoder vil være mest effektive til at undersøge disse problemer?

Besvar den i den interaktive lektion

Opsummering: Ydeevneprofilering

Godt klaret! Du har lært, hvordan du griber ydeevneprofilering i Electron an:

Brug Chromium DevTools til både rendererprocesser (brugergrænseflade/JS) og hovedprocesser (Node.js).
Fokuser på fanen Performance for CPU-forbrug og brugergrænsefladens reaktionsevne.
Brug fanen Memory til at identificere hukommelseslækager og overdreven allokering.
Forstå, hvordan du fortolker flammekort og hukommelses-snapshots.

Profilering er afgørende, når du bygger hurtige og pålidelige Electron-applikationer!

Gratis at komme i gang

Lær JavaScript med en AI-underviser — gratis

Skriv og kør rigtig kode i din browser, få øjeblikkelig hjælp fra en AI-underviser døgnet rundt, og fortsæt, hvor du slap, på web eller i appen.

Kurser: 12
Lektioner: 47

Start gratis Se hele kurset

Ofte stillede spørgsmål

Er lektionen “Ydeevneprofilering” gratis?

Ja — hele teksten til “Ydeevneprofilering” kan læses gratis her på nettet. Hvis du vil øve dig interaktivt med en indbygget kodeeditor og en AI-vejleder døgnet rundt og få adgang til resten af Udvikling af desktopapps med Electron-kurset, skal du opgradere til CoddyKit PRO. Udvikling af desktopapps med Electron-kurset indeholder 4 lektioner i alt.

Hvad lærer jeg i “Ydeevneprofilering”?

Brug indbyggede værktøjer og eksterne hjælpeprogrammer til at profilere Deres Electron-apps ydeevne og finde flaskehalse og områder, der kan forbedres. Du øver dig i Udvikling af desktopapps med Electron med praktisk kode, som du kører direkte i browseren, og en AI-vejleder døgnet rundt besvarer dine spørgsmål, mens du arbejder dig gennem lektionen.

Skal jeg have erfaring for at begynde på Udvikling af desktopapps med Electron?

Der kræves ingen tidligere erfaring. Udvikling af desktopapps med Electron på CoddyKit er tilrettelagt for både begyndere og øvede, så du kan starte her eller fra begyndelsen og lære i dit eget tempo. Dette er lektion 3 af 4.

Hvor lang tid tager lektionen “Ydeevneprofilering”?

De fleste CoddyKit-lektioner tager cirka 5–10 minutter. Hver lektion er kort og interaktiv, så du gør løbende fremskridt og kan fortsætte, hvor du slap – på både web og app.

Kan jeg skrive og køre kode i denne Udvikling af desktopapps med Electron-lektion?

Ja. Alle Udvikling af desktopapps med Electron-lektioner har en indbygget kodeeditor, så du kan skrive og køre rigtig kode direkte i din browser og få øjeblikkelig feedback fra AI – uden lokal opsætning.

Alle lektioner i dette kursus

Optimering af opstartstid
Teknikker til hukommelsesstyring
Ydeevneprofilering
Reduktion af bundle- og diskpladsforbrug

← Tilbage til Udvikling af desktopapps med Electron