HTML5新功能之八 《web works多线程》

一、多线程

　　js是单线程的去跑代码，比如如果做一个循环从0到1亿相加然后输出，浏览器可能会最后到假死（无响应状态），也可以非常慢，

　　在FF下测试使用了：3986ms　　如果使用web worker来处理，只需要1ms

<div id="box"></div>
<input type="button" id="beginBtn" value="开始">
<input type="button" id="endBtn" value="停止">

<script>
    function getId(id){
        return document.getElementById(id);
    }

    var oBeginBtn = getId("beginBtn");
    var oEndBtn = getId("endBtn");
    var oBox = getId("box");
    var temp = 0;

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

    // 接收从线程中传出的计算结果
    /*
    worker.onmessage = function(event){
        // 消息文本放置在data属性中，
        oBox.innerHTML = event.data;
    }
    */

    oBeginBtn.onclick = function(){
        console.time('a');

        // 将数据传给线程
        worker.postMessage(100000000);

        worker.onmessage = function(event){
            // 消息文本放置在data属性中，
            oBox.innerHTML = event.data;
        }

        console.timeEnd('a');

    }
</script>

count.js

onmessage = function(event){
    var num = event.data;
    var result = 0;
    for(var i=0; i<num; i++){
        result += i;
    }

    // 向线程创建源送回消息
    postMessage(result);
}

1、postMessage(msg)：向创建线程的源窗口发消息

2、onmessage：获取接收消息的事件

3、importScripts()：导入其它js脚本，参数为脚本文件的url，可以导入多个脚本文件

4、close()：结束线程

4、navigator对象：

　　可以在localStorage和sessionStorage

　　XMLHttpRequest可以在线程中使用ajax

　　setTimeout、setinterval()：定时器可以使用线程