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

相关推荐
在未来等你2 小时前
Elasticsearch面试精讲 Day 17:查询性能调优实践
大数据·分布式·elasticsearch·搜索引擎·面试
人工智能训练师4 小时前
Ubuntu22.04如何安装新版本的Node.js和npm
linux·运维·前端·人工智能·ubuntu·npm·node.js
Seveny074 小时前
pnpm相对于npm,yarn的优势
前端·npm·node.js
yddddddy5 小时前
css的基本知识
前端·css
昔人'5 小时前
css `lh`单位
前端·css
前端君6 小时前
实现最大异步并发执行队列
javascript
围巾哥萧尘7 小时前
美式审美的商务头像照🧣
面试
Nan_Shu_6147 小时前
Web前端面试题(2)
前端
知识分享小能手7 小时前
React学习教程,从入门到精通,React 组件核心语法知识点详解(类组件体系)(19)
前端·javascript·vue.js·学习·react.js·react·anti-design-vue
蚂蚁RichLab前端团队8 小时前
🚀🚀🚀 RichLab - 花呗前端团队招贤纳士 - 【转岗/内推/社招】
前端·javascript·人工智能