WebAssembly (WASM) til applikationer med høj ydeevne · Lektion

Delt hukommelse og atomics

Udforsk brugen af SharedArrayBuffer og atomiske operationer til concurrent dataadgang med høj ydeevne mellem WASM og JS.

Lektion 3 af 412 trin

Delt hukommelse og atomics er en gratis WebAssembly (WASM) til applikationer med høj ydeevne-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 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.

Samtidighed og delt hukommelse

Når du udvikler applikationer med høj ydeevne, især med WebAssembly, har du ofte brug for at udføre opgaver samtidigt. Det betyder, at dele af din kode kører parallelt, måske på tværs af forskellige tråde.

For at disse samtidige opgaver kan fungere effektivt sammen, skal de ofte have adgang til og kunne ændre de samme data. Det er her, delt hukommelse kommer ind i billedet.

Hvorfor ikke bare ArrayBuffer?

Du kender måske allerede ArrayBuffer til håndtering af rå binære data i JavaScript. En almindelig ArrayBuffer kan dog ikke deles direkte mellem forskellige udførelseskontekster (f.eks. mellem hovedtråden og en Web Worker eller mellem JavaScript og en WebAssembly-tråd).

Hver kontekst ville få sin egen kopi af dataene, hvilket er ineffektivt og kompliceret at synkronisere ved hyppige opdateringer.

Introduktion til SharedArrayBuffer

Løsningen til ægte samtidig dataadgang er SharedArrayBuffer. Det er en særlig type ArrayBuffer, der gør det muligt for flere tråde at tilgå den samme hukommelsesblok samtidigt.

Det betyder, at din JavaScript-hovedtråd, Web Workers og WebAssembly-moduler alle kan læse fra og skrive til præcis de *samme* underliggende data, hvilket muliggør effektiv kommunikation og komplekse parallelle beregninger.

Sikkerhedsheadere til deling

På grund af sikkerhedssårbarheder (som Spectre) kræver brug af SharedArrayBuffer, at serveren angiver bestemte HTTP-svarheadere:

  • Cross-Origin-Opener-Policy: same-origin
  • Cross-Origin-Embedder-Policy: require-corp

Disse headere sikrer, at dokumentet befinder sig i en isoleret browserkontekst, der er isoleret på tværs af oprindelser, hvilket er nødvendigt for, at SharedArrayBuffer fungerer sikkert.

Oprettelse af SharedArrayBuffer i JS

Det ligner oprettelsen af en almindelig ArrayBuffer at oprette en SharedArrayBuffer. Du angiver størrelsen i bytes. Derefter kan du oprette en typed array-visning (som Int32Array) for nemt at arbejde med hukommelsen.

const sharedBuffer = new SharedArrayBuffer(1024); // 1KB
const sharedArray = new Int32Array(sharedBuffer);

console.log("Shared buffer created!");
console.log("Size:", sharedArray.length * Int32Array.BYTES_PER_ELEMENT, "bytes");

WASM's visning af delt hukommelse

Når en SharedArrayBuffer videregives til et WebAssembly-modul (f.eks. via WebAssembly.Memory), kan WASM tilknytte denne hukommelse til sit eget lineære hukommelsesområde. Det gør det muligt for WASM-kode at læse og skrive direkte i de delte data.

Den direkte adgang er afgørende for ydeevnen, fordi den undgår den omkostningsfulde kopiering af data mellem værtsmiljøet (JavaScript) og WASM-modulet.

Kapløbstilstande og datasikkerhed

Selvom deling af hukommelse er kraftfuldt, medfører det en udfordring: kapløbstilstande. Hvis flere tråde forsøger at læse og skrive på den samme hukommelsesplacering samtidigt, kan det endelige resultat blive uforudsigeligt eller forkert.

Forestil dig to tråde, der forsøger at øge en tæller samtidigt. Uden korrekt synkronisering kan den ene opdatering overskrive den anden, så tællingen bliver forkert.

Introduktion til Atomics for sikkerhed

For at forhindre kapløbstilstande leverer JavaScript objektet Atomics. Atomics tilbyder et sæt handlinger, der garanteret er atomare, hvilket betyder, at de ikke kan opdeles.

En atomar handling gennemføres enten helt eller slet ikke, så ingen anden tråd kan afbryde den. Det sikrer dataintegriteten i delt hukommelse.

Atomare læsninger og skrivninger

De mest grundlæggende atomare handlinger er `Atomics.load()` og `Atomics.store()`. Disse metoder sikrer, at læsning og skrivning af værdier på en delt hukommelsesplacering sker som ét enkelt, uafbrydeligt trin.

const sharedBuffer = new SharedArrayBuffer(4); // 4 bytes
const int32View = new Int32Array(sharedBuffer);

// Safely store a value at index 0
Atomics.store(int32View, 0, 100);
console.log("Stored 100 atomically.");

// Safely load a value from index 0
const value = Atomics.load(int32View, 0);
console.log("Loaded value:", value);

Atomare aritmetiske handlinger

Ud over simple læsninger og skrivninger tilbyder Atomics aritmetiske handlinger som Atomics.add(), Atomics.sub(), Atomics.and() osv. De udfører en handling og opdaterer værdien atomart.

Atomics.add(typedArray, index, value) lægger value til elementet ved index og returnerer den gamle værdi på dette indeks, alt sammen i ét sikkert trin.

const sharedBuffer = new SharedArrayBuffer(4);
const int32View = new Int32Array(sharedBuffer);
Atomics.store(int32View, 0, 5); // Initial value

console.log("Initial value:", Atomics.load(int32View, 0));

// Atomically add 3 to the value at index 0
const oldValue = Atomics.add(int32View, 0, 3);
console.log("Old value before add:", oldValue);
console.log("New value after add:", Atomics.load(int32View, 0));

Kontrol af delt hukommelse

Se på følgende JavaScript-kodestykke. Antag, at sharedBuffer er en korrekt konfigureret SharedArrayBuffer, og at int32View er en Int32Array-visning af den.

const int32View = new Int32Array(sharedBuffer);
Atomics.store(int32View, 0, 5);
const result = Atomics.add(int32View, 0, 2);
const finalValue = Atomics.load(int32View, 0);

Opsummering: Delt hukommelse og Atomics

Vi har undersøgt, hvordan SharedArrayBuffer muliggør effektiv samtidig dataadgang mellem JavaScript og WebAssembly ved at lade flere tråde tilgå den samme hukommelsesblok.

For at forhindre datakorruption på grund af kapløbstilstande har vi lært om Atomics, som leverer sikre, uopdelelige handlinger til læsning, skrivning og ændring af data i delt hukommelse.

Disse værktøjer er afgørende for at bygge WebAssembly-applikationer med høj ydeevne og flere tråde.

Gratis at komme i gang

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 “Delt hukommelse og atomics” gratis?

Ja — hele teksten til “Delt hukommelse og atomics” 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 “Delt hukommelse og atomics”?

Udforsk brugen af SharedArrayBuffer og atomiske operationer til concurrent dataadgang med høj ydeevne mellem WASM og JS. 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 3 af 4.

Hvor lang tid tager lektionen “Delt hukommelse og atomics”?

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

  1. Overførsel af komplekse datastrukturer
  2. WASM's hukommelsesmodel og -håndtering
  3. Delt hukommelse og atomics
  4. Udvidelse og håndtering af lineær hukommelse
← Tilbage til WebAssembly (WASM) til applikationer med høj ydeevne