实现动态创建 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 实践指南

相关推荐
咖啡の猫几秒前
Vue混入
前端·javascript·vue.js
两个西柚呀5 小时前
未在props中声明的属性
前端·javascript·vue.js
子伟-H57 小时前
App开发框架调研对比
前端
桃子不吃李子7 小时前
axios的二次封装
前端·学习·axios
SteveJrong7 小时前
面试题 - JavaScript
前端·javascript·面试·ecmascript·基础·找工作·红宝书
阿金要当大魔王~~7 小时前
uniapp 页面标签 传值 ————— uniapp 定义 接口
前端·javascript·uni-app·1024程序员节
全栈软件开发8 小时前
uniapp三端影视源码苹果cms自动采集电影视频网站源码前端源码带VIP
前端·uni-app·影视源码
chxii8 小时前
10.4FormData :前端文件上传与表单数据处理的核心工具
前端
AntBlack8 小时前
不当韭菜 : 好像真有点效果 ,想藏起来自己用了
前端·后端·python
楊无好8 小时前
react中props的使用
前端·react.js·前端框架