JavaScript Academy · Oppitunti

Siirrettävät objektit

Siirtäkää dataa tehokkaasti ilman kopiointia.

Oppitunti 3/413 vaihetta

Siirrettävät objektit on ilmainen JavaScript Academy-oppitunti CoddyKitissä. Tämä on oppitunti 3/4. Voit lukea tästä oppimispolusta kokonaan mitkä tahansa 3 oppituntia ilmaiseksi — sen jälkeen CoddyKit PRO avaa kaikki oppitunnit sekä käytännön harjoittelun sisäänrakennetulla koodieditorilla ja ympäri vuorokauden toimivalla tekoälytuutorilla. Oppitunti kuuluu JavaScript Academy-oppimispolkuun, ja edistymisesi synkronoituu verkon ja CoddyKit-sovelluksen välillä. JavaScript Academy-kurssilla on yhteensä 4 oppituntia.

Kloonaamisen kustannus

Structured clone -algoritmi kopioi datan tavu tavulta. Suurten puskurien, kuten kuvien, äänien ja suurten taulukoiden, kopiointi on hidasta ja kaksinkertaistaa muistin käytön. Siirrettävät objektit ratkaisevat ongelman siirtämällä omistajuuden kopioinnin sijaan.

Mitä voidaan siirtää

Vain tietyt objektityypit ovat siirrettäviä, tärkeimpänä ArrayBuffer. Muita ovat MessagePort, ImageBitmap ja OffscreenCanvas.

ArrayBuffer — käsittelemätön binäärimuisti
MessagePort — kanavan päätepiste
ImageBitmap — purettu kuvatieto

Siirtoluettelo

postMessage hyväksyy toisen argumentin: luettelon siirrettävistä objekteista. Luettelossa olevat objektit siirretään eikä niitä kopioida.

const buffer = new ArrayBuffer(1024 * 1024); // 1 MB
worker.postMessage(buffer, [buffer]); // transfer it

Omistajuus siirtyy

Siirron jälkeen lähettävä osapuoli ei voi enää käyttää puskuria, vaan se irrotetaan (byteLength 0). Vastaanottava osapuoli omistaa nyt saman taustalla olevan muistin, eikä kopiota tehdä.

const buffer = new ArrayBuffer(8);
worker.postMessage(buffer, [buffer]);
console.log(buffer.byteLength); // 0 - now detached

Tyypitettyjen taulukoiden siirtäminen

Tyypitetyn taulukon taustalla oleva ArrayBuffer siirretään sen .buffer-ominaisuuden kautta. Näkymää itseään ei voi siirtää, mutta sen puskuri voidaan.

const data = new Float64Array(100000);
worker.postMessage(data, [data.buffer]);
// data is now detached on this side.

Siirron vastaanottaminen

Vastaanottava osapuoli lukee siirretyn objektin kohdasta event.data aivan kuten kloonatun viestin. Erona on ainoastaan se, ettei kopiota tehty.

// worker.js
self.onmessage = (e) => {
  const buffer = e.data; // we now own this memory
  const view = new Uint8Array(buffer);
  view[0] = 255;
};

Tulosten lähettäminen takaisin

Worker voi siirtää puskurin takaisin käsittelyn jälkeen jälleen ilman kopiointia ja palauttaa omistajuuden pääsäikeelle.

// worker.js
self.onmessage = (e) => {
  const buffer = e.data;
  // ...process the bytes...
  self.postMessage(buffer, [buffer]); // transfer back
};

Siirron ja kloonauksen suorituskyky

Muutaman kilotavun kokoisilla tiedoilla ero on merkityksetön. Megatavujen kokoisen binääridatan kohdalla siirtäminen on huomattavasti nopeampaa ja välttää muistipiikin. Suurten puskurien kanssa kannattaa käyttää siirtoa.

Siirron jälkeisten käyttövirheiden välttäminen

Yleinen virhe on lukea puskuria sen siirtämisen jälkeen. Puskuria on aina pidettävä käytöstä poistuneena heti, kun se lisätään siirtoluetteloon.

worker.postMessage(buffer, [buffer]);
// BUG: buffer is detached here; this reads zero length.
// const len = buffer.byteLength; // 0

