实现动态创建 Web Worker

何为 Web Worker

Web Worker 可以独立于主线程的后台线程中,运行一个脚本操作。这样做的好处是可以在独立线程中执行费时的处理任务,从而允许主线程(通常是 UI 线程)不会因此被阻塞 / 放慢。

通常最简单的创建的方式为在页面的 JS 代码中使用 Worker 对象来加载另一个 JS 文件:

javascript 复制代码
let worker = new Worker('worker.js');
 
worker.postMessage('hello, worker');
 
worker.onmessage = (e)=>{
    console.log('收到 worker 的消息', JSON.stringify(e.data));
}

worker.js 中的代码为:

javascript 复制代码
self.onmessage = (e)=>{
    console.log('收到主线程的消息', JSON.stringify(e.data));
 
    self.postMessage('hello, host');
}

那么该如何动态的创建 Worker 呢?

建立多个 JS 文件,根据情况来创建不同的 Worker?

那还有什么意思呢。。。

随着 HTML5 的不断发展,新提供的接口、对象可以提供另一种解决方案:

  • Blob 对象,表示一个不可变、原始数据的类文件对象
  • URL 对象的 createObjectURL 方法

这样,就可以用如下的代码实现上文的同样效果,但却少了一个文件:

javascript 复制代码
let code = `
self.onmessage = (e)=>{
    console.log('收到主线程的消息', JSON.stringify(e.data));
       
    self.postMessage('hello, host');
}
`
    blob = new Blob([code], {
       type: 'text/javascript'
    }),
    url = URL.createObjectURL(blob, {
       type: 'text/javascript'
    }),
    worker = new Worker( url );
 
worker.postMessage('hello, worker');
 
worker.onmessage = (e)=>{
    console.log('收到 worker 的消息', JSON.stringify(e.data));
};

这样基于此,进一步封装:

javascript 复制代码
function createWorker(handler){
    let code = `
let handler = ${handler.toString};
 
self.onmessage = (e)=>{
    self.postMessage( handler(e.data) );
};
`
        blob = new Blob([code], {
          type: 'text/javascript'
       }),
        worker = new Worker( URL.createObjectURL(blob) );
 
    return worker;
}

那么,这样有什么用呢,目前可用的场景有对大数据进行处理,其它的后续补充。。。

javascript 复制代码
let handleData = (data)=>{
       let rs;
 
       // 处理 data
 
       return rs;
    }
    render = (data)=>{
       // 渲染
    };
 
fetch('/bigData').then((res)=>{
    if( res.data.length > 100000 ){
       // 数据量太大,创建 worker 进行处理
       let worker = createWorker( handler );
 
       worker.postMessage( res.data );
       worker.onmessage = function(e){
          render( e.data );
 
          worker.terminate();    // 结束 worker
       }
    }
    else{
       render( handleData(res.data) );
    }
});

参考文章: 动态创建 Web Worker 实践指南

相关推荐
蓝易云几秒前
CentOS 7上安装X virtual framebuffer (Xvfb) 的步骤以及如何解决无X服务器的问题
前端·后端·centos
到底起什么网名才能不重名1 分钟前
使用各种CSS美化网页
前端·css·vscode·bootstrap·html
然我2 分钟前
面试必问:JS 事件机制从绑定到委托,一篇吃透所有考点
前端·javascript·面试
小蜜蜂嗡嗡10 分钟前
flutter封装vlcplayer的控制器
前端·javascript·flutter
一tiao咸鱼13 分钟前
如何简单使用 prompt
前端·aigc
cdbqss118 分钟前
VB.net编写的身份证类
前端·.net
骑自行车的码农35 分钟前
React短文系列 遍历fiber树 App的创建
前端·react.js
AskSky39 分钟前
为了搞一个完美的健身APP,我真是费尽心机
前端
斯~内克44 分钟前
基于Vue.js和PDF-Lib的条形码生成与批量打印方案
前端·vue.js·pdf
阴阳怪气乌托邦1 小时前
别再啃OA代码了!低代码"搭积木"式搞数智化,我直接少写500行
前端·低代码