Rumah > Artikel > hujung hadapan web > 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
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 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 -
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")
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.
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)
const worker = new Worker('./worker.js', { type: 'module' })
Comlink.expose(value, endpoint?, allowedOrigins?)
worker.terminate()
Bacaan Lanjut
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!