凌晨不睡觉

V1

2022/10/28阅读:35主题:默认主题

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

我的个人公众号:归元田居 每日分享前端知识与资讯~

分类:

前端

标签:

JavaScript

作者介绍

凌晨不睡觉
V1