JavaScript adalah single-threaded. Apa artinya dan apa itu utas?

Utas adalah konteks eksekusi, yang merupakan semua informasi yang dibutuhkan CPU untuk menjalankan aliran instruksi. Jadi biasanya aplikasi JS terkandung dalam satu utas.

Kontra?

Bayangkan di aplikasi web Anda, Anda perlu memproses tugas yang panjang, Dom yang merupakan halaman web dalam bahasa umum akan membeku karena penerjemah harus menyelesaikan tugas sebelum pindah ke yang berikutnya. Dia tidak dapat memproses dua tugas secara bersamaan, jadi ketika dia menyelesaikan tugas yang lama, dia akan dapat memperbarui Dom dan hidup kembali. Solusi untuk menghindarinya adalah dengan menggunakan web worker.

Apa itu pekerja web?

Pekerja web adalah skrip JS yang dieksekusi di latar belakang secara independen. Pekerja web sering dapat memanfaatkan multi cpu.

Dalam hal ini kita akan melihat bagaimana menggunakan web worker dalam bereaksi.

Mendirikan :

• Instal nodeJS yang memberi kami akses ke npm dan npx : https://nodejs.org/en/download/
• Hasilkan proyek reaksi: jalankan di terminal “npx create-react-app replace-me-with-the-name-of-the-app — template TypeScript”

Mari kita bersenang-senang.

Untuk dapat berkomunikasi dengan pekerja kita akan menggunakan onMessage dan postMessage().

Sekarang kita akan menulis fungsi fibonacci yang akan kita jalankan oleh web worker.

//fibo.worker.js
// eslint-disable-next-line import/no-anonymous-default-export
export default () => {
  // eslint-disable-next-line no-restricted-globals
  self.onmessage = (message) => {
    const nbr = message.data;
    var n1 = 0;
    var n2 = 1;
    var somme = 0;


    for (let i = 2; i <= nbr; i++) {
      somme = n1 + n2;


      n1 = n2;


      n2 = somme;
    }


    const result = nbr ? n2 : n1;


    postMessage(result);
  };
};

// eslint-disable-next-line import/no-anonymous-default-export

// eslint-disable-next-line no-restricted-globals

//woker-builder.js
export default class WorkerBuilder extends Worker {
  constructor(worker) {
    const code = worker.toString();
    const blob = new Blob([`(${code})()`]);
    return new Worker(URL.createObjectURL(blob));
  }
}

import WorkerBuilder from './worker/woker-builder';
import Worker from './worker/fibo.worker';

instance = new WorkerBuilder(Worker);

componentDidMount() {
    instance.onmessage = (message) => {
      if (message) {
        console.log("Message from worker", message.data);
      }
    };
  }
<button onClick   ​={() => instance.postMessage(5)}>
  Send Message
</button>

import React, { Component } from "react";
import logo from "./logo.svg";
import "./App.css";
import WorkerBuilder from "./worker/woker-builder";
import FiboWorker from "./worker/fibo.worker";

const instance = new WorkerBuilder(FiboWorker);
class App extends Component {
  componentDidMount() {
    instance.onmessage = (message) => {
      if (message) {
        console.log("Message from worker", message.data);
      }
    };
  }

  render() {
    return (
      <div className="App">
        <header className="App-header">
          <img src={logo} className="App-logo" alt="logo" />
          <p>
            Web worker in React
          </p>
          <button
            onClick={() => {
              instance.postMessage(5);
            }}
          >Send Message</button>
        </header>
      </div>
    );
  }
}

export default App;

      

Jika kita masuk lebih dalam ke konsol di tab sumber, kita dapat melihat di kanan atas kita memiliki dua utas utama dan pekerja fibo bernama f18f83d0–6ed0–484e-86f1–6d1938793085

Saya harap Anda belajar sesuatu dari kuliah ini, terima kasih telah membaca.