Main- og renderer-processen
Udforsk rollerne og ansvarsområderne for main- og renderer-processerne, og hvordan de samarbejder om at danne en komplet Electron-applikation.
Main- og renderer-processen er en gratis Udvikling af desktopapps med Electron-lektion på CoddyKit. Dette er lektion 1 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.
Electrons dobbelte natur
Velkommen! Electron lader dig bygge desktopapps med webteknologier. Men det er ikke bare en simpel webbrowser. Det bruger en unik arkitektur med to processer for at gøre dette muligt.
Du lærer om de to vigtigste processtyper: hovedprocessen og rendererprocessen. Det er afgørende at forstå deres roller, hvis du vil bygge robuste Electron-applikationer.
Hovedprocessen: Dirigenten
Tænk på hovedprocessen som dirigenten for din Electron-applikation. Det er et Node.js-miljø, hvilket betyder, at den har fuld adgang til Node.js-API'er og kan kommunikere direkte med operativsystemet.
Der kører normalt kun én hovedproces pr. Electron-applikation.
Hovedprocessens ansvarsområder
Hovedprocessen har ansvaret for centrale opgaver i applikationen, herunder:
- Oprettelse og administration af browservinduer: Hvert vindue i din app styres af hovedprocessen.
- Håndtering af hændelser i applikationens livscyklus: For eksempel når appen starter, afsluttes eller bliver aktiv.
- Adgang til native funktioner i operativsystemet: For eksempel oprettelse af menuer, åbning af dialogbokse og kommunikation med filsystemet.
- Administration af ressourcer for hele applikationen: Indstillinger, global tilstand osv.
Hovedprocessen i praksis
Dette er en typisk main.js-fil, indgangspunktet for en Electron-app. Den opretter og administrerer vinduer. Bemærk, at den bruger Electrons moduler og Node.js-funktioner.
const { app, BrowserWindow } = require('electron');
const path = require('path');
function createWindow () {
// Create the browser window.
const mainWindow = new BrowserWindow({
width: 800,
height: 600,
webPreferences: {
preload: path.join(__dirname, 'preload.js'),
nodeIntegration: false, // Keep false for security
contextIsolation: true // Keep true for security
}
});
// Load the index.html of the app.
mainWindow.loadFile('index.html');
// Open the DevTools.
// mainWindow.webContents.openDevTools();
}
// This method will be called when Electron has finished
// initialization and is ready to create browser windows.
app.whenReady().then(createWindow);
// Quit when all windows are closed, except on macOS.
app.on('window-all-closed', () => {
if (process.platform !== 'darwin') {
app.quit();
}
});
// On macOS it's common to re-create a window in the app when the
// dock icon is clicked and there are no other windows open.
app.on('activate', () => {
if (BrowserWindow.getAllWindows().length === 0) {
createWindow();
}
});Rendererprocessen: Brugergrænsefladen
Rendererprocessen er der, hvor din brugergrænseflade findes. Hvert Electron-vindue (oprettet af hovedprocessen) kører sin egen dedikerede rendererproces. Det er grundlæggende en komplet Chromium-browserinstans, ligesom en fane i Chrome.
Det er her, din HTML, CSS og JavaScript til brugergrænsefladen køres.
Rendererprocessens ansvarsområder
Rendererprocessen fokuserer på at vise indhold og interagere med brugeren:
- Rendering af webindhold: Den tager din HTML, CSS og JavaScript og viser det visuelt.
- Håndtering af brugerinteraktioner: Den reagerer på klik, tastaturinput, formularindsendelser osv.
- Udførelse af web-API'er: Alle almindelige browser-API'er som DOM-manipulation, Fetch API, Web Workers osv. er tilgængelige her.
- Begrænset direkte adgang til operativsystemet: Af sikkerhedshensyn har den som standard ikke direkte adgang til Node.js-moduler eller native funktioner i operativsystemet.
Rendererprocessen i praksis
Denne index.html indlæses af hovedprocessen i et vindue. JavaScript-koden i den kører i rendererprocessen, ligesom i en webbrowser.
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>My Electron App UI</title>
<style>
body { font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; text-align: center; padding: 50px; background-color: #f0f2f5; color: #333; }
h1 { color: #2c3e50; }
p { margin-top: 20px; font-size: 1.1em; }
code { background-color: #e0e0e0; padding: 2px 4px; border-radius: 3px; }
</style>
</head>
<body>
<h1>Hello from the Renderer!</h1>
<p>This content is displayed by Chromium inside an Electron window.</p>
<p>The script below runs in the <code>Renderer Process</code>.</p>
<script>
document.addEventListener('DOMContentLoaded', () => {
const messageDiv = document.createElement('div');
messageDiv.innerHTML = '<p><b>DOM Content Loaded!</b> This is a Renderer process event.</p>';
document.body.appendChild(messageDiv);
console.log('Renderer process is ready!');
});
</script>
</body>
</html>Hovedproces kontra rendererproces: Vigtige forskelle
Her er en hurtig opsummering af de vigtigste forskelle:
- Miljø:
Hovedproces: Node.js-runtime
Rendererproces: Chromium-web-runtime - Instanser:
Hovedproces: Én instans pr. app
Rendererproces: Én pr.BrowserWindow - Adgang til operativsystemet:
Hovedproces: Fuld adgang til Node.js og det native operativsystem
Rendererproces: Begrænset adgang til web-API'er (som standard) - Formål:
Hovedproces: Appens livscyklus, vinduesadministration og native funktioner
Rendererproces: Rendering af brugergrænsefladen og brugerinteraktion
Hvorfor en model med to processer?
Denne arkitektur handler ikke kun om kompleksitet; den giver betydelige fordele:
- Sikkerhed: Den isolerer potentielt upålideligt webindhold fra direkte adgang til operativsystemet. Hvis en rendererproces kompromitteres, er hovedprocessen og systemet beskyttet.
- Stabilitet: Hvis en bestemt webside (rendererprocessen) går ned på grund af en fejl, tager den ikke hele applikationen eller andre vinduer med sig.
- Ydeevne: Krævende opgaver kan køre i hovedprocessen (eller i separate arbejderprocesser), så brugergrænsefladen (rendererprocessen) forbliver responsiv og problemfri.
Kontrol af procesroller
Test, om du har forstået hovedprocesserne og rendererprocesserne.
Opsummering: Hovedproces og rendererproces
Godt arbejde! Du har nu forstået den grundlæggende arkitektur i Electron-applikationer.
- Hovedprocessen (Node.js) er kontrolcentret, der administrerer vinduer og får adgang til native funktioner i operativsystemet.
- Hver rendererproces (Chromium) viser dit webbaserede brugergrænsefladeindhold i et vindue.
Denne opdeling giver sikkerhed, stabilitet og ydeevne. I næste lektion lærer du, hvordan disse processer kommunikerer med hinanden!
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
Ofte stillede spørgsmål
Er lektionen “Main- og renderer-processen” gratis?
Ja — hele teksten til “Main- og renderer-processen” 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 “Main- og renderer-processen”?
Udforsk rollerne og ansvarsområderne for main- og renderer-processerne, og hvordan de samarbejder om at danne en komplet Electron-applikation. 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 1 af 4.
Hvor lang tid tager lektionen “Main- og renderer-processen”?
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
- Main- og renderer-processen
- Kommunikation mellem processer (IPC)
- Pakning af Deres Electron-app
- Håndtering af flere vinduer