webworker初步及本地worker文件起进程的问题

描述

interface of the Web Workers API,用于开启新的进程

注意

本地运行work.js，报错 cannot be accessed from origin 'null'，是chrome浏览器的问题，其他浏览器虽然不会报错，但是本地文件work.js不会生效。

解决

mdn这样描述：创建一个专用Web worker，它只执行URL指定的脚本。Worker不指定URL时，而由使用Blob创建。

代码替换

// worker.js代码写入html中
<script type="lslsls" id="worker">
    onmessage = function(e) {
        console.log("Worker: Message received from main script");
        let result = e.data[0] * e.data[1];
        if (isNaN(result)) {
            postMessage("Please write two numbers");
        } else {
            let workerResult = "Result: " + result;
            console.log("Worker: Posting message back to main script");
            postMessage(workerResult);
        }
    };
          
</script>

// main.js中的代码修改
// const myWorker = new Worker("worker.js");
const blob = new Blob([document.getElementById('worker').textContent]);
const url = window.URL.createObjectURL(blob)
const myWorker = new Worker(url);

注意，代替worker.js的script标签中的type必须不能被识别，即不能为下面几个值text/javascript、text/ecmascript、application/ecmascript、application/javascript、text/vbscript

完整代码(来自Mdn上的示例代码)

// html
<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8" />
    <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;
        }

        p {
            margin: 0;
        }

        .controls {
            padding: 4vw;
            width: 75%;
            margin: 10vw auto;
            background-color: rgba(255, 255, 255, 0.7);
            border: 5px solid black;
            opacity: 0.3;
            transition: 1s all;
        }

        .controls:hover,
        .controls:focus {
            opacity: 1;
        }

        .controls label,
        .controls p,
        .controls input {
            font-size: 3vw;
        }

        .controls div {
            padding-bottom: 1rem;
        }
    </style>
</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 type="lslsls" id="worker">
        onmessage = function(e) {
            console.log("Worker: Message received from main script");
            let result = e.data[0] * e.data[1];
            if (isNaN(result)) {
              postMessage("Please write two numbers");
            } else {
              let workerResult = "Result: " + result;
              console.log("Worker: Posting message back to main script");
              postMessage(workerResult);
            }
          };
          
    </script>
    <script src="main.js">

    </script>
</body>

</html>

// 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");
    const blob = new Blob([document.getElementById('worker').textContent]);
    const url = window.URL.createObjectURL(blob)
    const myWorker = new Worker(url);

    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.')
}

webworker初步及本地worker文件起进程的问题

描述

注意

解决

代码替换

完整代码(来自Mdn上的示例代码)

远远的飞梦

引用和评论

腾讯新闻中心首页改版啦

前端如何入门 Go 语言

100个React最佳实践小技巧

前端开发工具

开发插件集合

JS校验身份证号

Jerry和您聊聊Chrome开发者工具