Web worker总结

Web worker有以下两种类型：

1. Dedicated worker (专用)

　　属于单页面共享，目前除了IE之外各浏览器支持比较广泛；

// 页面中执行var work1 = window.work1 = new Worker("worker_1.js");
work1.onmessage = function (e) {console.log("Receive message:", e.data, e);
};
work1.postMessage("data to worker.");

// worker_1.js: 单独线程中执行
onmessage = function (e) {console.log("Receive from main:", e.data, e);
};var count = 0;
setInterval(function () {postMessage("Message data" + count++);
}, 5000);

2. SharedWorker

　　多页面共享，可以当做多页面之间交互的一种解决方案；当前Firefox 29以上才支持；

// 页面中执行if(!window.SharedWorker){alert("Your browser does not support SharedWorker!");return;
}var work2 = window.work2 = new SharedWorker("worker_2.js");
work2.port.onmessage = function (e) {console.log("Receive:", e.data, e);
};
work2.port.start();
//work2.port.postMessage("data to worker.");

// worker_2.js: 单独线程中执行var userCount = 0;
var portList = [];onconnect = function (e) {var port = e.ports[0];portList.push(port);port.postMessage("Accept new user with count:" + userCount);port.onmessage = function (e) {　　　　// 向所有接受者发送
　　　　for(var i=0; i<portList.length; i++){portList[i].postMessage("Send accepted msg:" + portList.length + i + e.data);}};
};

　　它们的scope|context并不是window，均继承自WorkerGlobalScope，前者为 DedicatedWorkerGlobalScope，后者为 SharedWorkerGlobalScope；在Chrome 38版本上后者不支持console的输出，目前MDN也没有相应的文档；

参考资料：

1. Dedicated worker　　　　https://developer.mozilla.org/en-US/docs/Web/API/Worker

2. SharedWorker　　　　　 https://developer.mozilla.org/en-US/docs/Web/API/SharedWorker

转载于:https://www.cnblogs.com/diydyq/p/4095329.html

Web worker总结相关推荐

深入理解javascript异步编程障眼法h5 web worker实现多线程
0.从一道题说起 var t = true; setTimeout(function(){ t = false; }, 1000); while(t){ } alert('end'); 1 2 3 4 ...
什么是Web Worker？
简单点说,Web Worker就是一个运行在后台的JavaScript线程,不会影响页面的响应. 我们知道,JavaScript是单线程的脚本语言,即同一时刻只能做一件事情,否则会带来极其复杂的同步问 ...
JavaScript多线程之HTML5 Web Worker
在博主的前些文章Promise的前世今生和妙用技巧和JavaScript单线程和浏览器事件循环简述中都曾提到了HTML5 Web Worker这一个概念.在JavaScript单线程和浏览器事件循环简 ...
web worker技术-js新线程
web worker的小例子,用来入门很合适,建议启动服务来开发.可以使用node的anywhere. <!DOCTYPE html> <html lang="en&quo ...
web worker的介绍和使用
文章目录简介 Web Workers的基本概念和使用 Web Workers的分类 worker和main thread之间的数据传输简介什么是web worker呢?从名字上就可以看出,web ...
HTML5 Web Worker
<!DOCTYPE html> <html><head><meta charset="utf-8" /><title>& ...
如何debug web worker
Created by Jerry Wang on Aug 12, 2014 Web Workers 为 Web 前端网页上的脚本提供了一种能在后台进程中运行的方法.一旦它被创建,Web Workers ...
如何调试 web worker
Created by Jerry Wang on Aug 12, 2014 Web Workers 为 Web 前端网页上的脚本提供了一种能在后台进程中运行的方法.一旦它被创建,Web Workers ...
Web Worker javascript多线程编程（一）
什么是Web Worker? web worker 是运行在后台的 JavaScript,不占用浏览器自身线程,独立于其他脚本,可以提高应用的总体性能,并且提升用户体验. 一般来说Javascript ...
如何查找历史线程阻塞原因_学习 Web Worker（js中的“多线程”）
昨天部门例会,讨论开发的系统遇到的问题,遇到一个医保上传比较耗时的问题,解决方案提到了Web Worker,学习一波. 首先简单介绍一下什么是web worker.我们都知道在浏览器中javascri ...

Web worker总结

Web worker总结相关推荐

最新文章

热门文章