Pengoptimuman Prestasi Web & Lighthouse · Pelajaran

Web Workers dan Di Luar Benang Utama

Fahami cara memindahkan tugasan yang intensif secara pengiraan kepada Web Workers supaya benang utama kekal bebas dan responsif.

Pelajaran 3 daripada 412 langkah

Web Workers dan Di Luar Benang Utama ialah pelajaran Pengoptimuman Prestasi Web & Lighthouse percuma di CoddyKit. Ini ialah pelajaran 3 daripada 4. Anda boleh membaca keseluruhan pelajaran di bawah secara percuma — kemudian berlatih secara praktikal dalam pelayar menggunakan penyunting kod terbina dalam dan tutor kecerdasan buatan 24/7. Pelajaran ini merupakan sebahagian daripada laluan pembelajaran Pengoptimuman Prestasi Web & Lighthouse, dan kemajuan anda disegerakkan merentas web serta aplikasi CoddyKit. Kursus Pengoptimuman Prestasi Web & Lighthouse merangkumi sejumlah 4 pelajaran.

Membebaskan Utas Utama

Apabila anda berinteraksi dengan laman web, segala yang anda lihat dan klik dikendalikan oleh utas utama pelayar. Utas ini seperti lebuh raya satu lorong untuk semua kod JavaScript, kemas kini UI dan pengendalian peristiwa anda.

Jika tugas berat berjalan pada utas utama ini, ia boleh menghalang segala yang lain, menyebabkan laman web anda terhenti dan kelihatan tidak responsif. Di sinilah Web Workers membantu!

Memahami Utas Utama

Utas utama penting untuk pengalaman pengguna yang lancar. Tanggungjawabnya termasuk:

Menghuraikan HTML dan CSS
Melaksanakan JavaScript
Mengendalikan peristiwa pengguna (klik dan tatalan)
Mengemas kini antara muka pengguna (memaparkan piksel)

Oleh sebab JavaScript menggunakan satu utas dalam pelayar, skrip yang berjalan lama pada utas utama akan menjeda semua aktiviti ini, lalu menyebabkan UI 'beku'.

Memperkenalkan Web Workers

Web Workers membolehkan anda menjalankan skrip di latar belakang, dalam utas berasingan, tanpa mengganggu utas pelaksanaan utama pelayar. Bayangkan pelayar anda mendapat lorong tambahan di lebuh raya untuk trafik berat.

Melaksanakan tugas di luar utas utama.
Mengekalkan UI responsif semasa operasi intensif.
Berkomunikasi dengan utas utama dengan menghantar mesej.

Jenis Worker: Khusus dan Lain-lain

Terdapat beberapa jenis Web Workers, tetapi yang paling biasa dan akan kita tumpukan ialah Dedicated Workers.

Dedicated Workers: Digunakan oleh satu skrip. Setiap tika terikat pada satu skrip utas utama.
Shared Workers: Boleh dicapai oleh beberapa skrip, malah daripada tetingkap atau iframe yang berbeza.
Service Workers: Digunakan untuk ciri lanjutan seperti pengalaman luar talian, penc||||caching dan pemberitahuan tolak (jenis yang lebih khusus).

Mencipta Worker Baharu

Mencipta Web Worker khusus adalah mudah. Anda menghasilkan tika objek Worker dengan memberikan URL skrip yang akan dilaksanakan oleh worker itu.

Skrip worker ini berjalan dalam konteks global terpencilnya sendiri.

const myWorker = new Worker('myWorker.js');

console.log('Worker created!');

Menghantar Data kepada Worker

Utas utama berkomunikasi dengan worker menggunakan kaedah postMessage(). Kaedah ini menghantar mesej (yang boleh berupa rentetan, objek JSON atau data lain) kepada worker.

Data disalin, bukan dikongsi, antara utas utama dengan worker.

const myWorker = new Worker('myWorker.js');

myWorker.postMessage({ type: 'startCalculation', data: 1000000 });
console.log('Message sent to worker!');

Menerima Mesej Worker

