Semua yang anda perlu tahu tentang pekerja web untuk bermula.

Baru-baru ini saya telah bermain-main dengan pekerja web dan ini adalah panduan komprehensif tentang semua yang anda perlu tahu untuk mula menggunakan pekerja web.

Jika anda ingin melangkau membaca blog dan menyemak kod sebaliknya, berikut ialah repositori github yang mengandungi semua coretan.

Repositori Pekerja Web Github

 

Jadual Kandungan

• Salah Tanggapan Biasa
• Persediaan Asas Pekerja Web
  • Persediaan Pekerja Web dengan JavaScript Asli
  • Persediaan Pekerja Web dengan Comlink
• Bagaimana untuk menyemak sama ada pekerja saya telah didaftarkan dengan betul?
• Bacaan Lanjut

 
 

Kesalahpahaman biasa

Jadi, apa yang membuatkan saya meneroka pekerja web ialah dalam platform yang saya sedang membina tugas yang berat secara pengiraan telah menyekat UI.
Jadi saya fikir, 'Hah, okey, bagaimana saya boleh membuat ini tidak menyekat UI'? Bolehkah saya menggunakan setTimeout untuk memastikan semua kod dalam utas utama telah selesai dilaksanakan, selepas itu tugas yang berat secara pengiraan boleh dijalankan?

Jadi inilah salah tanggapan — menggunakan setTimeout tidak bermakna UI tidak akan disekat. Ya, segala-galanya pada urutan utama akan dilaksanakan sebelum panggilan balik setTimeout berjalan walau bagaimanapun, panggilan balik ini berjalan dalam urutan utama itu sendiri apabila ia muncul daripada Baris Gilir Tugasan Makro sekali gus menjadikan UI tidak responsif.

Untuk mengetahui lebih lanjut tentang cara setTimeout berfungsi di sini ialah beberapa rujukan —

• JavaScript tak segerak & Gelung Acara dari awal - Akshay Saini
• Gelung Acara, API Web, Baris Tugas - Lydia Hallie

 
 

Persediaan Asas Pekerja Web

JavaScript sememangnya merupakan "bahasa satu-utas" tetapi, pekerja web membolehkan kami menjalankan kod yang berat secara pengiraan dalam urutan yang berasingan.

Sebelum kita bermula, berikut adalah beberapa perkara yang perlu diberi perhatian -

• Pekerja web tidak boleh berinteraksi dengan DOM
• Skop pekerja web ialah diri sendiri, bukannya tetingkap.
• Pekerja adalah agak berat, dan tidak bertujuan untuk digunakan dalam jumlah yang banyak. Sebagai contoh, adalah tidak sesuai untuk melancarkan satu pekerja untuk setiap piksel imej empat megapiksel. [Ruj - Spesifikasi HTML]
• Selain itu, pekerja web bukan tentang membuat sesuatu mengambil masa 2 saat dan bukannya 4 saat, ini tentang melakukan perkara itu dengan pembekuan DOM selama 0 saat. [Ruj - Pekerja Web lambat & tidak mengapa - Calvin Metcalf]
• Pekerja seterusnya boleh melahirkan pekerja baharu, selagi pekerja tersebut dihoskan dalam asal yang sama dengan halaman induk. [Ruj - MDN]

 

Pekerja Web menggunakan JavaScript asli

1. Buat fail JavaScript baharu yang mengandungi kod yang anda mahu jalankan dalam urutan pekerja. (kata pekerja.js)
2. Dalam skrip utama nyatakan pekerja -

const worker = new Worker("./worker.js")

Nota: worker.js bukan modul dan tidak boleh menggunakan pernyataan import. belum lagi. :')

Untuk menggunakan worker.js sebagai modul, nyatakan jenis: modul dalam pilihan pembina.

const worker = new Worker("./worker.js")

