PricingLoginStart free
Pembangunan Aplikasi Desktop Electron · Pelajaran

Proses Latar Belakang dan Pekerja

Gunakan proses latar belakang dan pekerja web untuk memindahkan pengiraan berat, sambil mengekalkan UI utama agar responsif dan berprestasi baik.

Pelajaran 2 daripada 411 langkah

Proses Latar Belakang dan Pekerja ialah pelajaran Pembangunan Aplikasi Desktop Electron percuma di CoddyKit. Ini ialah pelajaran 2 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 Pembangunan Aplikasi Desktop Electron, dan kemajuan anda disegerakkan merentas web serta aplikasi CoddyKit. Kursus Pembangunan Aplikasi Desktop Electron merangkumi sejumlah 4 pelajaran.

Pastikan Aplikasi Anda Responsif

Bayangkan aplikasi desktop anda terhenti apabila anda mengklik butang atau melakukan sesuatu tindakan. Mengecewakan, bukan?

Antara muka pengguna responsif bermaksud aplikasi anda kekal lancar dan interaktif walaupun menjalankan kerja berat di latar belakang.

Pelajaran ini meneroka cara memindahkan tugasan ke latar belakang supaya aplikasi Electron anda kekal pantas dan responsif untuk pengguna.

Antara Muka Pengguna Satu Jalur

Dalam pelayar web dan proses pemapar Electron, JavaScript biasanya berjalan pada satu jalur. Jalur ini sering dipanggil jalur utama.

Jalur ini mengendalikan segala-galanya: memaparkan UI, memberi respons kepada input pengguna dan menjalankan kod JavaScript anda.

Jika pengiraan yang mengambil masa lama berlaku pada jalur utama, pengiraan itu akan "menyekatnya", menyebabkan aplikasi anda tidak responsif dan UI terhenti.

Kenali Web Workers

Untuk mengelakkan UI terhenti, kita boleh menggunakan Web Workers. Ia membolehkan anda menjalankan skrip di latar belakang, berasingan daripada jalur utama.

Anggap Web Worker sebagai persekitaran pelaksanaan JavaScript yang berasingan dan tidak mengganggu UI anda.

Web Worker amat sesuai untuk tugasan yang menggunakan CPU secara intensif dan tidak memerlukan akses terus kepada DOM (Model Objek Dokumen) halaman web.

Web Worker Pertama Anda

Mari lihat contoh mudah untuk memindahkan pengiraan "berat" kepada Web Worker.

Mula-mula, anda perlu mencipta fail bernama worker.js yang mengandungi logik pekerja:

// worker.js content
onmessage = function(e) {
  let result = 0;
  for (let i = 0; i < e.data; i++) {
    result += i;
  }
  postMessage(result); // Send result back to main thread
};

Kemudian, dalam proses pemapar Electron anda (contohnya, dalam <script> milik index.html atau renderer.js yang dipautkan), anda akan menggunakan kod ini:

Cuba jalankan contoh ini:

const myWorker = new Worker('./worker.js'); // Path to your worker.js file

myWorker.onmessage = (event) => {
  console.log('Worker finished calculation. Result:', event.data);
  // In a real app, you'd update an HTML element:
  // document.getElementById('resultDisplay').innerText = `Result: ${event.data}`;
};

myWorker.onerror = (error) => {
  console.error('Worker error:', error.message);
};

const dataToSend = 500000000; // A large number for a noticeable delay
console.log('Sending task to worker with input:', dataToSend);
myWorker.postMessage(dataToSend);

console.log('UI thread is free and responsive!');
// This message will appear immediately, proving the UI thread is not blocked.

Berkomunikasi dengan Pekerja

Web Workers berkomunikasi dengan jalur utama menggunakan sistem penghantaran mesej yang mudah:

  • postMessage(): Digunakan oleh jalur utama dan pekerja untuk menghantar data.
  • Pengendali peristiwa onmessage: Digunakan oleh kedua-dua pihak untuk menerima data. Data tersedia dalam event.data.

Mesej disalin dan bukannya dikongsi, bermakna objek kompleks disiri dan dinyahsiirikan. Ini memastikan integriti data antara jalur.

Perkara yang Tidak Boleh Dilakukan oleh Pekerja

Walaupun berkuasa, Web Worker mempunyai beberapa batasan:

  • Tiada Akses DOM: Worker tidak boleh memanipulasi Document Object Model halaman web (elemen HTML) secara langsung.
  • API Terhad: Worker tidak mempunyai akses kepada sesetengah API pelayar seperti window, document atau parent.
  • Akses Fail Tempatan: Akses terus kepada fail tempatan (contohnya, menggunakan modul Node.js fs) tidak tersedia dalam Web Worker standard.

Untuk tugasan yang memerlukan ciri ini, anda mungkin perlu menggunakan pendekatan lain atau menghantar data kembali kepada utas utama.

Utas Worker Node.js

Proses utama Electron dan proses pemapar yang mempunyai integrasi Node.js boleh menggunakan Utas Worker Node.js.

Utas ini berbeza daripada Web Worker:

  • Utas ini mempunyai akses penuh kepada API Node.js (contohnya, fs dan http).
  • Utas ini boleh digunakan dalam proses utama untuk mengelakkan keseluruhan aplikasi Electron daripada tersekat.
  • Utas ini sesuai untuk tugasan Node.js yang banyak menggunakan CPU.

