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实线一个简单的计数器

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
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
<code>

<!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>

</code>

mytimer.js文件

1
2
3
4
5
6
7
8
9
10
11
var time = 0;

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