mdn-simple-web-worker

<style>
html{background-color: #7D2663;font-family: sans-serif;}
h1{margin: 0;font-size: 15vw;letter-spacing: -0.2rem;position: absolute;top:0;z-index: -1;}
.controls{padding: 4vw;width: 75%;margin: 10vw auto;background-color: rgba(255,255,255,.7);border: 5px solid black;opacity: .3;transition: all 1s;}
.controls:hover,.controls:focus{opacity: 1;}
.controls div{padding-bottom: 1rem;}
.controls label, .controls p, .controls input{font-size: 3vw;}
<style>
<h1>
  Web<br>Workers<br>basic<br>example
</h1>
<div class="controls">
  <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:</p>
</div>
<script>
var first = document.querySelector('#number1');
var second = document.querySelector('#number2');
var result = document.querySelector('.result');

if (window.Worker) { // Check if Browser supports the Worker api.
    // Requires script name as input
    var myWorker = new Worker("worker.js");

// onkeyup could be used instead of onchange if you wanted to update the answer every time
// an entered value is changed, and you don't want to have to unfocus the field to update its .value

    first.onchange = function() {
        myWorker.postMessage([first.value,second.value]); // Sending message as an array to the worker
        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');
    };
}
</script>

worker.js

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);
}

---

---

---

---

---

【know】css:vw, js: new Worker()

【explain】

vw_相对于视口的宽度。视口被均匀分为100单位的vw

 h1{font-size:8vw}

如果视口宽度视200mm，h1字号为16mm，即（8*200）/100

new Worker_可以在后台执行脚本，而不会阻塞页面交互。

分两种，共享式，专用式

限制:

• Web Worker无法访问DOM节点；
• Web Worker无法访问全局变量或是全局函数；
• Web Worker无法调用alert()或者confirm之类的函数；
• Web Worker无法访问window、document之类的浏览器全局变量；