Js:Web Workers API

23556 ワード
Worker Web Workers テキストリンク

Web Workers APIは


これは、単一スレッドベースのJavaScriptでバックグラウンドスレッドを実行できるAPIです.
私はこの概念を初めて聞いた.(勉強することが多いですね…)
+勉強して開発書を読んでいたら発見…!早読で分かった...

主にXMLHttpRequest, 웹 소켓, Index DBなどの作業が可能である.
逆に、異なるthreadで動作するため、DOM動作またはwindow オブジェクトの方法および属性は使用できない.△ある意味では当然のことだ.Worker()という名前のオブジェクトを使用すると、インタフェースの動作に干渉することなく動作を実行できます.

使用例


if (window.Worker) {

  //여기에 백그라운드에서 실행 시킬 코드를 작성하면 된다.
}

我々はネットワーク死体を用いてデジタル乗算の論理を構築する.
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width">

    <title>Web Workers basic example</title>

    <link rel="stylesheet" href="style.css">
    <!--[if lt IE 9]>
      <script src="//html5shiv.googlecode.com/svn/trunk/html5.js"></script>
    <![endif]-->
  </head>

  <body>
    <h1>Web<br>Workers<br>basic<br>example</h1>

    <div class="controls" tabindex="0">
      <form>
        <div>
          <label for="number1">Multiply number 1: </label>
          <input type="text" id="number1" value="0">
        </div>
        <div>
          <label for="number2">Multiply number 2: </label>
          <input type="text" id="number2" value="0">
        </div>
      </form>

      <p class="result">Result: 0</p>
    </div>
    <script src="main.js"></script>
  </body>
</html>
const first = document.querySelector('#number1');
const second = document.querySelector('#number2');
const result = document.querySelector('.result');
こうして、ドームをDOMのコレクターで持ってきたと仮定します.

Web Workerオブジェクトの作成

var myWorker = new Worker("worker.js");다.
まず、Web Workerを行うオブジェクトを作成します.
first.onchange = function() {
  myWorker.postMessage([first.value,second.value]);
  console.log('Message posted to worker');
}

second.onchange = function() {
  myWorker.postMessage([first.value,second.value]);
  console.log('Message posted to worker');
}
1番目の値と2番目の値が変更されると、ネットワークワーカーにメッセージが送信されます.
onmessage = function(e) {
  console.log('Message received from main script');
  var workerResult = 'Result: ' + (e.data[0] * e.data[1]);
  console.log('Posting message back to main script');
  postMessage(workerResult);
}
情報を受け取ると、WebWarkerは計算結果を送り返します.
myWorker.onmessage = function(e) {
  result.textContent = e.data;
  console.log('Message received from worker');
}
ネット死体から算出されたリンゴの値をスクリーンに記録する.

フルコード

//main.js

   
const first = document.querySelector('#number1');
const second = document.querySelector('#number2');

const result = document.querySelector('.result');

if (window.Worker) {
  const myWorker = new Worker("worker.js");

  first.onchange = function() {
    myWorker.postMessage([first.value, second.value]);
    console.log('Message posted to worker');
  }

  second.onchange = function() {
    myWorker.postMessage([first.value, second.value]);
    console.log('Message posted to worker');
  }

  myWorker.onmessage = function(e) {
    result.textContent = e.data;
    console.log('Message received from worker');
  }
} else {
  console.log('Your browser doesn\'t support web workers.');
}
完全なコードリンク 
myWorker.terminate();
最終的にネット死体を終わらせた.
ソース
Web Workerの使用
プログラマ-ハザード数
panamaプロジェクトにおける文字符号化問題の解決