JavaScript là một luồng đơn. Nó có nghĩa là gì và một chủ đề là gì?

Một luồng là một ngữ cảnh thực thi, là tất cả thông tin mà CPU cần để thực thi một luồng lệnh. Vì vậy, thông thường các ứng dụng JS được chứa trong một luồng.

Nhược điểm?

Hãy tưởng tượng trong ứng dụng web của bạn, bạn cần xử lý một tác vụ dài, Dom là trang web bằng ngôn ngữ thông thường sẽ bị đóng băng vì trình thông dịch cần hoàn thành tác vụ trước khi chuyển sang tác vụ tiếp theo. Anh ta không thể xử lý hai nhiệm vụ cùng một lúc, vì vậy khi anh ta hoàn thành nhiệm vụ dài, và sau đó anh ta sẽ có thể cập nhật Dom và sống lại. Giải pháp để tránh điều đó là sử dụng web worker.

Nhân viên web là gì?

Web worker là một tập lệnh JS được thực thi trong nền một cách độc lập. Nhân viên web thường có thể sử dụng nhiều cpu.

Trong trường hợp này, chúng ta sẽ xem cách sử dụng một web worker trong phản ứng.

Thiết lập :

• Cài đặt nodeJS sẽ cung cấp cho chúng tôi quyền truy cập vào npm và npx: https://nodejs.org/en/download/
• Tạo dự án phản ứng: chạy trong thiết bị đầu cuối “npx create-react-app Replace-me-with-the-name-of-the-app - template typecript”

Hãy cùng vui vẻ nào.

Để có thể giao tiếp với nhân viên, chúng tôi sẽ sử dụng onMessage và postMessage ().

Bây giờ chúng ta sẽ viết hàm fibonacci của chúng ta mà chúng ta sẽ được thực thi bởi 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;

      

Nếu chúng ta đi sâu hơn vào bảng điều khiển trong tab nguồn, chúng ta có thể thấy ở trên cùng bên phải, chúng ta có hai luồng là main và fibo worker có tên là f18f83d0–6ed0–484e-86f1–6d1938793085

Tôi hy vọng bạn đã học được điều gì đó từ bài giảng này, cảm ơn bạn đã đọc.