Prestatieprofilering
Gebruik ingebouwde tools en externe hulpprogramma's om de prestaties van uw Electron-app te profileren en knelpunten en verbeterpunten op te sporen.
Prestatieprofilering is een gratis Desktopapplicaties ontwikkelen met Electron-les op CoddyKit. Dit is les 3 van 4. Je kunt de volledige les hieronder gratis lezen en daarna in de browser praktisch oefenen met een ingebouwde code-editor en een AI-begeleider die 24/7 beschikbaar is. Deze les maakt deel uit van het leertraject Desktopapplicaties ontwikkelen met Electron. Je voortgang wordt gesynchroniseerd op het web en in de CoddyKit-app. De cursus Desktopapplicaties ontwikkelen met Electron bevat in totaal 4 lessen.
Wat is prestatieprofilering?
Prestatieprofilering is alsof je je Electron-app een gezondheidscontrole geeft! Het is het proces waarbij je het gebruik van bronnen door je app analyseert, zoals CPU, geheugen en netwerk, om te ontdekken waar de app vertraagt.
Voor desktopapps is een soepele, responsieve gebruikerservaring essentieel. Profilering helpt ons knelpunten nauwkeurig te lokaliseren en onze apps sneller te laten aanvoelen.
Veelvoorkomende knelpunten nauwkeurig lokaliseren
Electron-apps combineren webtechnologie met Node.js, waardoor vertragingen op veel plaatsen kunnen ontstaan:
- Weergave van de gebruikersinterface: Complexe animaties of intensieve DOM-bewerkingen.
- Zware JavaScript-code: Langdurig draaiende scripts die de gebruikersinterface blokkeren.
- IPC-overhead: Te veel communicatie tussen hoofd- en rendererprocessen.
- Geheugenlekken: Niet-vrijgegeven objecten die steeds meer RAM gebruiken.
- Schijf-I/O: Trage lees- en schrijfbewerkingen van bestanden in het hoofdproces.
DevTools voor het rendererproces
Omdat het rendererproces van Electron in wezen een Chromium-webpagina is, kun je de vertrouwde Chromium Developer Tools gebruiken! Deze zijn essentieel voor het opsporen van fouten en het profileren van je gebruikersinterface.
Gebruik myWindow.webContents.openDevTools(); in het hoofdproces om DevTools voor een venster te openen.
CPU-gebruik van het rendererproces profileren
Open DevTools (Ctrl+Shift+I of Cmd+Option+I) en ga naar het tabblad Performance. Klik op de opnameknop, gebruik je gebruikersinterface en stop vervolgens de opname.
Zoek naar vlamgrafieken en identificeer lange taken die de hoofdthread blokkeren. Hier is een voorbeeld van een script voor een renderer dat veel CPU gebruikt:
/*
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);Geheugengebruik van de renderer profileren
Het tabblad Memory in DevTools is belangrijk voor het vinden van geheugenlekken. Je kunt "Heap snapshots" maken om te zien welke objecten zich momenteel in het geheugen bevinden, of een "Allocation timeline" opnemen om het geheugengebruik in de loop van de tijd te volgen.
Een veelvoorkomend lek ontstaat doordat verwijzingen naar losgekoppelde DOM-elementen worden vastgehouden. Hier is een eenvoudig voorbeeld dat geheugen toewijst:
/*
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 voor het hoofdproces
Het hoofdproces is een Node.js-omgeving. Om dit te profileren gebruiken we de Node.js Inspector, die compatibel is met Chrome DevTools!
Je start je Electron-app met de vlag --inspect en maakt vervolgens via chrome://inspect in je Chrome-browser verbinding met DevTools op de opgegeven URL (meestal chrome-devtools://...).
CPU en geheugen van het hoofdproces profileren
Nadat je DevTools met je hoofdproces hebt verbonden, zie je een DevTools-exemplaar dat speciaal bedoeld is voor Node.js. Gebruik het tabblad Profiler voor vlamgrafieken van het CPU-gebruik en het tabblad Memory voor heapopnamen, net als bij de renderer.
Voer dit voorbeeld uit als een Node.js-script en probeer DevTools te verbinden om het CPU-gebruik ervan te profileren:
// 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.Profileringgegevens interpreteren
Zodra je een profiel hebt, begint het echte werk! Let op het volgende:
- Vlamgrafieken: Visualiseren aanroeplusets in de loop van de tijd. Bredere balken betekenen dat er meer tijd is besteed. Zoek naar "hot paths" (functies die vaak worden aangeroepen of lang duren).
- Aanroepstructuur/van onder naar boven: Toont functies op basis van de totale tijd en helpt de duurste bewerkingen te identificeren.
- Geheugenopnamen: Tonen aantallen, groottes en behouden groottes van objecten om lekken op te sporen.
Verder dan DevTools: externe hulpmiddelen
Voor diepgaandere prestatieanalyses op systeemniveau heb je mogelijk hulpmiddelen buiten DevTools nodig:
- Linux:
perfvoor profilering van CPU- en kernelgebruik. - macOS:
Instrumentsvoor uitgebreide systeemprestatieanalyse. - Windows:
Windows Performance Recorder (WPR)voor gedetailleerde systeemactiviteiten.
Dit zijn geavanceerde hulpmiddelen, maar het is goed om te weten dat ze bestaan voor hardnekkige prestatieproblemen.
Het juiste profileringshulpmiddel kiezen
Je vermoedt dat de gebruikersinterface van je Electron-app af en toe vastloopt en dat het geheugengebruik na verloop van tijd langzaam blijft toenemen. Welke twee hulpmiddelen of methoden zijn het meest effectief om deze problemen te onderzoeken?
Samenvatting: prestatieprofilering
Goed gedaan! Je hebt geleerd hoe je prestatieprofilering in Electron aanpakt:
- Gebruik Chromium DevTools voor zowel rendererprocessen (gebruikersinterface/JS) als het hoofdproces (Node.js).
- Richt je op het tabblad Performance voor CPU-gebruik en de reactiesnelheid van de gebruikersinterface.
- Gebruik het tabblad Memory om geheugenlekken en overmatige geheugentoewijzingen te identificeren.
- Leer vlamgrafieken en geheugenopnamen te interpreteren.
Profilering is essentieel voor het bouwen van snelle, betrouwbare Electron-applicaties!
Leer JavaScript met een AI-tutor — gratis
Schrijf echte code en voer die uit in je browser, krijg direct hulp van een AI-tutor die 24/7 beschikbaar is en ga verder waar je gebleven bent op het web of in de app.
- Cursussen
- 12
- Lessen
- 47
Veelgestelde vragen
Is de les “Prestatieprofilering” gratis?
Ja — de volledige tekst van “Prestatieprofilering” kun je hier gratis op het web lezen. Als je interactief wilt oefenen met een ingebouwde code-editor en een AI-begeleider die 24/7 beschikbaar is, en de rest van de cursus Desktopapplicaties ontwikkelen met Electron wilt ontgrendelen, kun je upgraden naar CoddyKit PRO. De cursus Desktopapplicaties ontwikkelen met Electron bevat in totaal 4 lessen.
Wat leer ik in “Prestatieprofilering”?
Gebruik ingebouwde tools en externe hulpprogramma's om de prestaties van uw Electron-app te profileren en knelpunten en verbeterpunten op te sporen. Je oefent met Desktopapplicaties ontwikkelen met Electron door code rechtstreeks in de browser uit te voeren. Een AI-begeleider die 24/7 beschikbaar is beantwoordt je vragen terwijl je de les doorwerkt.
Heb ik ervaring nodig om met Desktopapplicaties ontwikkelen met Electron te beginnen?
Ervaring vooraf is niet nodig. Desktopapplicaties ontwikkelen met Electron op CoddyKit is opgebouwd voor beginners tot gevorderden, zodat je hier of bij het begin kunt starten en in je eigen tempo kunt leren. Dit is les 3 van 4.
Hoe lang duurt de les “Prestatieprofilering”?
De meeste lessen van CoddyKit duren ongeveer 5–10 minuten. Elke les is kort en interactief, zodat je gestaag vooruitgaat en op het web en in de app precies verdergaat waar je was gebleven.
Kan ik code schrijven en uitvoeren in deze les over Desktopapplicaties ontwikkelen met Electron?
Ja. Elke les over Desktopapplicaties ontwikkelen met Electron bevat een ingebouwde code-editor, zodat je rechtstreeks in je browser echte code kunt schrijven en uitvoeren en direct feedback van AI krijgt — lokale installatie is niet nodig.
Alle lessen in deze cursus
- De opstarttijd optimaliseren
- Technieken voor geheugenbeheer
- Prestatieprofilering
- De omvang van bundel en schijfgebruik verkleinen