Web Worker

Web Worker 的作用，就是为 JavaScript 创造多线程环境，允许主线程创建 Worker 线程，将一些任务分配给后者运行。

用法

这里的work.js是一个脚本文件

let worker = new Worker('work.js');

Web Worker 有自己的全局对象，不是主线程的window，而是一个专门为 Worker 定制的全局对象。因此定义在window上面的对象和方法不是全部都可以使用

主线程通过postMessage方法给worker传递数据，其中参数就是传递的数据

worker.postMessage('Hello World');

主线程通过监听onmessage和onerror来获取worker中的状态

worker.onmessage = function (event){
    console.log('Received message ' + event.data);
    doSomething();
}
worker.onerror = error => {
    console.log(error )
}

关闭worker。在worker结束之后，一定要关闭，因为线程一旦新建成功，就会始终运行，不会被主线程上的活动（比如用户点击按钮、提交表单）打断，比较耗费资源，不应该过度使用。

worker.terminate(); // 在主线程关闭worker

this.close(); // 在脚本内部关闭

同时加载多个文件,异步加载

importScripts('script1.js', 'script2.js');

runAsync

runAsync函数返回一个promise对象，将传入的函数放置于第二线程执行，可以用来处理耗时过长的的计算，防止页面卡顿

const runAsync = fn => {
    const worker = new Worker(
        URL.createObjectURL(new Blob([`postMessage((${fn})());`]), {
            type: 'application/javascript; charset=utf-8'
        })
    );
    
    return new Promise((res, rej) => {
        worker.onmessage = ({ data }) => {
            res(data), worker.terminate();
        };
        worker.onerror = err => { 
            rej(err), worker.terminate();
        };
    });
};


用法

runAsync( fn ).then( console.log );

URL.createObjectURL(new Blob([postMessage((${fn})());]), { type: 'application/javascript; charset=utf-8' }) 会生成一个url
（注1）

使用须知

分配给 Worker 线程运行的脚本文件，必须与主线程的脚本文件同源
Worker 线程所在的全局对象，与主线程不一样，无法读取主线程所在网页的 DOM 对象，也无法使用document、window、parent这些对象。但是，Worker 线程可以navigator对象和location对象
Worker 线程可以使用 XMLHttpRequest 对象发出 AJAX 请求。

注1：关于Blob，是一种JavaScript的对象类型，blob 存储着大量的二进制数据，并且 blob 的 size 和 type 属性，都会被 file 对象所继承

下面的栗子会使用URL.createObjectURL + Blob生成一段url并添加iframe到页面中，执行后会在页面中显示div

<script type="text/javascript">
    let div = '<div style="font-size:32px;color:red;">文字</div>'
    let url = new Blob([div],  { type: 'text/html' })
    onload=function(){   
      var iframe=document.createElement("iframe");   
      iframe.src=URL.createObjectURL(url, {type: 'text/html;'})
      document.body.appendChild(iframe);   
    };
</script>

https://github.com/30-seconds/30-seconds-of-code?utm_source=caibaojian.com --- github