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

相关推荐
北海-cherish3 小时前
vue中的 watchEffect、watchAsyncEffect、watchPostEffect的区别
前端·javascript·vue.js
AALoveTouch3 小时前
网球馆自动预约系统的反调试
javascript·网络
2501_915909064 小时前
HTML5 与 HTTPS,页面能力、必要性、常见问题与实战排查
前端·ios·小程序·https·uni-app·iphone·html5
white-persist5 小时前
Python实例方法与Python类的构造方法全解析
开发语言·前端·python·原型模式
新中地GIS开发老师5 小时前
Cesium 军事标绘入门:用 Cesium-Plot-JS 快速实现标绘功能
前端·javascript·arcgis·cesium·gis开发·地理信息科学
Superxpang6 小时前
前端性能优化
前端·javascript·vue.js·性能优化
左手吻左脸。6 小时前
解决el-select因为弹出层层级问题,不展示下拉选
javascript·vue.js·elementui
李白的故乡6 小时前
el-tree-select名字
javascript·vue.js·ecmascript
Rysxt_6 小时前
Element Plus 入门教程:从零开始构建 Vue 3 界面
前端·javascript·vue.js
隐含6 小时前
对于el-table中自定义表头中添加el-popover会弹出两个的解决方案,分别针对固定列和非固定列来隐藏最后一个浮框。
前端·javascript·vue.js