Pengenalan kepada JavaScript API Pekerja Web

Pekerja Web adalah API JavaScript yang membolehkan anda jalankan skrip dalam benang berasingan dari yang utama. Ia boleh menjadi berguna apabila anda tidak mahu sebarang halangan dalam pelaksanaan skrip utama, kerana skrip latar belakang esque.

API Pekerja Web adalah disokong di hampir semua pelayar, untuk maklumat yang lebih terperinci, lihat dokumentasi CanIUse. Sebelum masuk ke kod, mari kita lihat beberapa senario di mana anda mungkin mahu menggunakan API ini supaya anda boleh mendapatkan idea tentang apa yang saya maksudkan oleh skrip latar belakang-esque.

Gunakan kes-kes

Katakan ada skrip itu mengambil dan memproses fail. Sekiranya fail itu dengan ketara besar ia akan mengambil masa yang lama untuk diproses! Yang mungkin gerai skrip lain yang digunakan kemudiannya daripada dilaksanakan.

Walau bagaimanapun, jika pemprosesan fail dipindahkan ke thread latar belakang, dikenali sebagai benang pekerja, acara lain tidak akan disekat sehingga bekas itu selesai.

Skrip dilaksanakan dalam benang pekerja latar belakang dikenali sebagai skrip pekerja atau hanya pekerja.

Untuk contoh lain, bayangkan ada bentuk besar, diatur dalam tab. Ia skrip dengan cara mengemas kini kawalan dalam satu tab memberi kesan kepada beberapa kawalan pada orang lain.

Jika kemas kini tab lain mengambil sedikit masa pengguna tidak boleh terus menggunakan tab semasa tanpa peristiwa yang ditunda. Ini mungkin membekukan UI, kepada kecewa pengguna.

Oleh kerana pengguna tidak akan melihat tab lain semasa mengisi maklumat terkini, anda boleh kemas kini kawalan pada tab lain dalam benang latar belakang. Dengan cara ini, pengguna boleh terus menggunakan tab semasa dia mengisi, tanpa mana-mana skrip yang disekat oleh proses kemas kini kawalan dalam tab lain.

Begitu juga, jika anda mencari senario di mana skrip mungkin menghalang pengguna daripada menggunakan antara muka pengguna sehingga pelaksanaannya dilakukan, anda mungkin mempertimbangkan untuk memindahkannya ke thread pekerja, supaya dapat dilaksanakan di latar belakang.

Skop dan jenis pekerja

API Pekerja Web mungkin salah satu daripada API paling mudah untuk berfungsi. Ia mempunyai kaedah yang cukup mudah untuk membuat benang pekerja dan berkomunikasi dengan mereka dari skrip utama.

Skop benang pekerja global dalam konteks yang berbeza dari benang utama. Anda tidak dapat mengakses kaedah dan sifat tingkap objek seperti amaran() di dalam benang pekerja. Awak juga tidak boleh menukar DOM terus dari benang pekerja.

Walau bagaimanapun, anda boleh gunakan API yang banyak tingkap, contohnya Janji dan Ambil, di benang pekerja anda (lihat senarai penuh).

Anda juga boleh mempunyai benang pekerja bersarang: benang pekerja yang dibuat dari benang pekerja lain. Seorang pekerja yang dicipta oleh orang lain dipanggil a subworker.

Terdapat juga ramai jenis pekerja. Dua yang utama adalah pekerja berdedikasi dan kongsi.

Pekerja berdedikasi tergolong dalam konteks pengembaraan yang sama bahawa benang utamanya adalah milik. Bagaimanapun, pekerja yang dikongsi adalah hadir dalam konteks penyemakan imbas yang berbeza (misalnya, dalam iframe) dari skrip utama. Dalam kedua-dua kes, skrip utama dan pekerja mesti berada di domain yang sama.

Contoh dalam tutorial ini akan menjadi mengenai pekerja yang berdedikasi, yang merupakan jenis yang paling biasa.

Kaedah API

Lihat gambarajah di bawah untuk a Gambaran keseluruhan cepat semua kaedah utama yang membentuk API Pekerja Web.

The Pekerja () pembina mencipta benang pekerja yang berdedikasi dan mengembalikan objek rujukannya. Kemudian, kita menggunakan objek ini untuk berkomunikasi dengan pekerja tertentu itu.

The postMessage () kaedah digunakan dalam skrip utama dan pekerja untuk hantar data ke satu sama lain. Data dihantar kemudian diterima di sisi lain oleh onmessage Pengurus acara.

The tamatkan () kaedah menamatkan benang pekerja dari skrip utama. Penamatan ini adalah segera: sebarang pelaksanaan skrip semasa dan skrip yang belum selesai akan dibatalkan. The tutup () kaedah melakukan perkara yang sama, tetapi ia dipanggil oleh benang pekerja menutup sendiri.

Contoh kod

Sekarang, mari kita lihat beberapa kod sampel. The index.html halaman memegang skrip utama di dalam a

Kami bermula dengan penciptaan benang pekerja dari skrip utama.

  w = Pekerja baru ('worker.js'); 
 The Pekerja () pembina mengambil URL fail pekerja sebagai hujahnya.
 Kemudian, kami menambah pengendali acara untuk onmessage kejadian pekerja yang baru diwujudkan untuk menerima data daripadanya. The data harta benda e acara akan memegang data yang diterima.
  w = Pekerja baru ('worker.js'); w.onmessage = (e) => console.log ('Diterima daripada pekerja: $ e.data');  
 Sekarang, kita gunakan postMessage () kepada hantar beberapa data ke benang pekerja pada klik butang. The postMessage () kaedah boleh mengambil dua hujah. Yang pertama boleh menjadi jenis (rentetan, tatasusunan ...). Ia adalah data untuk dihantar ke benang pekerja (atau kepada skrip utama, apabila kaedah itu ada di benang pekerja).
 Parameter pilihan kedua adalah pelbagai objek yang boleh digunakan oleh benang pekerja (tetapi bukan oleh skrip utama, atau sebaliknya). Jenis objek dipanggil Boleh ditukar objek.
  document.querySelector ('button'). onclick = () => w.postMessage ('john');  
 Saya hanya menghantar nilai rentetan kepada benang pekerja.
 Di benang pekerja, kita perlu menambah onmessage penganjur acara itu akan menerima data dihantar kepadanya oleh skrip utama pada klik butang. Di dalam pengendali, kami melambatkan rentetan yang diterima dengan yang lain dan hantar hasilnya kembali ke skrip utama.
  console.info ('pekerja dicipta'); onmessage = (e) => postMessage ('Hi $ e.data');  
 Tidak seperti dalam skrip utama di mana kita terpaksa menggunakannya w objek rujukan kepada rujuk kepada thread pekerja tertentu di mana skrip kemudian menggunakannya onmessage dan postMessage kaedah, ada tidak memerlukan objek rujukan dalam benang pekerja untuk menunjukkan kepada benang utama.
 Kod berfungsi seperti berikut. Apabila penyemak imbas dimuatkan index.html, konsol akan menunjukkan "pekerja dicipta" mesej sebaik sahaja pekerja () pembina dijalankan dalam benang utama, mewujudkan pekerja baru.
 Apabila anda mengklik butang pada halaman, anda akan dapat "Diterima daripada pekerja: Hi john" mesej dalam konsol, yang merupakan rentetan yang ada diikat dalam benang pekerja dengan data yang dihantar kepadanya, dan kemudiannya dihantar semula ke skrip utama.