Chrome 13 memperkenalkan pengiriman ArrayBuffer ke/dari Web Worker menggunakan algoritma yang disebut pembuatan salinan terstruktur. Hal ini memungkinkan postMessage() API menerima pesan yang bukan hanya string, tetapi jenis kompleks seperti objek File, Blob, ArrayBuffer, dan JSON. Cloning terstruktur juga didukung di Firefox versi lebih baru.
Lebih cepat lebih baik
Cloning terstruktur sangat bagus, tetapi tetap merupakan operasi salinan. Overhead untuk meneruskan ArrayBuffer 32 MB ke Pekerja dapat mencapai ratusan milidetik.
Versi baru browser berisi peningkatan performa yang besar untuk penerusan pesan, yang disebut Transferable Objects.
Dengan objek yang dapat ditransfer, data ditransfer dari satu konteks ke konteks lainnya. Ini adalah zero-copy, yang sangat meningkatkan performa pengiriman data ke Pekerja. Anggaplah ini sebagai pass-by-reference jika Anda berasal dari dunia C/C++. Namun, tidak seperti pass-by-reference, 'versi' dari konteks panggilan tidak lagi tersedia setelah ditransfer ke konteks baru. Misalnya, saat mentransfer ArrayBuffer dari aplikasi utama ke Pekerja, ArrayBuffer asli akan dihapus dan tidak dapat digunakan lagi. Kontennya (secara harfiah) ditransfer ke konteks Pekerja.
Untuk bermain dengan objek yang dapat ditransfer, ada versi baru postMessage() yang mendukung objek yang dapat ditransfer:
worker.postMessage(arrayBuffer, [transferableList]);
window.postMessage(arrayBuffer, targetOrigin, [transferableList]);
Untuk kasus pekerja, argumen pertama adalah pesan ArrayBuffer. Argumen kedua adalah daftar item yang harus ditransfer. Dalam contoh ini, Anda akan menentukan arrayBuffer dalam daftar yang dapat ditransfer.
Demo benchmark
Untuk melihat peningkatan performa aset yang dapat ditransfer, saya telah membuat demo.
Demo ini mengirimkan ArrayBuffer 32 MB ke pekerja dan kembali menggunakan postMessage(). Jika browser Anda tidak mendukung transfer, sampel akan kembali ke cloning terstruktur. Dengan rata-rata 5 kali dijalankan di berbagai browser, berikut adalah hasilnya:
Di MacBook Pro/10.6.8/2,53 GHz/Intel Core 2 Duo, FF adalah yang tercepat menggunakan cloning terstruktur. Rata-rata, diperlukan waktu 302 md untuk mengirim ArrayBuffer 32 MB ke pekerja dan mempostingnya kembali ke thread utama (RRT - Waktu Round Trip). Jika dibandingkan dengan yang dapat ditransfer, pengujian yang sama memerlukan waktu 6,6 md. Itu adalah peningkatan performa yang sangat besar.
Dengan kecepatan semacam ini, tekstur/mesh WebGL yang besar dapat diteruskan dengan lancar antara Pekerja dan aplikasi utama.
Mendeteksi fitur
Deteksi fitur ini sedikit rumit. Rekomendasi saya adalah mengirim ArrayBuffer kecil ke pekerja Anda. Jika buffer ditransfer dan tidak disalin, .byteLength-nya akan menjadi 0:
var ab = new ArrayBuffer(1);
worker.postMessage(ab, [ab]);
if (ab.byteLength) {
alert('Transferables are not supported in your browser!');
} else {
// Transferables are supported.
}
Dukungan: Saat ini Chrome 17+, Firefox, Opera, Safari, dan IE10+
Diperbarui (13-12-2011): Cuplikan kode untuk menampilkan tanda tangan webkitPostMessage() berbeda untuk jendela dan pekerja.
Diperbarui (03-11-2016): Menghapus awalan vendor dan memperbarui cuplikan kode