当前位置：网站首页>How to determine if a web worker has been created or closed

How to determine if a web worker has been created or closed

2022-06-25 13:21:00 【acgCode】

Web Worker It can be for JavaScript Create a multithreaded environment , Some tasks can be assigned to sub threading , So as not to block the main thread . adopt Web Worker The created thread splitting process and the main thread run at the same time without interfering with each other . Concrete Web Worker Knowledge about , You can refer to Ruan Yifeng's blog .

Web Worker In the process of use, it should be noted that after the thread is created , In order to respond to the main thread at any time, the communication will always run in the background . therefore Worker It consumes more resources , And will not automatically close .

Of course, in order to solve this problem Web Worker It provides us with the method of manual shutdown , So how do you know Worker What about the current status ？ We need to borrow Chrome Developer tools for confirmation .

First of all, the previous code ：

<!-- * @Description: html5  Of  Web Workers * @FilePath: /JavaScript Basics /WebWorker/index.html -->
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Web Worker</title>
  </head>
  <body>
    <input type="text" name="number" id="number" />
    <button id="btn"> Calculation </button>
    <script> var input = document.querySelector("#number"); document.querySelector("#btn").onclick = function () {
      var number = input.value; var anotherWorker = new Worker("anotherWorker.js"); anotherWorker.onmessage = function (event) {
      console.log(event.data); }; anotherWorker.postMessage(" towards anotherWorker Send a message "); }; </script>
  </body>
</html>

/* * @FilePath: /JavaScript Basics /WebWorker/anotherWorker.js */
(function () {
    
  this.onmessage = function (event) {
    
    console.log(event.data);
    postMessage("anotherWorker  Return the data ");
  };
})();

The implementation effect is as follows ：
Insert picture description here

here , stay Chrome Of developer tools Sources Label under Page The tree is like this ：
Insert picture description here
This red box is what we created Worker.

After several calls, we found that ：
Insert picture description here
new Worker Constantly creating , old Worker It doesn't shut down automatically . This will cause a waste of resources . that , We need to close it manually Worker.

Let's give it first Worker Add one more close().

/* * @FilePath: /JavaScript Basics /WebWorker/anotherWorker.js */
(function () {
    
  this.onmessage = function (event) {
    
    console.log(event.data);
    postMessage("anotherWorker  Return the data ");

    this.close(); //  Close this after the data is returned from the branch line  Worker
  };
})();

The operation effect is as follows ：
Worker The normal operation
Worker The normal operation .
Insert picture description here
from Sources Label under Page You can see in the tree , these Worker It is completely closed after the data is returned .

Of course , You can also close in the callback of the main thread Worker, The effect is the same . The timing is different , On demand access .

var anotherWorker = new Worker("anotherWorker.js");
anotherWorker.onmessage = function (event) {
    
  console.log(event.data);

  anotherWorker.terminate(); //  Close the main thread  Worker
};
anotherWorker.postMessage(" towards anotherWorker Send a message ");

To sum up ：

  1. Worker Can't close automatically , We need to manually close
  2. Worker It can be passed through threads self.close() Shut down , You can also pass through the main thread worker.terminate() Shut down
  3. We can go through Chrome And developer tools Sources Label under Page Tree to observe Worker The state of , To determine Worker Whether it has been successfully created / close .
原网站

版权声明
本文为[acgCode]所创，转载请带上原文链接，感谢
https://yzsam.com/2022/02/202202200525483346.html

边栏推荐

猜你喜欢

随机推荐