API Pengantar Pekerja Web JavaScript

Pekerja Web adalah API JavaScript yang memungkinkan Anda untuk jalankan skrip di utas terpisah dari yang utama. Ini bisa berguna ketika Anda tidak ingin ada penghalang dalam pelaksanaan skrip utama, karena skrip latar belakang-esque.

API Pekerja Web adalah didukung di hampir semua browser, untuk informasi lebih detail, lihat di CanIUse docs. Sebelum masuk ke kode, mari kita lihat beberapa skenario di mana Anda mungkin ingin menggunakan API ini sehingga Anda bisa mendapatkan ide tentang apa yang saya maksud dengan skrip background-esque.

Gunakan kasing

Katakanlah ada skrip itu mengambil dan memproses file. Jika suatu file sangat besar itu akan butuh waktu lama untuk diproses! Yang mungkin menghentikan skrip lain yang dipanggil kemudian agar tidak dieksekusi.

Namun, jika pemrosesan file dipindahkan ke utas latar belakang, Dikenal sebagai benang pekerja, acara lainnya tidak akan diblokir sampai yang sebelumnya selesai.

Naskah dieksekusi di utas pekerja latar belakang dikenal sebagai naskah pekerja atau hanya pekerja.

Sebagai contoh lain, bayangkan ada bentuk besar, diatur dalam tab. Itu ditulis dengan cara yang memperbarui kontrol di satu tab mempengaruhi beberapa kontrol pada orang lain.

Jika pembaruan tab lain membutuhkan waktu pengguna tidak dapat terus menggunakan tab saat ini tanpa acara yang ditunda. Ini mungkin membekukan UI, membuat pengguna kecewa.

Karena pengguna tidak akan melihat tab lain saat mengisi yang sekarang, Anda bisa perbarui kontrol tab lain di utas latar belakang. Dengan cara ini, pengguna dapat terus menggunakan tab saat ini yang sedang dia isi, tanpa skripnya diblokir oleh proses pembaruan kontrol di tab lain.

Begitu juga jika Anda menemukan skenario tempat skrip mungkin memblokir pengguna dari menggunakan antarmuka pengguna sampai pelaksanaannya selesai, Anda dapat mempertimbangkan untuk memindahkannya ke utas pekerja, sehingga bisa dieksekusi di latar belakang.

Lingkup dan jenis pekerja

API Pekerja Web mungkin adalah salah satu API paling sederhana untuk bekerja dengannya. Ini memiliki metode yang sangat mudah buat utas pekerja dan berkomunikasi dengan mereka dari skrip utama.

Ruang lingkup global utas pekerja berada dalam konteks yang berbeda dari utas utama. Kamu tidak dapat mengakses metode dan properti dari jendela obyek seperti waspada() di dalam utas pekerja. Kamu juga tidak dapat mengubah DOM secara langsung dari utas pekerja.

Namun kamu bisa gunakan banyak API yang masuk jendela, contohnya Janji dan Mengambil, di utas pekerja Anda (lihat daftar lengkap).

Anda juga bisa memilikinya utas pekerja bersarang: utas pekerja dibuat dari utas pekerja lain. Seorang pekerja yang diciptakan oleh orang lain disebut a pekerja sub.

Ada juga banyak jenis pekerja. Dua yang utama adalah pekerja yang berdedikasi dan berbagi.

Pekerja yang berdedikasi termasuk dalam konteks penelusuran yang sama bahwa utas utama mereka. Namun pekerja bersama adalah hadir dalam konteks penelusuran yang berbeda (misalnya, dalam iframe) dari skrip utama. Dalam kedua kasus, naskah utama dan para pekerja harus berada di domain yang sama.

Contoh dalam tutorial ini adalah tentang pekerja yang berdedikasi, yang merupakan tipe paling umum.

Metode API

Lihat diagram di bawah ini untuk a gambaran umum singkat dari semua metode utama yang merupakan API Pekerja Web.

Itu Pekerja() konstruktor menciptakan utas pekerja yang berdedikasi dan mengembalikan objek referensi. Kemudian, kami menggunakan objek ini untuk berkomunikasi dengan pekerja tertentu.

Itu postMessage () Metode digunakan di kedua skrip utama dan pekerja untuk saling mengirim data. Data yang dikirim kemudian diterima di sisi lain oleh onmessage pengendali acara.

Itu mengakhiri() metode mengakhiri utas pekerja dari skrip utama. Pemutusan ini adalah segera: skrip eksekusi dan skrip yang tertunda saat ini akan dibatalkan. Itu dekat() Metode melakukan hal yang sama, tapi itu dipanggil oleh utas pekerja menutup sendiri.

Kode contoh

Sekarang, mari kita lihat beberapa kode sampel. Itu index.html halaman memegang naskah utama di dalam a

Kami mulai dengan pembuatan utas pekerja dari skrip utama.

  w = Pekerja baru ('pekerja.js'); 
 Itu Pekerja() konstruktor mengambil URL file pekerja sebagai argumennya.
 Kemudian, kami menambahkan pengendali acara untuk onmessage acara instance pekerja yang baru dibuat untuk menerima data darinya. Itu data properti dari e acara akan menampung data yang diterima.
  w = Pekerja baru ('pekerja.js'); w.onmessage = (e) => console.log ('Diterima dari pekerja: $ e.data');  
 Sekarang, kita gunakan postMessage () untuk mengirim beberapa data ke utas pekerja pada klik tombol. Itu postMessage () Metode dapat mengambil dua argumen. Yang pertama bisa dari jenis apa pun (string, array ...). Ini datanya untuk dikirim ke utas pekerja (atau ke skrip utama, ketika metode ini ada di utas pekerja).
 Parameter kedua, opsional adalah array objek yang dapat digunakan oleh utas pekerja (tetapi tidak dengan skrip utama, atau sebaliknya). Benda-benda semacam ini disebut Dapat ditransfer benda.
  document.querySelector ('button'). onclick = () => w.postMessage ('john');  
 Saya hanya mengirim nilai string ke utas pekerja.
 Di utas pekerja, kita perlu menambahkan onmessage pengendali acara itu akan menerima data dikirim ke sana oleh skrip utama pada klik tombol. Di dalam pawang, kita menyatukan string yang diterima dengan yang lain dan kirim hasilnya kembali ke skrip utama.
  console.info ('pekerja diciptakan'); onmessage = (e) => postMessage ('Hai $ e.data');  
 Berbeda dengan di skrip utama tempat kami harus menggunakan w referensi objek ke lihat utas pekerja khusus di mana skrip kemudian menggunakan onmessage dan postMessage metode, ada tidak perlu untuk objek referensi di utas pekerja untuk menunjuk ke utas utama.
 Kode berfungsi sebagai berikut. Saat browser dimuat index.html, konsol akan menampilkan "pekerja diciptakan" pesan segera setelah pekerja() konstruktor dieksekusi di utas utama, menciptakan pekerja baru.
 Ketika Anda mengklik tombol pada halaman, Anda akan mendapatkan "Diterima dari pekerja: Hai john" pesan di konsol, yang merupakan string yang tadi digabung dalam utas pekerja dengan data yang dikirim ke sana, dan kemudian dikirim kembali ke skrip utama.