Utas Worker amat penting apabila tugasan latar anda memerlukan keupayaan Node.js.

Worker Node.js Beraksi

Berikut ialah cara anda boleh menggunakan Utas Worker Node.js untuk melakukan pengiraan berat yang turut menggunakan ciri Node.js (seperti membaca fail, walaupun kita akan memudahkannya untuk contoh ini).

Mula-mula, cipta worker_node.js:

// worker_node.js content
const { parentPort } = require('worker_threads');

parentPort.on('message', (data) => {
  let result = 0;
  for (let i = 0; i < data; i++) {
    result += i;
  }
  parentPort.postMessage(result);
});

Kemudian, dalam proses utama anda atau pemapar yang mempunyai integrasi Node.js:

Cuba jalankan contoh ini:

const { Worker } = require('worker_threads');
const path = require('path');

// Path to your Node.js worker script (assuming it's in the same directory)
const workerPath = path.join(__dirname, 'worker_node.js');

// Create a new Node.js Worker Thread
const worker = new Worker(workerPath);

// Listen for messages from the worker
worker.on('message', (result) => {
  console.log('Node.js Worker finished. Result:', result);
  worker.terminate(); // Terminate the worker when done
});

// Listen for errors
worker.on('error', (err) => {
  console.error('Node.js Worker error:', err);
});

// Listen for worker exit
worker.on('exit', (code) => {
  if (code !== 0) {
    console.error(`Node.js Worker stopped with exit code ${code}`);
  }
});

// Send data to the worker to start computation
const dataForWorker = 500000000;
console.log('Sending task to Node.js Worker with input:', dataForWorker);
worker.postMessage(dataForWorker);

console.log('Main/Renderer thread is free!');

Web Worker berbanding Worker Node.js

Bagaimanakah anda menentukan jenis worker yang hendak digunakan?

  • Web Worker:
    • Paling sesuai untuk tugasan yang banyak menggunakan CPU dalam proses pemapar.
    • Tidak boleh mengakses DOM atau API Node.js.
    • Sesuai untuk pengiraan dan pemprosesan data yang tidak memerlukan akses sistem.
  • Utas Worker Node.js:
    • Paling sesuai untuk tugasan yang banyak menggunakan CPU dalam proses utama atau proses pemapar dengan integrasi Node.js.
    • Boleh mengakses semua API Node.js (contohnya, sistem fail dan rangkaian).
    • Sesuai untuk operasi Node.js yang berat tanpa menyekat antara muka pengguna atau logik aplikasi utama.

Semakan Pengetahuan Worker

Anda telah mempelajari pelbagai cara untuk memindahkan tugasan ke latar dalam Electron. Mari uji kefahaman anda!

Jawab dalam pelajaran interaktif

Imbas Kembali: Mengekalkan Responsif Electron

Syabas! Anda telah mempelajari cara mengekalkan aplikasi Electron supaya responsif:

  • Utas utama mengendalikan antara muka pengguna dan boleh tersekat akibat tugasan berat.
  • Web Worker menjalankan JavaScript di latar, berasingan daripada antara muka pengguna, untuk tugasan yang banyak menggunakan CPU tanpa akses DOM.
  • Utas Worker Node.js juga berjalan di latar, tetapi menyediakan akses penuh kepada API Node.js dan sesuai untuk tugasan proses utama atau pemapar yang diintegrasikan dengan Node.js.

Dengan menggunakan alat ini secara berkesan, anda boleh membina aplikasi Electron yang terasa pantas dan lancar!

Percuma untuk bermula

Pelajari JavaScript 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
47
Mula belajar secara percumaLihat kursus penuh

Soalan Lazim

Adakah pelajaran “Proses Latar Belakang dan Pekerja” percuma?

Ya — teks penuh “Proses Latar Belakang dan Pekerja” 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 Pembangunan Aplikasi Desktop Electron, tingkat taraf kepada CoddyKit PRO. Kursus Pembangunan Aplikasi Desktop Electron merangkumi sejumlah 4 pelajaran.

Apakah yang akan saya pelajari dalam “Proses Latar Belakang dan Pekerja”?

Gunakan proses latar belakang dan pekerja web untuk memindahkan pengiraan berat, sambil mengekalkan UI utama agar responsif dan berprestasi baik. Anda berlatih Pembangunan Aplikasi Desktop Electron 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 Pembangunan Aplikasi Desktop Electron?

Tiada pengalaman terdahulu diperlukan. Pembelajaran Pembangunan Aplikasi Desktop Electron 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 2 daripada 4.

Berapa lamakah pelajaran “Proses Latar Belakang dan Pekerja” 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 Pembangunan Aplikasi Desktop Electron ini?

Ya. Setiap pelajaran Pembangunan Aplikasi Desktop Electron 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

  1. Seni Bina Berbilang Tetingkap
  2. Proses Latar Belakang dan Pekerja
  3. Mengintegrasikan dengan Perkhidmatan Awan
  4. Mengemas Kini Aplikasi Electron Anda Secara Automatik
← Kembali ke Pembangunan Aplikasi Desktop Electron