Kloonatun ja siirretyn datan yhdistäminen

Voitte lähettää objektin, joka sisältää puskurin, ja siirtää vain kyseisen puskurin. Objekti kloonataan, mutta luettelossa oleva puskuri siirretään.

const msg = { type: 'frame', pixels: buffer };
worker.postMessage(msg, [buffer]);
// msg.type is cloned; buffer is transferred.

Milloin siirtoa kannattaa käyttää

Siirrettäviä objekteja kannattaa käyttää kuvien, äänen ja videon käsittelyssä, suurissa numeerisissa laskutoimituksissa sekä kaikissa putkissa, joissa suuria binääridatamääriä siirretään säikeiden välillä. Pienelle JSON-tyyppiselle datalle tavallinen kloonaus on yksinkertaisempi ja riittävä.

Pikatesti

Testatkaa, kuinka hyvin ymmärrätte siirrettäviä objekteja.

Vastaa interaktiivisessa oppitunnissa

Kertaus

Opitte siirrettävistä objekteista:

Siirtoluettelo annetaan postMessage-kutsun toisena argumenttina.
ArrayBuffer ja muutamat muut objektit siirretään kopioimisen sijaan.
Lähettäjän puskuri irrotetaan siirron jälkeen.
Tyypitetty taulukko siirretään sen .buffer-ominaisuuden kautta.
Suurille binääridatamäärille käytetään siirtoa ja pienelle datalle kloonausta.

Seuraavaksi käsitellään workerien käyttötapauksia ja rajoituksia.

Aloita maksutta

Opi JavaScript tekoälytuutorin avulla — ilmaiseksi

Kirjoita ja suorita oikeaa koodia selaimessa, saa välitöntä apua tekoälytuutorilta ympäri vuorokauden ja jatka siitä, mihin jäit, verkossa tai sovelluksessa.

Kurssit: 59
Oppitunnit: 200

Aloita opiskelu maksutta Näytä koko kurssi

Usein kysytyt kysymykset

Onko oppitunti ”Siirrettävät objektit” ilmainen?

Kyllä — voit lukea täällä verkossa kokonaan ilmaiseksi mitkä tahansa JavaScript Academy-oppimispolun 3 oppituntia, myös oppitunnin “Siirrettävät objektit”. Sen jälkeen CoddyKit PRO avaa kaikki oppitunnit sekä interaktiiviset harjoitukset sisäänrakennetulla koodieditorilla ja ympäri vuorokauden toimivalla tekoälytuutorilla. JavaScript Academy-kurssilla on yhteensä 4 oppituntia.

Mitä opin oppitunnilla ”Siirrettävät objektit”?

Siirtäkää dataa tehokkaasti ilman kopiointia. Harjoittelet JavaScript Academy-aihetta koodilla, jonka suoritat suoraan selaimessa. Ympäri vuorokauden käytettävissä oleva tekoälytuutori vastaa kysymyksiisi oppitunnin aikana.

Tarvitsenko kokemusta aloittaakseni JavaScript Academy-opiskelun?

Aiempi kokemus ei ole tarpeen. CoddyKitin JavaScript Academy-oppimispolku sopii vasta-alkajista edistyneisiin, joten voit aloittaa tästä tai alusta ja edetä omaan tahtiisi. Tämä on oppitunti 3/4.

Kuinka kauan ”Siirrettävät objektit”-oppitunnin suorittaminen kestää?

Useimmat CoddyKitin oppitunnit kestävät noin 5–10 minuuttia. Jokainen oppitunti on lyhyt ja interaktiivinen, joten edistyt tasaisesti ja voit jatkaa siitä, mihin jäit – sekä verkossa että sovelluksessa.

Voinko kirjoittaa ja suorittaa koodia tällä JavaScript Academy-oppitunnilla?

Kyllä. Jokainen JavaScript Academy-oppitunti sisältää sisäänrakennetun koodieditorin, joten voit kirjoittaa ja suorittaa oikeaa koodia suoraan selaimessa ja saada välitöntä palautetta tekoälyltä – paikallista asennusta ei tarvita.

Kaikki tämän kurssin oppitunnit

← Takaisin: JavaScript Academy