Web Workers med WASM-tråde
Integrér Web Workers for at køre WASM-moduler i separate tråde, så UI'et ikke blokeres, og reaktionsevnen forbedres.
Web Workers med WASM-tråde er en gratis WebAssembly (WASM) til applikationer med høj ydeevne-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 WebAssembly (WASM) til applikationer med høj ydeevne, og dine fremskridt synkroniseres på tværs af nettet og CoddyKit-appen. WebAssembly (WASM) til applikationer med høj ydeevne-kurset indeholder 4 lektioner i alt.
Sådan undgår du, at brugergrænsefladen fryser
Webapplikationer har ofte brug for at udføre komplekse opgaver som tunge beregninger eller databehandling. Hvis disse opgaver kører direkte på browserens hovedtråd, kan de få brugergrænsefladen (UI) til at fryse og holde op med at reagere.
Det giver en dårlig brugeroplevelse. For at undgå dette har vi brug for måder at køre kode samtidigt eller parallelt på uden at blokere brugergrænsefladen.
Mød Web Workers
Web Workers er en JavaScript-funktion, der gør det muligt at køre scripts i baggrunden, adskilt fra en websides hovedtråd for udførelse.
- De har deres eget globale scope.
- De kan ikke få direkte adgang til Document Object Model (DOM).
- De kommunikerer med hovedtråden ved hjælp af beskeder.
Denne adskillelse er afgørende for at holde brugergrænsefladen responsiv.
WASM på hovedtråden
Når du indlæser og udfører et WebAssembly-modul (WASM) på en webside, kører det som standard på JavaScript-hovedtråden, ligesom almindelig JavaScript-kode.
Hvis dit WASM-modul udfører en meget langvarig eller beregningstung opgave, blokerer det hovedtråden. Det betyder, at browseren ikke kan opdatere brugergrænsefladen, reagere på brugerinput eller køre andre scripts, før WASM-opgaven er færdig.
WASM + Workers = større kraft
Kombinationen af Web Workers og WebAssembly er en effektiv løsning til webapplikationer med høj ydeevne. Du kan:
- Køre CPU-intensive WASM-beregninger som billedbehandling, videokodning eller komplekse simuleringer i en separat tråd.
- Holde hovedtråden fri og responsiv til opdateringer af brugergrænsefladen og brugerinteraktioner.
- Udnytte WASM's næsten oprindelige hastighed uden at gå på kompromis med brugeroplevelsen.
Oprettelse af en Web Worker
Du opretter en Web Worker ved at instantiere Worker-objektet med URL'en til en scriptfil. Dette script kører derefter i sin egen tråd.
Hovedscriptet kan derefter sende beskeder til denne worker, og workeren kan sende beskeder tilbage.
const workerCode = `
self.onmessage = (e) => {
console.log('Worker received:', e.data);
self.postMessage('Worker says hello!');
};
`;
const blob = new Blob([workerCode], { type: 'application/javascript' });
const worker = new Worker(URL.createObjectURL(blob));
worker.onmessage = (event) => {
console.log('Main received:', event.data);
};
worker.postMessage('Hello from main!');
console.log('Main thread finished setup.');Indlæsning af WASM i en Worker
Indlæsning af et WASM-modul i en Web Worker minder om indlæsning på hovedtråden. Du henter .wasm-filen og instantiere den ved hjælp af WebAssembly.instantiate i workerens script.
Når modulet er instantieret, kan du kalde dets eksporterede funktioner for at udføre tunge beregninger.
// worker.js
self.onmessage = async (e) => {
// Fetch the WASM module
const response = await fetch('my_wasm_module.wasm');
const bytes = await response.arrayBuffer();
// Instantiate the WASM module
const { instance } = await WebAssembly.instantiate(bytes, {});
// Call an exported WASM function
const result = instance.exports.processData(e.data);
// Send result back to the main thread
self.postMessage(result);
};Kommunikation med Workers
Kommunikation mellem hovedtråden og en Web Worker foregår via beskeder ved hjælp af metoden postMessage() og hændelsesbehandleren onmessage.
Data, der sendes mellem tråde, kopieres og deles ikke, hvilket betyder, at komplekse objekter serialiseres og deserialiseres. Det sikrer trådsikkerhed.
const workerCode = `
self.onmessage = (e) => {
console.log('Worker got:', e.data);
self.postMessage('Processing ' + e.data);
};
`;
const blob = new Blob([workerCode], { type: 'application/javascript' });
const worker = new Worker(URL.createObjectURL(blob));
worker.onmessage = (event) => {
console.log('Main got:', event.data);
};
worker.postMessage('a large dataset');
worker.postMessage('another task');
console.log('Main thread sent messages.');Uddelegering af tunge beregninger
Dette eksempel viser, hvordan en simuleret tung beregning kan uddelegeres til en Web Worker. Hovedtråden sender et tal, workeren udfører en Fibonacci-lignende beregning, og hovedtråden fortsætter sit arbejde uden afbrydelse.
Forestil dig, at workerens funktion heavyCalculation i virkeligheden er dit WASM-moduls højtydende funktion.
const workerCode = `
self.onmessage = (e) => {
console.log('Worker: Starting heavy calculation...');
const num = e.data;
let a = 0, b = 1, next;
for (let i = 0; i < num; i++) {
next = a + b;
a = b;
b = next;
}
console.log('Worker: Calculation finished.');
self.postMessage(a);
};
`;
const blob = new Blob([workerCode], { type: 'application/javascript' });
const worker = new Worker(URL.createObjectURL(blob));
worker.onmessage = (event) => {
console.log('Main: Received result:', event.data);
};
worker.postMessage(40); // Send number to worker
console.log('Main: Sent request. UI remains responsive!');
// Simulate other UI work on the main thread
let counter = 0;
const intervalId = setInterval(() => {
console.log('Main: UI update simulation ' + counter++);
if (counter > 3) clearInterval(intervalId);
}, 100);Vigtigste fordele
Brug af Web Workers sammen med WASM-moduler giver flere væsentlige fordele for dine webapplikationer:
- Bedre responsivitet for brugergrænsefladen: Hovedtråden forbliver fri, så du undgår frysninger.
- Bedre ydeevne: Kombiner WASM's hastighed med parallel udførelse.
- Bedre brugeroplevelse: Brugerne oplever flydende interaktioner, selv under krævende opgaver.
- Effektiv udnyttelse af ressourcer: Udnyt CPU'er med flere kerner ved at fordele arbejdsbelastningen.
Tjek din forståelse
Forestil dig en webapplikation, der skal udføre kompleks billedfiltrering. Denne proces tager flere sekunder at gennemføre.
Hvilken fremgangsmåde vil bedst sikre, at brugergrænsefladen forbliver responsiv?
Opsummering og næste trin
Vi har lært, hvordan Web Workers leverer en separat tråd til udførelse af scripts og dermed forhindrer blokering af brugergrænsefladen. Ved at indlæse og køre dine højtydende WASM-moduler i disse workers kan du opnå jævne og responsive webapplikationer, selv ved tunge beregninger.
Denne kombination er effektiv til opgaver som billedbehandling, dataanalyse og komplekse simuleringer. I de næste lektioner undersøger vi mere avancerede mønstre for samtidig udførelse, herunder delt hukommelse til endnu tættere integration.
Lær WebAssembly (WASM) til applikationer med høj ydeevne 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
- 48
Ofte stillede spørgsmål
Er lektionen “Web Workers med WASM-tråde” gratis?
Ja — hele teksten til “Web Workers med WASM-tråde” 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 WebAssembly (WASM) til applikationer med høj ydeevne-kurset, skal du opgradere til CoddyKit PRO. WebAssembly (WASM) til applikationer med høj ydeevne-kurset indeholder 4 lektioner i alt.
Hvad lærer jeg i “Web Workers med WASM-tråde”?
Integrér Web Workers for at køre WASM-moduler i separate tråde, så UI'et ikke blokeres, og reaktionsevnen forbedres. Du øver dig i WebAssembly (WASM) til applikationer med høj ydeevne 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å WebAssembly (WASM) til applikationer med høj ydeevne?
Der kræves ingen tidligere erfaring. WebAssembly (WASM) til applikationer med høj ydeevne 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 “Web Workers med WASM-tråde”?
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 WebAssembly (WASM) til applikationer med høj ydeevne-lektion?
Ja. Alle WebAssembly (WASM) til applikationer med høj ydeevne-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
- Web Workers med WASM-tråde
- SharedArrayBuffer og atomics til WASM
- Design af samtidige WASM-applikationer
- Meddelelsesudveksling og kanaler mellem WASM-tråde