HTML5 webworker api介绍

webworker的背景
JavaScript是单线程的，所以当我们需要在同一个页面背后做某些事情的时候怎么办？通常的做法是使用settimeout，但是html5给我们提供了一个方便的方法 webworker（工作线程）
但是使用它有一些限制：
Web Worker无法访问DOM节点；
Web Worker无法访问全局变量或是全局函数；
Web Worker无法调用alert()或者confirm之类的函数；
Web Worker无法访问window、document之类的浏览器全局变量；
我们可以使用它做一些比较耗时的处理

<!DOCTYPE html>
    <head>
        <title>worker</title>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
        <script>
            function init(){
                //创建一个Worker对象，并向它传递将在新线程中执行的脚本url
                var worker = new Worker('worker.js');
                //接收worker传递过来的数据
                worker.onmessage = function(event){
                    document.getElementById('result').innerHTML+=event.data+"<br/>" ;
                };
            };
        </script>
    </head>
    <body onload = "init()">
        <div id="result"></div>
    </body>
</html>

work.js

var i = 0;
function timedCount(){
    for(var j = 0, sum = 0; j < 100; j++){
        for(var i = 0; i < 100000000; i++){
            sum+=i;
        };
    };
    //将得到的sum发送回主线程
    postMessage(sum);
};
//将执行timedCount前的时间，通过postMessage发送回主线程
postMessage('Before computing, '+new Date());
timedCount();
//结束timedCount后，将结束时间发送回主线程
postMessage('After computing, ' +new Date());

上面代码执行的流程是：创建的worker对象，并用onmessage方法接收worker.js里面postMessage传递过来的数据(event.data)，并将数据追加到div#result中。
执行结果如下

HTML5 webworker api介绍

推荐阅读更多精彩内容