javascript 高级编程系列 - Web Workers

Web workders的规范让javascript在后台运行脱离了UI线程,从而解决了大量计算阻塞UI线程导致卡死的问题。
在Web workers没有出现之前,我们可以使用window.setTimeout 异步方式将计算包裹其中,来解决这种问题。

1. 使用 Web Workers

Web Worder所执行的javascript代码完全在另一个作用域中,与当前网页中代码不共享作用域。在web worker中的全局对象是worker对象本身,也就是在这个特殊的作用域中,this 和 self 引用的都是worder对象,web worker本身是一个最小化
的运行环境,只能够使用有限的对象和方法。

2. worker 工作流程

当页面在worker对象上调用worker.postMessage()时,数据会以异步的方式传递给worker(worker.js),进而触发worker(worker.js)中的message事件(self.onmessage),worker(worker.js)完成工作后再通过调用self.postMessage() 把数据再发回页面。页面通过
worker.onmessage 监听返回的数据。

  • 在页面中创建worker (man.js)
// 加载要执行的文件,并创建worker
const worker = new Worker("worker.js");

// 给worker内部脚本发送消息
worker.postMessage({
  type: "command",
  message: "start!"
});

// worker 监听来自内部脚本的message事件
worker.onmessage = function (event){
  const data = event.data;
  // handle data
}

// worker 内部的javascript执行遇到错误,会触发error事件
worder.onerror = function(event){
  console.log(`Error: ${event.filename} (${event.lineno}: ${event.message})`)
}

// 立即停止 worker
worker.terminate();
  • 在worker中监听和处理数据 (worker.js)
self.onmessage = function(event){
  const data = event.data;
  // handle data
  data.sort((a,b) => a-b);
  // post message to page
  self.postMessage(data);
  // 停止worker
  self.close()
}

3. 产生sub-workers

workers 可以产生更多的worker,子worker必须与父页面处于相同的源中,并且子worker 的urI是相对于 父worker 的位置
而不是页面位置。

4. 包含其他脚本

在worker中无法操作Dom,但是可以通过importScripts函数加载脚本,如果加载脚本失败,则后续的代码都无法执行。

// web worker 内部代码 work.js
importScripts("file1.js", "file2.js");
posted @   箫笛  阅读(92)  评论(0编辑  收藏  举报
相关博文:
阅读排行:
· 没有源码,如何修改代码逻辑?
· PowerShell开发游戏 · 打蜜蜂
· 在鹅厂做java开发是什么体验
· 百万级群聊的设计实践
· WPF到Web的无缝过渡:英雄联盟客户端的OpenSilver迁移实战
历史上的今天:
2022-02-14 shell编程 - 条件测试
2022-02-14 shell编程 - 条件语句
点击右上角即可分享
微信分享提示