Web Worker

一、Web Worker

1. Web Worker是 运行在后台的javascript,也就是说worker其实就是就一个js文件对象,worker可以让他所包含的js代码运行在后台
2. 特点:
 1)充分利用多核CPU的优势
 2)对多线程支持非常好
 3)不会影响页面的性能
 4)不能访问web页面和DOM API
 5)所有的主流浏览器均支持web worker,除了Internet Explorer
3. Worker提供API
  1)检测当前浏览器是否支持Worker
    
    typeof(Worker) !== "undefined",如果浏览器返回true,则证明,浏览器支持Worker

  2)创建Worker文件

     创建普通的 JS 文件,都可以用于 Web Worker 文件

  3)创建Web Worker对象

      var worker = new Worker("myTime.js");

      参数就是在第二步创建的js文件的路径

  4)worker事件

    # onmessage事件

       用于监听 Web Worker 传递消息,通过回调函数接收传递的消息,通过回调函数的事件对象data 属性可以获取传递的消息

    #postMessage()

       w.postMessage( “worker success.” );

       通过postMessage() 方法传递消息内容

    #w.terminate();

       在HTML页面中,通过调用 Web Worker 对象的terminate( ) 方法终止 Web Worker。

用Worker实线一个简单的计数器

<pre>

<!DOCTYPE html>
<html>

<head>
<meta charset="UTF-8">
<title></title>
</head>

<body>

<button id="start">开始计时</button>
<button id="stop">结束计时</button>

<br />

<div id="showTime"></div>

</body>

<script type="text/javascript">
var showTime = document.getElementById("showTime");
var start = document.getElementById("start").onclick = function() {
//判断是否支持worker
if (typeof(Worker) !== "undefined") {
//创建js文件,把想运行在后台的js文件放在文件里
//创建worker对象,并执行内部代码
worker = new Worker("mytimer.js");
//绑定接受worker传来数据的事件
worker.onmessage = function(event) {
showTime.innerHTML = event.data;
}

    } else {
        console.log("你的浏览器不支持worker");
    }
}
var stop = document.getElementById("stop").onclick = function() {
    //终止worker
    worker.terminate();
}

</script>

</html>

</pre>

mytimer.js文件

<pre>
var time = 0;

function timer() {
time++;
//从worker中发送数据
//worker中的全局变量,就是worker对象
postMessage(time);
console.log(time);
setTimeout(timer, 1000);
}
timer();
</pre>

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
【社区内容提示】社区部分内容疑似由AI辅助生成,浏览时请结合常识与多方信息审慎甄别。
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

相关阅读更多精彩内容

友情链接更多精彩内容