Ringkasan pekerja web

Sebagian besar konten dalam materi ini sejauh ini berfokus pada konsep seperti pertimbangan kinerja HTML umum, petunjuk sumber daya, pengoptimalan berbagai jenis resource untuk meningkatkan waktu muat halaman awal dan responsivitas pengguna serta memuat resource tertentu secara lambat.

Namun, ada satu aspek kinerja terkait JavaScript yang belum kita bahas dalam materi ini, dan itulah peran pekerja web dalam meningkatkan responsivitas input, yang dibahas dalam modul ini dan berikutnya.

JavaScript sering dijelaskan sebagai bahasa thread tunggal. Dalam praktiknya, merujuk ke thread utama, yang merupakan satu thread tempat browser sebagian besar pekerjaan yang Anda lihat di {i>browser<i}. Pekerjaan ini termasuk tugas-tugas yang ada dalam hal-hal seperti pembuatan skrip, beberapa jenis pekerjaan rendering, penguraian HTML dan CSS, dan jenis pekerjaan lain yang berhubungan dengan pengguna yang meningkatkan pengalaman pengguna. Sebenarnya, browser menggunakan thread lain untuk melakukan tugas yang tidak Anda, sebagai developer, biasanya memiliki akses langsung, seperti thread GPU.

Di mana JavaScript terkait, Anda biasanya dibatasi untuk mengerjakan thread utama, tetapi hanya secara default. Anda dapat mendaftar dan menggunakan thread tambahan di JavaScript. Fitur yang memungkinkan multi-threading di JavaScript dikenal sebagai Web Workers API.

Pekerja web berguna ketika Anda memiliki pekerjaan komputasi yang mahal yang hanya tidak dapat dijalankan di thread utama tanpa menyebabkan tugas panjang yang membuat halaman tidak responsif. Tugas tersebut tentu dapat memengaruhi Interaksi situs web Anda Next Paint (INP), sehingga akan sangat membantu untuk mengetahui kapan Anda memiliki pekerjaan yang dapat selesai keluar dari thread utama. Melakukan hal itu dapat membantu memberikan lebih banyak ruang bagi tugas lain di thread utama sehingga interaksi pengguna lebih cepat.

Modul ini dan demo berikutnya yang menunjukkan kasus penggunaan konkret membahas web pekerja. Demo itu sendiri menunjukkan cara menggunakan pekerja web untuk melakukan pekerjaan membaca metadata gambar dari file JPEG dari utas utama—dan bagaimana Anda bisa membawa {i>metadata<i} kembali ke thread utama untuk dilihat pengguna.

Cara pekerja web diluncurkan

Pekerja web didaftarkan dengan membuat instance class Worker. Kapan Anda melakukan jadi, Anda menentukan di mana kode pekerja web berada, yang dimuat oleh browser dan kemudian membuat thread baru. Thread yang dihasilkan sering disebut thread pekerja.

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

Dalam file JavaScript pekerja—my-web-worker.js dalam kasus ini—Anda kemudian dapat menulis kode yang kemudian berjalan 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. Web pekerja memiliki batasan berikut:

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

Cara pekerja web berkomunikasi dengan window

Pekerja web dapat berkomunikasi dengan window thread utama konteks aplikasi melalui pipeline pesan. Pipeline ini memungkinkan Anda mengirim data ke dan dari thread utama dan pekerja web. Untuk mengirim data dari pekerja web ke thread utama, Anda akan menyiapkan peristiwa message pada 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 solusi lain dari web konteks pekerja. Dengan menggunakannya, Anda dapat mengirim data ke window dari pekerja web yang bisa Anda gunakan untuk memperbarui DOM, atau melakukan pekerjaan lain yang harus dilakukan di thread utama.

Menguji pengetahuan Anda

Thread apa saja yang dijalankan pekerja web?

Thread utama.
Coba lagi.
Thread-nya sendiri (disebut juga thread pekerja web).
Benar.
Thread GPU.
Coba lagi.

Apa yang dapat diakses 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 pekerja web 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 postMessage dalam konteks pekerja web (self).
Benar.

Berikutnya: kasus penggunaan pekerja web konkret

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