1. Data dihantar ke sana ke mari pekerja melalui sistem mesej — kedua-dua pihak menghantar mesej mereka menggunakan kaedah postMessage() dan membalas mesej melalui pengendali acara onmessage
2. Untuk menghantar objek kompleks dengan rujukan kitaran dalam postMessage() gunakan kaedah structuredClone.
3. Untuk menamatkan pekerja web, gunakan kaedah penamatan API Pekerja. Ini tidak memberi peluang kepada pekerja untuk menyelesaikan operasinya yang sedang berjalan; ia dihentikan serta merta.

const worker = new Worker('./worker.js', { type: 'module' })

 
Menyatukan Semuanya

Sekarang, mari lihat rupa kod kami selepas menyepadukan pekerja web.

Kod Benang Utama:

worker.terminate() 

Kod Benang Pekerja:

// ...
function workerFunction() {
  // Don't spin up a new worker instance if the process has already been started.
  if (statusElement.textContent !== PROCESS_STATUS.PROCESSING && window.Worker) {
    const worker = new Worker('./worker.js', {
      type: 'module'
    })

    // Sending 10000000000000 to the web worker
    worker.postMessage(10000000000000)

    statusElement.textContent = PROCESS_STATUS.PROCESSING

    // This piece of code is executed after worker finishes its task and returns data. 
    worker.onmessage = function (event) {
      statusElement.textContent = event.data
    }
  }
}
// ...

Dan hasilnya:

Apabila kami menjalankan aplikasi, anda akan dapati bahawa tugasan yang berat secara pengiraan dilaksanakan tanpa menyekat UI.

 

Persediaan Pekerja Web dengan Comlink

Comlink ialah pustaka kecil (1.1kB), ia menghilangkan halangan mental untuk memikirkan logik postMessage.

Pada tahap yang lebih abstrak ia merupakan pelaksanaan RPC untuk postMessage dan Proksi ES6.

Sebab khusus mengapa saya menggunakan Comlink ialah saya tidak dapat menghantar fungsi dari urutan utama kepada pekerja menggunakan JavaScript biasa. Menggunakan proksi Comlink, saya dapat dengan mudah menghantar fungsi panggil balik dari utas utama kepada pekerja. [Rujuk bahagian ini]

Untuk mula menggunakan comlink dalam projek anda, pasang pustaka

const worker = new Worker("./worker.js")

Untuk bermula dengan perpustakaan ini, kita perlu tahu tentang kaedah berikut -

Comlink.wrap(titik akhir)

• Ia membungkus objek terdedah pekerja, mengembalikan proksi yang anda boleh berinteraksi seolah-olah ia objek tempatan.
• Proksi akan mempunyai semua sifat dan fungsi nilai terdedah, tetapi akses dan seruan sememangnya tidak segerak. iaitu jika fungsi mengembalikan nombor, ia kini akan mengembalikan janji untuk nombor tersebut.

const worker = new Worker('./worker.js', { type: 'module' })

Comlink.expose(value, endpoint?, allowedOrigins?)

• Fungsi expose mendedahkan nilai dari satu thread ke thread lain (iaitu mendedahkan objek dari worker ke thread utama)

worker.terminate() 

 

Bagaimana untuk menyemak sama ada pekerja saya telah didaftarkan dengan betul?

• Untuk menyemak sama ada fail pekerja telah didaftarkan dalam penyemak imbas web (saya menggunakan Chrome)
• Klik kanan → Periksa, dan pergi ke Panel Sumber di mana anda akan menemui fail pekerja.
• Apabila ditamatkan, fail pekerja tidak sepatutnya kelihatan dalam panel Sumber
• Sekiranya, anda masih boleh melihat fail pekerja selepas menamatkan pekerja, kemungkinan besar anda telah mendaftarkan beberapa pekerja dan tidak semuanya telah ditamatkan perkhidmatan.

 

Bacaan Lanjut

• Pengendali Pemindahan & Pendengar Acara
• Pekerja Kongsi
• Objek Boleh Pindah

Atas ialah kandungan terperinci Semua yang anda perlu tahu tentang pekerja web untuk bermula.. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!