Web Workers JS多线程初探--使用Blob方式创建

API说明文档地址：https://developer.mozilla.org/zh-CN/docs/Web/API/Web_Workers_API

前言：

worker浏览器兼容性现在还不错，导致其并不流行的原因我认为是因为在worker内不能直接操作 DOM 节点，也不能使用window对象的默认方法和属性并且worker运行的脚本与内部引用脚本都遵循同源策略（以下所有示例的脚本引用都默认基于此策略），导致只能运行一些纯计算类的脚本。

使用方式

	// 方式一 直接指定js文件地址来创建 
	let myWorker = new Worker('worker.js');

	// 方式二 使用Blob URL 作为参数
	let script = `console.log(self)`,
		workerBlob = new Blob([script], { type: "text/javascript" }),
        workerUrl = URL.createObjectURL(workerBlob),
        myWorker = new Worker(workerUrl);

与主线程之间通信

主线程使用如下api接收与发送消息：
Worker.postMessage()
Worker.onmessage
worker只需在内部为onmessage赋予事件处理函数作为响应，使用postMessage()函数发送；

示例如下：

    let script = `
        // worker发送消息
        postMessage("worker已就绪!");
        
        // 为onmessage赋予事件处理函数
        onmessage = function (event) {
            postMessage("worker收到主线程发送消息" + event.data);
        };`,
        workerBlob = new Blob([script], { type: "text/javascript" }),
        workerUrl = URL.createObjectURL(workerBlob),
        myWorker = new Worker(workerUrl);

    // 主线程接收消息
    myWorker.onmessage = function (event) {
        console.log('主线程收到信息:' + event.data);
    };

    // 主线程发送消息
    myWorker.postMessage('Hello World');

引用脚本

方式一 创建的worker直接在脚本内使用importScripts(url) 即可引用；
方式二 创建的脚本由于Blob前缀的影响会导致地址解析失败所以需要从主线程传入，例如：

let script = `importScripts(event.data.url + 'xxx.js')`,
	workerBlob = new Blob([script], { type: "text/javascript" }),
	workerUrl = URL.createObjectURL(workerBlob),
	myWorker = new Worker(workerUrl);

	myWorker.postMessage({ url: location.origin });

Demo

    let script, workerBlob, workerUrl, myWorker;

    if (window.Worker) { // 兼容性处理
        script = `
            // 数组长度过大很容易导致浏览器假死,等一会就行
            const array = Array.from({ length: 1000000 }, value => Math.ceil(Math.random() * 1000));

            function Something() {

                console.time('worker: Map运行耗时');
                const newArray = array.map(x =>  x * 2 );
                console.timeEnd('worker: Map运行耗时');

                return postMessage(newArray);
            }

            // worker发送消息
            postMessage("worker已就绪!");

            // 为onmessage赋予事件处理函数
            onmessage = function (event) {
                event.data == 'run' && postMessage("worker收到指令,开始运行!"),Something();
            };`;
        workerBlob = new Blob([script], { type: "text/javascript" });
        workerUrl = URL.createObjectURL(workerBlob);
        myWorker = new Worker(workerUrl);

        // 主线程接收消息
        myWorker.onmessage = function (event) {
            console.log('主线程收到信息:' + event.data);
        };

        // 主线程发送消息
        myWorker.postMessage('run');
    } else {
        // Something...
    }