H5(Web Workers)
2018-06-08 本文已影响12人
强某某
Web Workers
- Worker:构造函数,加载分线程执行的js文件
- Worker.prototype.onmessage: 用于接收另一个线程的回调函数
- Worker.prototype.postMessage:向另一个线程发送消息
- 缺点:worker内代码不能更新UI,不能跨域加载js,浏览器支持问题
说明:必须在服务器环境下,不能本地file,加载的js不能跨域,使用webworker的代码不要使用
箭头函数,let等新特性。
案例
html中的js
var worker = new Worker('a.js');
worker.postMessage(8);
worker.onmessage = function (event) {
console.log("接收的数据",event.data);
}
a.js
// 斐波那契数列
function fibonacci(n){
return n<=2?1:fibonacci(n-1)+fibonacci(n-2);
}
var onmessage = function(event) {
let res=fibonacci(event.data);
postMessage(res);
}
说明:之所以webworker代码中不能更新UI,是因为this指向是[object DedicatedWorkerGlobalScope],
即a.js中上下文不是window,没有UI更新相关的接口。