Untuk mendapatkan hasil atau kemas kini daripada worker, utas utama mendengar peristiwa message pada objek worker. Data yang dihantar oleh worker tersedia dalam event.data.

Begitu juga, skrip worker itu sendiri mendengar mesej menggunakan self.onmessage.

const myWorker = new Worker('myWorker.js');

myWorker.onmessage = function(event) {
  console.log('Result from worker:', event.data);
};

myWorker.postMessage('Start work!');

Dalam Skrip Worker

Skrip yang dimuatkan oleh worker berjalan dalam persekitaran terpencilnya sendiri. Skrip itu tidak mempunyai akses terus kepada DOM atau objek window, tetapi mempunyai skop globalnya sendiri yang diwakili oleh self.

Worker menghantar mesej kembali kepada utas utama menggunakan self.postMessage().

// myWorker.js (the worker's script)
self.onmessage = function(event) {
  const receivedData = event.data;
  console.log('Worker received:', receivedData);

  // Perform a task
  const result = receivedData + ' processed!';

  // Send result back to the main thread
  self.postMessage(result);
};

Demo Boleh Jalan: Kerja Berat Dialihkan

Berikut ialah demo yang menggunakan Web Worker untuk melakukan pengiraan berat. Perhatikan bahawa utas utama kekal responsif (disimulasikan melalui mesej log) semasa worker menjalankan tugasnya.

Mula-mula, berikut ialah kandungan untuk worker.js yang melakukan penjumlahan:

// worker.js
self.onmessage = function(event) {
  let sum = 0;
  const limit = event.data; // Expecting a number
  console.log('Worker: Starting calculation for limit:', limit);
  for (let i = 0; i < limit; i++) {
    sum += i; // A computationally heavy loop
  }
  self.postMessage(sum);
  console.log('Worker: Calculation finished and result sent.');
};

Berikut pula ialah skrip utama yang mencipta worker itu dan berkomunikasi dengannya. Cuba jalankannya!

// This script would run in an HTML page.
// It assumes a 'worker.js' file exists in the same directory.

console.log("Main thread: Starting Web Worker demo.");

try {
  // Create a new Web Worker
  const myWorker = new Worker('worker.js');

  // Listen for messages from the worker
  myWorker.onmessage = function(event) {
    console.log("Main thread: Received result from worker:", event.data);
    console.log("Main thread: UI remains responsive.");
  };

  // Handle errors from the worker
  myWorker.onerror = function(error) {
    console.error("Main thread: Worker error:", error);
  };

  // Send a message to the worker to start a heavy calculation
  const calculationLimit = 200000000; // A large number
  console.log(`Main thread: Sending calculation request for ${calculationLimit} to worker.`);
  myWorker.postMessage(calculationLimit);

  // Demonstrate that the main thread is not blocked
  let count = 0;
  const intervalId = setInterval(() => {
    console.log(`Main thread: UI is active... ${count++}`);
    if (count > 5) { // Stop after a few messages to keep output short
      clearInterval(intervalId);
    }
  }, 100); // This would represent UI updates

} catch (e) {
  console.error("Main thread: Could not create Web Worker. " +
                "This environment might not support Web Workers directly or 'worker.js' is missing.", e);
  console.log("Main thread: Simulating blocking calculation instead.");
  // Fallback for environments without Web Worker support (for CoddyKit's sandbox)
  let sum = 0;
  const limit = 200000000;
  for (let i = 0; i < limit; i++) {
    sum += i;
  }
  console.log("Main thread: Blocking calculation finished. Result:", sum);
  console.log("Main thread: UI would have frozen during this calculation.");
}

Batasan Worker

Walaupun berkuasa, Pekerja Web mempunyai beberapa batasan kerana sifatnya yang terasing:

