H5之多线程Web Workers

简介

web worker 是运行在后台的 JavaScript,不会影响页面的性能。例如处理类似高斯函数处理图片这种处理信息量比较庞大时有可能会造成页面阻塞, 因此这种时候就可以通过Worker创建一个线程在后台处理信息, 当处理完成时会把信息返回回来.

兼容性

Internet Explorer 10, Firefox, Chrome, Safari 和 Opera 都支持Web workers.
这里写图片描述

使用

1 . Worker是一个对象因此使用时需要

1
2
3
4
5
6
7
8
9
10
11
12
//先判断浏览器是否兼容
if(typeof(Worker)!=="undefined")
{
// 是的! Web worker 支持!
// 一些代码.....
var worker = new Worker('worker.js');
}
else
{
//抱歉! Web Worker 不支持
}
//这里的worker.js是你想要进行数据处理文件名.

2 . 终止Worker
当我们创建 web worker 对象后,它会继续监听消息(即使在外部脚本完成之后)直到其被终止为止。
如需终止 web worker,并释放浏览器/计算机资源,请使用 terminate() 方法:

1
worker.terminate();

3 . 在使用woker之前首先要为其绑定处理事件

1
2
3
4
5
// 给 worker 绑定 message 事件
worker.onmessage = function (e) {
console.log(e.data);
}

4 . postMessage
用于两个文件的通信, 见下面代码

处理函数文件worker.js

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
// 绑定 onmessage 事件
onmessage = function (e) {
var num = e.data;
// 关闭 worker
//函数内丢弃数据不处理
// close(); // 消息被抛弃了
/********下面代码演示在worker里面创建worker*********/
/******* not support now ****/
// var worker = new Worker('worker1.js');
//目前这种方法没有支持
// worker.postMessage(num);
// worker.onmessage = function (e) {
// postMessage(e.data * 10);
// }
/*****************/
// 向主线程发送数据
postMessage(num * 10);
}

主程序文件

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
<script src="./worker.js"></script>
<script>
// 创建一个 worker
var worker = new Worker('worker.js');
// 给 worker 绑定 message 事件
worker.onmessage = function (e) {
console.log(e.data);
}
// worker postMessage
worker.postMessage(10);//输出100
</script>
越来越多的平台(微信公众平台,新浪微博,简书,百度打赏等)支持打赏功能,付费阅读时代越来越近,特此增加了打赏功能,支持微信打赏和支付宝打赏。坚持原创技术分享,您的支持将鼓励我继续创作!