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 single-threaded, yang berarti hanya dapat melakukan satu operasi dalam 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.

Masukkan worker 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 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 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 pada 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" 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 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 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. 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 diupdate, 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