Memindahkan tugas berat ke thread latar belakang kini lebih mudah dengan modul JavaScript di pekerja web.
JavaScript adalah single-threaded, yang berarti hanya dapat melakukan satu operasi pada satu waktu. Hal ini intuitif dan berfungsi dengan baik untuk banyak kasus di web, tetapi dapat menjadi masalah saat kita perlu melakukan tugas berat seperti pemrosesan data, penguraian, komputasi, atau analisis. Seiring semakin banyak aplikasi kompleks yang dikirimkan di web, kebutuhan akan pemrosesan multi-thread meningkat.
Di platform web, primitif utama untuk threading dan paralelisme adalah Web Workers API. Pekerja adalah abstraksi ringan di atas thread sistem operasi yang mengekspos API penerusan pesan untuk komunikasi antar-thread. Hal ini dapat sangat berguna saat melakukan komputasi yang mahal atau beroperasi pada set data besar, sehingga thread utama dapat berjalan lancar saat melakukan operasi yang mahal pada satu atau beberapa thread latar belakang.
Berikut adalah contoh umum penggunaan pekerja, dengan skrip pekerja memproses pesan dari thread utama dan merespons dengan mengirim kembali pesannya sendiri:
page.js:
const worker = new Worker('worker.js');
worker.addEventListener('message', e => {
console.log(e.data);
});
worker.postMessage('hello');
worker.js:
addEventListener('message', e => {
if (e.data === 'hello') {
postMessage('world');
}
});
Web Worker API telah tersedia di sebagian besar browser selama lebih dari sepuluh tahun. Meskipun pekerja memiliki dukungan browser yang sangat baik dan dioptimalkan dengan baik, hal ini juga berarti pekerja sudah ada jauh sebelum modul JavaScript. Karena tidak ada sistem modul saat pekerja dirancang, API untuk memuat kode ke dalam pekerja dan menyusun skrip tetap serupa dengan pendekatan pemuatan skrip sinkron yang umum pada tahun 2009.
Histori: pekerja klasik
Konstruktor Pekerja menggunakan URL skrip klasik, yang bersifat relatif terhadap URL dokumen. Fungsi ini akan langsung menampilkan referensi ke instance pekerja baru,
yang mengekspos antarmuka pesan serta metode terminate()
yang langsung menghentikan dan
menghancurkan pekerja.
const worker = new Worker('worker.js');
Fungsi importScripts()
tersedia dalam pekerja web untuk memuat kode tambahan, tetapi
menjeda eksekusi pekerja untuk mengambil dan mengevaluasi setiap skrip. Tag ini juga mengeksekusi skrip dalam cakupan global seperti tag <script>
klasik, yang berarti variabel dalam satu skrip dapat ditimpa oleh variabel dalam skrip lain.
worker.js:
importScripts('greet.js');
// ^ could block for seconds
addEventListener('message', e => {
postMessage(sayHello());
});
greet.js:
// global to the whole worker
function sayHello() {
return 'world';
}
Karena alasan ini, pekerja web secara historis telah memberikan efek yang berlebihan pada arsitektur
aplikasi. Developer harus membuat alat dan solusi yang cerdas untuk memungkinkan
penggunaan pekerja web tanpa mengorbankan praktik pengembangan modern. Sebagai contoh, bundler seperti
webpack menyematkan implementasi loader modul kecil ke dalam kode yang dihasilkan yang menggunakan importScripts()
untuk pemuatan kode, tetapi menggabungkan modul dalam fungsi untuk menghindari tabrakan variabel dan menyimulasikan
impor dan ekspor dependensi.
Memasukkan pekerja modul
Mode baru untuk pekerja web dengan ergonomi dan manfaat performa modul
JavaScript dikirimkan di Chrome 80, yang disebut pekerja modul. Konstruktor
Worker
kini menerima opsi {type:"module"}
baru, yang mengubah pemuatan dan
eksekusi skrip agar cocok dengan <script type="module">
.
const worker = new Worker('worker.js', {
type: 'module'
});
Karena pekerja modul adalah modul JavaScript standar, pekerja modul dapat menggunakan pernyataan impor dan ekspor. Seperti semua modul JavaScript, dependensi hanya dieksekusi satu kali dalam konteks tertentu (thread utama, pekerja, dll.), dan semua impor mendatang mereferensikan instance modul yang telah dieksekusi. Pemuatan dan eksekusi modul JavaScript juga dioptimalkan oleh browser. Dependensi modul dapat dimuat sebelum modul dieksekusi, yang memungkinkan seluruh hierarki modul dimuat secara paralel. Pemuatan modul juga meng-cache kode yang diuraikan, yang berarti modul yang digunakan di thread utama dan di pekerja hanya perlu diuraikan satu kali.
Beralih ke modul JavaScript juga memungkinkan penggunaan impor
dinamis untuk kode pemuatan lambat tanpa memblokir eksekusi pekerja. Impor dinamis jauh lebih eksplisit daripada menggunakan importScripts()
untuk memuat dependensi,
karena ekspor modul yang diimpor ditampilkan, bukan mengandalkan variabel global.
worker.js:
import { sayHello } from './greet.js';
addEventListener('message', e => {
postMessage(sayHello());
});
greet.js:
import greetings from './data.js';
export function sayHello() {
return greetings.hello;
}
Untuk memastikan performa yang baik, metode importScripts()
lama tidak tersedia dalam pekerja
modul. Mengalihkan pekerja untuk menggunakan modul JavaScript berarti semua kode dimuat dalam mode
ketat. Perubahan
penting lainnya adalah nilai this
dalam cakupan tingkat atas modul JavaScript adalah
undefined
, sedangkan dalam pekerja klasik, nilainya adalah cakupan global pekerja. Untungnya, selalu ada self
global yang memberikan referensi ke cakupan global. Fungsi ini tersedia di
semua jenis pekerja termasuk pekerja layanan, serta di DOM.
Memuat pekerja secara otomatis dengan modulepreload
Salah satu peningkatan performa yang signifikan yang disertakan dengan pekerja modul adalah kemampuan untuk melakukan pramuat pekerja dan dependensinya. Dengan pekerja modul, skrip dimuat dan dieksekusi sebagai modul JavaScript standar, yang berarti skrip dapat dimuat sebelumnya dan bahkan diurai sebelumnya menggunakan modulepreload
:
<!-- preloads worker.js and its dependencies: -->
<link rel="modulepreload" href="worker.js">
<script>
addEventListener('load', () => {
// our worker code is likely already parsed and ready to execute!
const worker = new Worker('worker.js', { type: 'module' });
});
</script>
Modul yang dimuat sebelumnya juga dapat digunakan oleh thread utama dan pekerja modul. Hal ini berguna untuk modul yang diimpor dalam kedua konteks, atau jika tidak dapat diketahui terlebih dahulu apakah modul akan digunakan di thread utama atau di pekerja.
Sebelumnya, opsi yang tersedia untuk memuat skrip pekerja web secara offline terbatas dan tidak
selalu dapat diandalkan. Pekerja klasik memiliki jenis resource "pekerja" sendiri untuk pramuat, tetapi tidak ada browser yang menerapkan <link rel="preload" as="worker">
. Akibatnya, teknik utama
yang tersedia untuk melakukan pramuat pekerja web adalah menggunakan <link rel="prefetch">
, yang sepenuhnya
bergantung pada cache HTTP. Jika digunakan bersama dengan header penyimpanan dalam cache yang benar, hal ini memungkinkan
penghindaran pembuatan instance pekerja yang harus menunggu untuk mendownload skrip pekerja. Namun, tidak seperti
modulepreload
, teknik ini tidak mendukung pramuat dependensi atau pra-parsing.
Bagaimana dengan pekerja bersama?
Pekerja bersama telah
diupdate dengan dukungan untuk modul JavaScript mulai Chrome 83. Seperti pekerja khusus, membuat pekerja bersama dengan opsi {type:"module"}
kini memuat skrip pekerja sebagai modul, bukan skrip klasik:
const worker = new SharedWorker('/worker.js', {
type: 'module'
});
Sebelum dukungan modul JavaScript, konstruktor SharedWorker()
hanya mengharapkan
URL dan argumen name
opsional. Hal ini akan terus berfungsi untuk penggunaan pekerja bersama klasik; tetapi
membuat pekerja bersama modul memerlukan penggunaan argumen options
baru. Opsi
yang tersedia
sama dengan opsi untuk pekerja khusus, termasuk opsi name
yang menggantikan
argumen name
sebelumnya.
Bagaimana dengan pekerja layanan?
Spesifikasi pekerja layanan telah
diperbarui untuk mendukung penerimaan
modul JavaScript sebagai titik entri, menggunakan opsi {type:"module"}
yang sama dengan pekerja modul,
tetapi perubahan ini belum diterapkan di browser. Setelah itu, Anda dapat membuat instance pekerja layanan menggunakan modul JavaScript menggunakan kode berikut:
navigator.serviceWorker.register('/sw.js', {
type: 'module'
});
Setelah spesifikasi diperbarui, browser mulai menerapkan perilaku baru. Hal ini memerlukan waktu karena ada beberapa komplikasi tambahan yang terkait dengan menghadirkan modul JavaScript ke pekerja layanan. Pendaftaran pekerja layanan perlu membandingkan skrip yang diimpor dengan versi sebelumnya yang di-cache saat menentukan apakah akan memicu update, dan hal ini perlu diterapkan untuk modul JavaScript saat digunakan untuk pekerja layanan. Selain itu, pekerja layanan harus dapat mengabaikan cache untuk skrip dalam kasus tertentu saat memeriksa update.
Referensi tambahan dan bacaan lebih lanjut
- Status fitur, konsensus browser, dan standardisasi
- Penambahan spesifikasi pekerja modul asli
- Modul JavaScript untuk pekerja bersama
- Modul JavaScript untuk pekerja layanan: Status penerapan Chrome