JavaScript est un thread unique. Qu'est-ce que cela signifie et qu'est-ce qu'un fil ?

Un thread est un contexte d'exécution, c'est-à-dire toutes les informations dont un processeur a besoin pour exécuter un flux d'instructions. Donc, normalement, les applications JS sont contenues dans un thread.

Les inconvénients ?

Imaginez dans votre application Web que vous devez traiter une longue tâche, le Dom qui est la page Web en langage courant va geler car l'interprète doit terminer la tâche avant de passer à la suivante. Il ne peut pas traiter deux tâches en même temps, donc quand il aura terminé la longue tâche, il pourra alors mettre à jour le Dom et revenir à la vie. La solution pour éviter cela est d'utiliser un web worker.

Qu'est-ce qu'un web worker ?

Un web worker est un script JS exécuté indépendamment en arrière-plan. Les travailleurs Web sont souvent capables d'utiliser plusieurs processeurs.

Dans ce cas, nous allons voir comment utiliser un web worker en réaction.

Installer :

• Installez nodeJS qui nous donne accès à npm et npx : https://nodejs.org/en/download/
• Générer le projet React : exécuter dans le terminal « npx create-react-app replace-me-with-the-name-of-the-app — template typescript »

Amusons-nous.

Pour pouvoir communiquer avec le travailleur, nous allons utiliser onMessage et postMessage().

Maintenant, nous allons écrire notre fonction fibonacci qui sera exécutée par le 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;

      

Si nous approfondissons la console dans l'onglet sources, nous pouvons voir en haut à droite, nous avons deux threads, le principal et le travailleur fibo nommés f18f83d0–6ed0–484e-86f1–6d1938793085

J'espère que vous avez appris quelque chose de cette conférence, merci pour votre lecture.