Dalam JavaScript, ada beberapa pendekatan untuk meningkatkan antarmuka pengguna situs secara keseluruhan. Itu “Pekerja Web” adalah salah satu pendekatan yang memungkinkan thread utama tetap dijalankan tanpa diblokir. Ini terdiri dari mesin JavaScript terpisah, dan karenanya tidak dapat menjalankan fungsi thread utama.
Artikel ini akan membahas cara memanfaatkannya “Pekerja Web” untuk multithreading dalam JavaScript.
Apa itu Pekerja Web?
“Pekerja web” sesuai dengan API browser yang memungkinkan JavaScript menjalankan tugas secara paralel/bersamaan di thread terpisah/khusus.
Apa Kebutuhan Pekerja Web?
Karena JavaScript adalah single-thread, maka kode JavaScript yang kompleks memblokir thread UI, yaitu menghentikan jendela utama yang menangani semua tugas untuk menyegarkan, mengimplementasikan peristiwa input pengguna, dll. Dalam skenario seperti itu, pengalaman pengguna terpengaruh . Untuk mengatasi masalah ini, maka “Pekerja Web” mulai berlaku dan menyelesaikan pemblokiran thread UI.
Bagaimana Cara Menggunakan Pekerja Web untuk Multithreading Dengan JavaScript?
Untuk membuat sebuah “Pekerja Web” , gunakan konstruktor Pekerja. Sedemikian rupa sehingga dibutuhkan URL sebagai argumennya, yang sesuai dengan jalur file skrip pekerja yang mengimplementasikan fungsi yang diinginkan. Namun, untuk memasukkan kode pekerja dalam file HTML, gunakan a 'gumpal' untuk menulis kode pekerja.
Sintaks (Membuat Pekerja Web)
konstanta X = baru Pekerja ( 'pekerja.js' ) ;Sintaks (Mengirim Pesan ke Pekerja)
konstanta X = baru Pekerja ( 'pekerja.js' ) ;
Sintaks (Menerima Pesan dari Pekerja)
X. di pesan = fungsi ( peristiwa ) {menghibur. catatan ( peristiwa. data ) ;
} ;
Contoh: Pemanfaatan “Web Worker” untuk Menghitung Faktorial Suatu Angka di JavaScript
Contoh berikut menggunakan 'Pekerja()' konstruktor untuk membuat pekerja web dan menghitung faktorial suatu bilangan:
< html >
< kepala >
< gaya h2 = 'perataan teks: tengah;' > Contoh Pekerja Web h2 >
kepala >
< tubuh >
< naskah >
konstanta X = baru Pekerja ( URL. buatObjectURL ( baru Gumpal ( [
`
// Skrip pekerja
konstanta fakta = ( N ) => {
jika ( N == 0 || N == 1 ) {
kembali 1n ;
}
kalau tidak {
kembali BigInt ( N ) * fakta ( BigInt ( N ) - 1n ) ;
}
} ;
diri sendiri. di pesan = ( peristiwa ) => {
konstanta Dengan = fakta ( peristiwa. data ) ;
diri sendiri. pascaPesan ( Dengan. keString ( ) ) ;
} ; `
] , { jenis : 'teks/javascript' } ) ) ) ;
X. pascaPesan ( 15n ) ;
X. di pesan = ( peristiwa ) => {
konstanta keluar = peristiwa. data ;
menghibur. catatan ( 'Faktoral 15 Melalui Web Worker->' , keluar ) ;
} ;
tubuh >
html >
Dalam kode ini, terapkan langkah-langkah berikut:
- Pertama, tentukan judul yang disebutkan.
- Setelah itu, buat a “Pekerja Web” objek yang memiliki URL objek Blob yang berisi kode untuk pekerja.
- Kode yang didedikasikan untuk pekerja disertakan dalam fungsi anonim yang menghitung faktorial bilangan melalui fungsi rekursif.
- Selain itu, pekerja mendengarkan pesan yang dikirim melalui thread utama menggunakan “diri.pada pesan” acara, mengambil faktorial dari angka yang diteruskan, dan memberikan hasilnya ke thread utama melalui “postMessage()” metode.
- Di thread utama, buat instance pekerja dan kirimkan pesan dengan nomor “ 15n ”. Di Sini, ' N ” mengacu pada nilai “BigInt”.
- Setelah pekerja selesai menghitung faktorial, ia mengirimkan hasil/hasil kembali ke thread utama menggunakan “postMessage()” metode.
- Terakhir, thread utama mengambil/menerima hasilnya di 'di pesan' acara dan mengembalikan faktorial yang sesuai dari nomor di konsol.
Keluaran
Keuntungan Pekerja Web
Proses paralel : Dalam hal menjalankan kode yang sama secara paralel.
Tidak Ada Gangguan dalam Eksekusi Kode: Eksekusi kode dilakukan terlepas dari penyegaran dll. pada halaman saat ini.
Pelacakan Gerakan: Semua deteksi gerakan dilakukan di pekerja latar belakang.
Multithreading yang Diaktifkan: Ini mengaktifkan multithreading di JavaScript.
Peningkatan Kinerja: Optimalkan kinerja dengan melakukan tugas intensif/menantang di thread terpisah.
Pengalaman Pengguna yang Efektif: Ini menghindari pemblokiran thread utama, sehingga menghasilkan pengalaman pengguna yang responsif.
Keterbatasan Pekerja Web
Namun, ada beberapa keterbatasan dari pekerja web juga. Hal tersebut diutarakan sebagai berikut:
- Pemanfaatan memori yang lebih besar.
- Tidak dapat memperbarui DOM di thread pekerja atau memanggil objek window.
Kesimpulan
“Pekerja Web” sesuai dengan API browser yang memungkinkan JavaScript menjalankan tugas secara bersamaan di thread terpisah/khusus. Ini dapat dimanfaatkan dengan mengambil URL sebagai argumennya, yang sesuai dengan jalur file skrip pekerja. Blog ini membahas penggunaan “Web Worker” untuk multithreading di JavaScript.