Web workders的规范让javascript在后台运行脱离了UI线程,从而解决了大量计算阻塞UI线程导致卡死的问题。
在Web workers没有出现之前,我们可以使用window.setTimeout 异步方式将计算包裹其中,来解决这种问题。
1. 使用 Web Workers
Web Worder所执行的javascript代码完全在另一个作用域中,与当前网页中代码不共享作用域。在web worker中的全局对象是worker对象本身,也就是在这个特殊的作用域中,this 和 self 引用的都是worder对象,web worker本身是一个最小化
的运行环境。
- 最小化的navigator对象
- 只读location对象
- seTimeout(), setInterval(), clearTimeout(), clearInterval() 方法
- XMLHTTPRequest构造函数
// 加载要执行的文件,并创建worker
const worker = new Worker("demo.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();
demo.js
当页面在worker对象上调用postMessage() 时,数据会以异步的方式传递各位worker,进而触发worker中的message事件,
Worder完成工作后再通过调用postMessage() 把数据再发回页面。
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()
}
2. 包含其他脚本
在worker中无法操作Dom,但是可以通过api加载脚本
// web worker 内部代码 demo.js
importScripts("file1.js", "file2.js");
标签:Web,Workers,javascript,worker,message,data,event
From: https://www.cnblogs.com/xiaodi-js/p/17120404.html