Akademi JavaScript · Pelajaran

Objek Boleh Dipindahkan

Pindahkan data dengan cekap tanpa menyalinnya.

Pelajaran 3 daripada 413 langkah

Objek Boleh Dipindahkan ialah pelajaran Akademi JavaScript percuma di CoddyKit. Ini ialah pelajaran 3 daripada 4. Sebanyak 3 pelajaran dalam laluan pembelajaran ini boleh dibaca sepenuhnya secara percuma — selepas itu, CoddyKit PRO membuka akses kepada semua pelajaran, serta latihan praktikal dengan penyunting kod terbina dalam dan tutor kecerdasan buatan yang tersedia 24/7. Pelajaran ini merupakan sebahagian daripada laluan pembelajaran Akademi JavaScript, dan kemajuan anda disegerakkan merentas web serta aplikasi CoddyKit. Kursus Akademi JavaScript merangkumi sejumlah 4 pelajaran.

Kos Pengklonan

Pengklonan berstruktur menyalin data bait demi bait. Untuk buffer besar (imej, audio, tatasusunan besar), penyalinan ini perlahan dan menggandakan penggunaan memori. Objek boleh dipindahkan menyelesaikan masalah ini dengan memindahkan pemilikan dan bukannya menyalin.

Apa yang Boleh Dipindahkan

Hanya jenis objek tertentu boleh dipindahkan, terutamanya ArrayBuffer. Jenis lain termasuk MessagePort, ImageBitmap dan OffscreenCanvas.

ArrayBuffer — memori binari mentah
MessagePort — titik hujung saluran
ImageBitmap — data imej yang dinyahkod

Senarai Pemindahan

postMessage menerima argumen kedua: senarai objek yang boleh dipindahkan. Objek dalam senarai itu dipindahkan, bukan disalin.

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

Pemilikan Berpindah

Selepas pemindahan, pihak pengirim tidak lagi boleh menggunakan buffer; buffer menjadi terpisah (byteLength 0). Pihak penerima kini memiliki memori asas yang sama, tanpa salinan dibuat.

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

Memindahkan Tatasusunan Berjenis

Anda memindahkan ArrayBuffer asas bagi tatasusunan berjenis melalui sifat .buffer. view itu sendiri tidak boleh dipindahkan, tetapi buffer miliknya boleh dipindahkan.

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

Menerima Pemindahan

Pihak penerima membaca objek yang dipindahkan daripada event.data, sama seperti mesej yang diklon. Perbezaannya semata-mata kerana tiada penyalinan berlaku.

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

Menghantar Kembali Hasil

worker boleh memindahkan buffer kembali selepas pemprosesan, sekali lagi tanpa penyalinan, lalu mengembalikan pemilikan kepada utas utama.

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

Prestasi Pemindahan berbanding Pengklonan

Untuk beberapa kilobait, perbezaannya boleh diabaikan. Untuk megabait data binari, pemindahan jauh lebih pantas dan mengelakkan lonjakan memori. Gunakannya untuk buffer besar.

Mengelakkan Pepijat Penggunaan Selepas Pemindahan

Kesilapan biasa ialah membaca buffer selepas memindahkannya. Sentiasa anggap buffer sudah tiada sebaik sahaja muncul dalam senarai pemindahan.

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

Menggabungkan Data yang Diklon dan Dipindahkan

Anda boleh menghantar objek yang mengandungi buffer dan memindahkan buffer itu sahaja. Objek diklon; buffer yang disenaraikan dipindahkan.

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

Bila Hendak Menggunakan Pemindahan

Gunakan objek boleh dipindahkan untuk pemprosesan imej, audio dan video, pengiraan berangka besar, serta sebarang saluran paip yang memindahkan blok data binari besar antara utas. Untuk data kecil seperti JSON, pengklonan biasa lebih mudah dan memadai.

Semakan Pantas

Uji pemahaman Anda tentang objek yang boleh dipindahkan.

Jawab dalam pelajaran interaktif

Ringkasan

Anda telah mempelajari objek yang boleh dipindahkan:

Hantar senarai pemindahan sebagai argumen kedua kepada postMessage.
ArrayBuffer (dan beberapa jenis lain) berpindah dan bukannya disalin.
buffer pengirim menjadi terpisah selepas itu.
Pindahkan tatasusunan berjenis melalui .buffer miliknya.
Gunakannya untuk data binari besar; klon data kecil.

Seterusnya, kegunaan dan batasan worker.

Percuma untuk bermula

Pelajari JavaScript dengan tutor kecerdasan buatan — percuma

Tulis dan jalankan kod sebenar dalam pelayar anda, dapatkan bantuan segera daripada tutor kecerdasan buatan yang tersedia 24/7, dan sambung semula dari tempat anda berhenti di web atau dalam aplikasi.

Kursus: 59
Pelajaran: 200

Mula belajar secara percuma Lihat kursus penuh

Soalan Lazim

Adakah pelajaran “Objek Boleh Dipindahkan” percuma?

Ya — sebanyak 3 pelajaran dalam laluan pembelajaran Akademi JavaScript, termasuk “Objek Boleh Dipindahkan”, boleh dibaca sepenuhnya secara percuma di web ini. Selepas itu, CoddyKit PRO membuka akses kepada semua pelajaran, serta latihan interaktif dengan penyunting kod terbina dalam dan tutor kecerdasan buatan yang tersedia 24/7. Kursus Akademi JavaScript merangkumi sejumlah 4 pelajaran.

Apakah yang akan saya pelajari dalam “Objek Boleh Dipindahkan”?

Pindahkan data dengan cekap tanpa menyalinnya. Anda berlatih Akademi JavaScript menggunakan kod praktikal yang dijalankan terus dalam pelayar, manakala tutor kecerdasan buatan 24/7 menjawab soalan anda semasa anda mengikuti pelajaran.

Adakah saya memerlukan pengalaman untuk memulakan Akademi JavaScript?

Tiada pengalaman terdahulu diperlukan. Pembelajaran Akademi JavaScript di CoddyKit disusun untuk pelajar daripada peringkat pemula hingga lanjutan, jadi anda boleh bermula di sini atau dari awal dan belajar mengikut kadar anda sendiri. Ini ialah pelajaran 3 daripada 4.

Berapa lamakah pelajaran “Objek Boleh Dipindahkan” diambil?

Kebanyakan pelajaran CoddyKit mengambil masa kira-kira 5–10 minit. Setiap pelajaran ringkas dan interaktif, jadi anda boleh membuat kemajuan secara berterusan dan menyambung tepat dari tempat anda berhenti di web atau aplikasi.

Bolehkah saya menulis dan menjalankan kod dalam pelajaran Akademi JavaScript ini?

Ya. Setiap pelajaran Akademi JavaScript menyertakan penyunting kod terbina dalam, jadi anda boleh menulis dan menjalankan kod sebenar terus dalam pelayar serta menerima maklum balas kecerdasan buatan serta-merta — tanpa memerlukan persediaan setempat.

Semua pelajaran dalam kursus ini

← Kembali ke Akademi JavaScript