Threading web dengan pekerja modul

Memindahkan pekerjaan berat ke thread latar belakang kini lebih mudah dengan modul JavaScript di pekerja web.

Jason Miller

JavaScript adalah thread tunggal, yang berarti JavaScript hanya dapat melakukan satu operasi pada satu waktu. Cara ini intuitif dan berfungsi dengan baik untuk banyak kasus di web, tetapi dapat menjadi masalah saat kita perlu melakukan tugas yang berat seperti pemrosesan data, penguraian, komputasi, atau analisis. Seiring makin banyaknya aplikasi yang kompleks di web, kebutuhan untuk pemrosesan multi-thread semakin meningkat.

Di platform web, primitif utama untuk threading dan paralelisme adalah Web Workers API. Pekerja adalah abstraksi ringan selain thread sistem operasi yang mengekspos pesan yang meneruskan API untuk komunikasi antar-thread. Hal ini dapat sangat berguna saat melakukan komputasi yang mahal atau beroperasi pada set data besar, sehingga memungkinkan thread utama 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 mengirimkan 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 jika itu berarti pekerja memiliki dukungan browser yang sangat baik dan dioptimalkan dengan baik, itu juga berarti mereka sudah lama menggunakan modul JavaScript sebelumnya. Karena tidak ada sistem modul saat pekerja dirancang, API untuk memuat kode ke dalam pekerja dan menulis skrip tetap serupa dengan pendekatan pemuatan skrip sinkron yang umum digunakan pada tahun 2009.

Histori: pekerja klasik

Konstruktor Worker mengambil URL skrip klasik, yang relatif terhadap URL dokumen. Metode ini segera menampilkan referensi ke instance pekerja baru, yang menampilkan 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 Assistant juga menjalankan skrip dalam cakupan global seperti tag <script> klasik, yang berarti variabel dalam satu skrip dapat ditimpa oleh variabel di 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 memberlakukan efek yang sangat besar pada arsitektur aplikasi. Developer harus membuat alat dan solusi yang cerdas untuk memungkinkan penggunaan pekerja web tanpa meninggalkan praktik pengembangan modern. Sebagai contoh, pemaket 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 konflik variabel serta menyimulasikan impor dan ekspor dependensi.

Masukkan worker modul

Mode baru untuk pekerja web dengan manfaat ergonomi dan performa dari modul JavaScript akan tersedia di Chrome 80, yang disebut worker 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 merupakan modul JavaScript standar, mereka dapat menggunakan pernyataan impor dan ekspor. Seperti semua modul JavaScript, dependensi hanya dijalankan sekali dalam konteks tertentu (thread utama, pekerja, dll.), dan semua impor mendatang merujuk ke instance modul yang sudah 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 menyimpan kode yang diuraikan dalam cache, yang berarti modul yang digunakan pada thread utama dan di pekerja hanya perlu diurai sekali.

Peralihan 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 di pekerja klasik, nilainya adalah cakupan global pekerja. Untungnya, selalu ada self global yang menyediakan referensi ke cakupan global. Tersedia di semua jenis pekerja, termasuk pekerja layanan, serta di DOM.

Pramuat pekerja dengan modulepreload

Salah satu peningkatan performa substansial yang disertakan dengan pekerja modul adalah kemampuan untuk melakukan pramuat pekerja dan dependensi mereka. Dengan pekerja modul, skrip dimuat dan dieksekusi sebagai modul JavaScript standar, yang berarti skrip dapat dipramuat dan bahkan diurai 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 pramuat juga dapat digunakan oleh thread utama dan pekerja modul. Hal ini berguna untuk modul yang diimpor dalam kedua konteks, atau jika tidak memungkinkan untuk mengetahui terlebih dahulu apakah modul akan digunakan di thread utama atau di pekerja.

Sebelumnya, opsi yang tersedia untuk pramuat skrip pekerja web terbatas dan tidak harus dapat diandalkan. Pekerja klasik memiliki jenis resource "pekerja" mereka sendiri untuk pramuat, tetapi tidak ada browser yang menerapkan <link rel="preload" as="worker">. Akibatnya, teknik utama yang tersedia untuk pramuat pekerja web adalah dengan menggunakan <link rel="prefetch">, yang sepenuhnya bergantung pada cache HTTP. Jika digunakan bersama dengan header caching yang benar, pembuatan instance pekerja dapat dihindari untuk mendownload skrip pekerja. Namun, tidak seperti modulepreload, teknik ini tidak mendukung pramuat dependensi atau pra-penguraian.

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 akan memuat skrip pekerja sebagai modul, bukan skrip klasik:

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

Sebelum mendukung modul JavaScript, konstruktor SharedWorker() hanya mengharapkan URL dan argumen name opsional. Ini akan terus berfungsi untuk penggunaan pekerja bersama klasik; namun, pembuatan 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 diupdate, browser mulai menerapkan perilaku baru. Proses ini memerlukan waktu karena ada beberapa detail tambahan yang terkait dengan pemindahan modul JavaScript ke pekerja layanan. Pendaftaran pekerja layanan perlu membandingkan skrip yang diimpor dengan versi yang di-cache sebelumnya 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