一,web worker
介绍
1.javaScript
是单线程的,当有一些非常复杂的任务需要处理时,页面不得不需要等待任务处理完成才能响应用户的操作,也就是说页面被阻塞了,这对于页面的响应及用户体验都会带来一些负面的影响。
2.为了解决这个问题,同时也是为了利用多核CPU
的计算能力,HTML5
提出了Web Worker
标准,允许JavaScript
创建多个线程。
3.简单来说 web Worker
就是一个运行在后台的JavaScript
线程,并且不会影响页面的响应。
4.web Worker
可以分为两种不同线程类型,
(1)专用线程 Dedicated Worker
,
(2)共享线程 Shared Worker
。
5.目前除了IE
,其他主流浏览器都已经支持Web Worker
。
二,web worker
的限制
1.子线程由js引擎管理,运行在一个全新的环境WorkerGlobalScope
下,因此web worker
有几点限制。
Web Worker
无法访问DOM
节点;
Web Worker
无法访问全局变量或是全局函数;
Web Worker
无法调用alert()
或者confirm
之类的函数;
Web Worker
无法访问window
、document
之类的浏览器全局变量。
2.但在workerGlobalScope
环境下下可以使用setTimeout
和 setInterval
之类的函数,也可以使用XMLHttpRequest
对象来做Ajax通信。
三,web worker
语法
1.创建一个worker
实例对象,传入一个url
参数,表示要执行的子线程代码。
let w= new Worker('worker.js')
2.主线程和子线程的通信:使用postMessage()
传递数据。使用onmessage(e)
接受数据。
//主线程
var worker = new Worker('worker.js');
worker.onmessage = function (e) {
var data = e.data;
}
var messageData = {
message: 'hello worker!'
};
worker.postMessage(messageData);
//子线程
self.onmessage = function(e) {
var messages = e.data; // e.data为{message: 'hello worker!'}
var workerResult = {};
// do something
...
postMessage(workerResult);
}
参考:http://www.fly63.com/article/detial/998