Ringkasan pekerja web

Sebagian besar konten dalam kursus ini sejauh ini telah berfokus pada konsep seperti pertimbangan performa HTML umum, petunjuk resource, pengoptimalan berbagai jenis resource untuk mempercepat waktu muat halaman awal dan responsivitas terhadap input pengguna, serta pemuatan lambat resource tertentu.

Namun, ada satu aspek performa terkait JavaScript yang belum dibahas dalam kursus ini, yaitu peran web worker dalam meningkatkan responsivitas input, yang dibahas dalam modul ini dan berikutnya.

JavaScript sering digambarkan sebagai bahasa thread tunggal. Dalam praktiknya, hal ini merujuk pada thread utama, yang merupakan thread tunggal tempat browser melakukan sebagian besar pekerjaan yang Anda lihat di browser. Pekerjaan ini mencakup tugas-tugas yang terlibat dalam hal-hal seperti pembuatan skrip, beberapa jenis pekerjaan rendering, penguraian HTML dan CSS, serta jenis pekerjaan lain yang ditampilkan kepada pengguna untuk meningkatkan pengalaman pengguna. Sebenarnya, browser menggunakan thread lain untuk melakukan pekerjaan yang biasanya tidak diakses oleh Anda sebagai developernya—seperti thread GPU.

Terkait JavaScript, Anda biasanya dibatasi untuk melakukan pekerjaan di thread utama—tetapi hanya secara default. Anda dapat mendaftarkan dan menggunakan thread tambahan di JavaScript. Fitur yang memungkinkan multi-threading di JavaScript dikenal sebagai Web Workers API.

Pekerja web berguna saat Anda memiliki pekerjaan yang mahal secara komputasi yang tidak dapat dijalankan di thread utama tanpa menyebabkan tugas yang panjang sehingga membuat halaman tidak responsif. Tugas tersebut tentu dapat memengaruhi Interaction to Next Paint (INP) situs Anda. Oleh karena itu, sebaiknya ketahui kapan Anda memiliki pekerjaan yang dapat diselesaikan dari thread utama sepenuhnya. Tindakan ini dapat membantu menciptakan lebih banyak ruang untuk tugas lain di thread utama sehingga interaksi pengguna lebih cepat.

Modul ini dan demo berikutnya yang menunjukkan kasus penggunaan konkret mencakup pekerja web. Demo ini sendiri menunjukkan cara menggunakan pekerja web untuk melakukan tugas membaca metadata gambar dari file JPEG di luar thread utama—dan cara mengembalikan metadata tersebut ke thread utama untuk dilihat pengguna.

Cara pekerja web diluncurkan

Pekerja web didaftarkan dengan membuat instance class Worker. Saat melakukannya, Anda menentukan lokasi kode pekerja web, tempat browser dimuat, lalu membuat thread baru. Thread yang dihasilkan sering disebut thread pekerja.

const myWebWorker = new Worker('/js/my-web-worker.js');

Dalam file JavaScript pekerja—dalam hal ini my-web-worker.js—Anda dapat menulis kode yang kemudian dijalankan di thread pekerja terpisah.

Batasan pekerja web

Tidak seperti JavaScript yang berjalan di thread utama, pekerja web tidak memiliki akses langsung ke konteks window, dan memiliki akses terbatas ke API yang disediakannya. Pekerja web tunduk pada batasan berikut:

  • Pekerja web tidak bisa langsung mengakses DOM.
  • Pekerja web dapat berkomunikasi dengan konteks window melalui pipeline pesan, yang berarti pekerja web dapat secara tidak langsung mengakses DOM dengan cara apa pun.
  • Cakupan pekerja web adalah self, bukan window.
  • Cakupan pekerja web memiliki akses ke dasar dan konstruksi JavaScript, serta API seperti fetch dan API lain dalam jumlah yang cukup besar.

Cara pekerja web berkomunikasi dengan window

Pekerja web dapat berkomunikasi dengan konteks window thread utama melalui pipeline pesan. Pipeline ini memungkinkan Anda memindahkan data ke dan dari thread utama dan pekerja web. Untuk mengirim data dari pekerja web ke thread utama, siapkan peristiwa message di konteks pekerja web (self)

// my-web-worker.js
self.addEventListener("message", () => {
  // Sends a message of "Hellow, window!" from the web worker:
  self.postMessage("Hello, window!");
});

Kemudian, dalam skrip dalam konteks window di thread utama, Anda dapat menerima pesan dari thread pekerja web menggunakan peristiwa message lainnya:

// scripts.js

// Creates the web worker:
const myWebWorker = new Worker('/js/my-web-worker.js');

// Adds an event listener on the web worker instance that listens for messages:
myWebWorker.addEventListener("message", ({ data }) => {
  // Echoes "Hello, window!" to the console from the worker.
  console.log(data);
});

Pipeline pesan pekerja web adalah cara untuk melarikan diri dari konteks pekerja web. Dengan menggunakannya, Anda dapat mengirim data ke window dari pekerja web yang dapat digunakan untuk memperbarui DOM, atau melakukan pekerjaan lain yang harus dilakukan di thread utama.

Menguji pengetahuan Anda

Thread apa yang menjalankan web worker?

Thread utama.
Coba lagi.
Thread-nya sendiri (juga dikenal sebagai thread web worker).
Benar.
Thread GPU.
Coba lagi.

Apa yang dapat diakses oleh pekerja web?

Primitif JavaScript, seperti array dan objek.
Benar.
Subset API ketat yang tersedia dalam konteks window, termasuk fetch.
Benar.
Konteks window, tetapi hanya secara tidak langsung.
Benar.

Bagaimana cara web worker mengakses konteks `window`?

Secara langsung, dengan mereferensikan anggota objek window.
Coba lagi.
Pekerja web tidak dapat mengakses window dengan cara apa pun.
Coba lagi.
Melalui pipeline pesan yang difasilitasi oleh metode postMessage dalam konteks pekerja web (self).
Benar.

Berikutnya: kasus penggunaan pekerja web konkret

Dalam modul berikutnya, kasus penggunaan pekerja web konkret dijelaskan dan ditunjukkan. Dalam modul tersebut, pekerja web digunakan untuk mengambil file JPEG dari URL tertentu, dan membaca metadata Exif-nya dalam pekerja web. Data tersebut kemudian dikirim kembali ke thread utama untuk ditampilkan kepada pengguna.