Tiada Akses DOM: Pekerja tidak boleh mengakses atau memanipulasi Model Objek Dokumen (DOM) secara langsung.
Tiada Objek Window: Pekerja tidak boleh mengakses objek window, document atau parent.
Fail Tempatan: Pekerja tidak boleh mengakses fail tempatan secara langsung (contohnya, protokol file://) dalam semua pelayar.
Komunikasi: Semua komunikasi mesti dilakukan melalui penghantaran mesej (postMessage dan onmessage).

Semakan Pengetahuan tentang Pekerja

Mari semak pemahaman anda tentang Pekerja Web.

Jawab dalam pelajaran interaktif

Imbas Kembali: Memindahkan Tugas

Tahniah! Anda telah mempelajari cara Pekerja Web boleh meningkatkan prestasi dan daya tindak balas aplikasi web anda dengan ketara.

Pekerja Web menjalankan skrip di latar belakang, bukan pada bebenang utama.
Pekerja menghalang antara muka pengguna daripada membeku semasa pengiraan berat.
Komunikasi berlaku melalui penghantaran mesej (postMessage dan onmessage).
Pekerja tidak boleh mengakses DOM atau objek window secara langsung.

Dengan menggunakan Pekerja Web secara berkesan, anda boleh mencipta pengalaman pengguna yang lebih lancar dan menarik.

Percuma untuk bermula

Pelajari Pengoptimuman Prestasi Web & Lighthouse dengan tutor kecerdasan buatan — percuma

Tulis dan jalankan kod sebenar dalam pelayar anda, dapatkan bantuan segera daripada tutor kecerdasan buatan yang tersedia 24/7, dan sambung semula dari tempat anda berhenti di web atau dalam aplikasi.

Kursus: 12
Pelajaran: 48

Mula belajar secara percuma Lihat kursus penuh

Soalan Lazim

Adakah pelajaran “Web Workers dan Di Luar Benang Utama” percuma?

Ya — teks penuh “Web Workers dan Di Luar Benang Utama” boleh dibaca secara percuma di web ini. Untuk berlatih secara interaktif menggunakan penyunting kod terbina dalam dan tutor kecerdasan buatan 24/7, serta membuka kunci baki kursus Pengoptimuman Prestasi Web & Lighthouse, tingkat taraf kepada CoddyKit PRO. Kursus Pengoptimuman Prestasi Web & Lighthouse merangkumi sejumlah 4 pelajaran.

Apakah yang akan saya pelajari dalam “Web Workers dan Di Luar Benang Utama”?

Fahami cara memindahkan tugasan yang intensif secara pengiraan kepada Web Workers supaya benang utama kekal bebas dan responsif. Anda berlatih Pengoptimuman Prestasi Web & Lighthouse menggunakan kod praktikal yang dijalankan terus dalam pelayar, manakala tutor kecerdasan buatan 24/7 menjawab soalan anda semasa anda mengikuti pelajaran.

Adakah saya memerlukan pengalaman untuk memulakan Pengoptimuman Prestasi Web & Lighthouse?

Tiada pengalaman terdahulu diperlukan. Pembelajaran Pengoptimuman Prestasi Web & Lighthouse di CoddyKit disusun untuk pelajar daripada peringkat pemula hingga lanjutan, jadi anda boleh bermula di sini atau dari awal dan belajar mengikut kadar anda sendiri. Ini ialah pelajaran 3 daripada 4.

Berapa lamakah pelajaran “Web Workers dan Di Luar Benang Utama” diambil?

Kebanyakan pelajaran CoddyKit mengambil masa kira-kira 5–10 minit. Setiap pelajaran ringkas dan interaktif, jadi anda boleh membuat kemajuan secara berterusan dan menyambung tepat dari tempat anda berhenti di web atau aplikasi.

Bolehkah saya menulis dan menjalankan kod dalam pelajaran Pengoptimuman Prestasi Web & Lighthouse ini?

Ya. Setiap pelajaran Pengoptimuman Prestasi Web & Lighthouse menyertakan penyunting kod terbina dalam, jadi anda boleh menulis dan menjalankan kod sebenar terus dalam pelayar serta menerima maklum balas kecerdasan buatan serta-merta — tanpa memerlukan persediaan setempat.

Semua pelajaran dalam kursus ini

← Kembali ke Pengoptimuman Prestasi Web & Lighthouse