MultiThreading Dalam JS menggunakan Pekerja Web

Pekerja Web: cara untuk menjalankan skrip di latar belakang dalam urutan yang berbeza daripada utas utama(Tetingkap) semasa.

1. Pekerja web lwn tak segerak menggunakan event_loop
2. Pengenalan kepada Pekerja Web
3. cara mencipta pekerja web
4. Contohnya dengan pekerja web
5. had Pekerja Web
6. operasi tak segerak dalam Pekerja Web

1. Pekerja Web lwn Operasi Asynchronous Menggunakan Gelung Acara

JavaScript lazimnya mengendalikan operasi tak segerak dengan meletakkan tugasan ke dalam baris gilir yang sepadan (baris gilir tugasan makro, baris gilir tugas mikro), dengan gelung acara menyemak baris gilir ini secara berterusan dan menolak tugasan ke dalam tindanan panggilan apabila tugasan itu sedia untuk dilaksanakan. Pendekatan ini memastikan pelaksanaan tidak menyekat tetapi masih menjalankan segala-galanya pada satu urutan.

Pekerja Web, sebaliknya, membenarkan skrip dijalankan dalam urutan yang berasingan sepenuhnya dengan timbunan panggilan sendiri, baris gilir tak segerak dan gelung acara. Pemisahan ini menghalang utas utama daripada disekat oleh pengiraan berat atau tugasan yang berjalan lama, kerana pekerja beroperasi secara bebas.

2. Pengenalan kepada Pekerja Web

Pekerja web melaksanakan skrip dalam konteks yang berbeza daripada konteks tetingkap utama, membolehkan keselarian dalam aplikasi web. API Pekerja Web menyediakan beberapa jenis pekerja:

• Pekerja Dedikasi: Digunakan oleh satu skrip, ini sesuai untuk memunggah tugasan daripada utas utama.
• Pekerja Kongsi: Boleh diakses oleh berbilang skrip yang dijalankan dalam konteks berbeza (cth., tetingkap atau iframe yang berbeza).
• Pekerja Perkhidmatan: Beroperasi sebagai pelayan proksi antara aplikasi web, penyemak imbas dan rangkaian, menyediakan fungsi seperti sokongan luar talian dan caching.

Artikel ini memfokuskan pada pekerja berdedikasi, yang merupakan yang paling mudah untuk dilaksanakan dan biasa digunakan.

3. Cara Mencipta Pekerja Web

Untuk mencipta pekerja web, anda boleh menggunakan kaedah utama berikut:

• Pekerja baharu(): Pembina untuk mencipta pekerja baharu.
• postMessage(): Menghantar mesej daripada urutan utama kepada pekerja atau sebaliknya.
• onmessage: Fungsi panggil balik ditetapkan untuk mengendalikan mesej yang diterima oleh pekerja.
• terminate(): Hentikan pekerja serta-merta.

4. Contoh Mudah

Mari kita buat pekerja untuk mengambil data daripada API, khususnya imej anjing daripada API CEO Anjing.

4.1 Kod Pekerja

Berikut ialah pelaksanaan skrip pekerja. Perhatikan bahawa di dalam pekerja, diri digunakan untuk merujuk kepada konteks global:

if (window.Worker) {
    const worker = new Worker("/src/worker.js");
        worker.postMessage({ 
            operation: "get_dog_imgs",
            url: "https://dog.ceo/api/breeds/image/random", 
            count: 5   //number of photos
        });
        worker.onmessage = (e) => {
        console.log(e.data);
        if (e && e.data) {
            setdata((old) => [...old, e.data]); // update react state
            showCallStack(); // function to show the callstack 
        }
    };
    worker.onerror = (e) => {
        console.log(e);
    };
}

Dalam kod ini, pekerja mendengar mesej (onmessage) dan mengambil data daripada URL yang diberikan beberapa kali seperti yang ditentukan oleh kiraan.

Begini rupa susunan panggilan di dalam pekerja:

4.2 Kod Pelanggan

Benang utama menggunakan pekerja seperti ini:

self.onmessage = (event) => {
    const data = event.data;
    if (data && data.url && data.count) {
        fetchFromUrls(data.url, data.count);
    }
}
// fetch single data 
const fetchdata = async (url) => {
    const res = await self.fetch(url);
    return await res.json();
};

const fetchFromUrls = async (url, count) => {
    showCallStack(); // showing the callstack of the worker 
    for (const i of new Array(count).fill(0)) {
        let data = await fetchdata(url);
        if (data && data.message) {
            self.postMessage({ type: "img", data: data.message });
        }
    }
};

Kod ini menunjukkan cara menghantar mesej kepada pekerja dan menerima data yang diambil dalam urutan utama.

untuk kod penuh pergi ke kod

5. Batasan Pekerja Web

Semasa pekerja web dijalankan dalam urutan yang berasingan daripada urutan tetingkap utama, mereka datang dengan pengehadan tertentu:

• Tiada Akses kepada DOM: Pekerja tidak boleh memanipulasi DOM secara langsung. Komunikasi dengan utas utama diperlukan untuk mengemas kini UI.
• Penggunaan Sumber: Menggunakan pekerja web secara berlebihan boleh menyebabkan penggunaan memori yang tinggi, kerana setiap pekerja memerlukan sumber tambahan untuk beroperasi secara bebas.

Atas ialah kandungan terperinci MultiThreading Dalam JS menggunakan Pekerja Web. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!