Web Worker — 基础知识
-
Web Worker是 运行在后台的javascript,也就是说worker其实就是就一个js文件对象，worker可以让他所包含的js代码运行在后台
-
特点：
- 充分利用多核CPU的优势
- 对多线程支持非常好
- 不会影响页面的性能
- 不能访问web页面和DOM API，worker文件里的变量都属于Worker，所以在worker文件里不支持 document 形式
- 所有的主流浏览器均支持web worker，除了较老Internet Explorer版本
- Worker提供API
-
检测当前浏览器是否支持Worker
在浏览器的控制台输入 typeof(Worker) !== "undefined"; 输出 true 证明浏览器支持 Worker
-
创建Worker文件
创建普通的 JS 文件，都可以用于 Web Worker 文件 -
创建Web Worker对象
var worker = new Worker("myTime.js"); 参数就是在第二步创建的js文件的路径 -
worker事件
-
onmessage事件
用于监听 Web Worker 传递消息，通过回调函数接收传递的消息,
通过回调函数的事件对象data 属性可以获取传递的消息 -
postMessage()
注意：postMessage() 只写在创建的Worker文件中
通过postMessage() 方法传递消息内容
worker.postMessage( "worker success"); -
worker.terminate();
在HTML页面中，通过调用 Web Worker 对象的 terminate( ) 方法终止 Web Worker。
-
使用步骤
- 创建WebWorker对象
- Worker对象
- onmessage事件，当执行postMessage事件时会触发
- postMessage()方法
- terminate()方法
例子
<body>
<button id="start">开始计时</button>
<button id="stop">结束计时</button>
<br/>
<div id="showTime"></div>
</body>
<script type="text/javascript">
var show=document.getElementById("showTime");
var start=document.getElementById('start');
var stop=document.getElementById('stop');
start.onclick=function(){
if(typeof(Worker) !== "undefined"){
worker=new Worker("worker.js");
worker.onmessage=function(event){
show.innerHTML=event.data;
};
}else{
alert("你的浏览器不支持");
};
};
stop.onclick=function(){
worker.terminate();
};
</script>
worker.js 文件
var time=0;
(function _start(){
time++;
postMessage(time);
t=setTimeout(_start,1000);
})();
未完待续······
网友评论