<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之类的浏览器全局变量;