Web Workers

Web Workers 为 Web 前端网页上的脚本提供了一种能在后台进程中运行的方法。一旦它被创建,Web Workers 就可以通过 postMessage 向任务池发送任务请求,执行完之后再通过 postMessage 返回消息给创建者指定的事件处理程序 ( 通过 onmessage 进行捕获 )。Web Workers 进程能够在不影响用户界面的情况下处理任务,并且,它还可以使用 XMLHttpRequest 来处理 I/O,但通常,后台进程(包括 Web Workers 进程)不能对 DOM 进行操作。如果希望后台程序处理的结果能够改变 DOM,只能通过返回消息给创建者的回调函数进行处理。

示例代码:
main.html:

<!DOCTYPE html>
<html lang="zh-CN">
    <head>
        <meta charset="utf-8" />
        <title>兔子 の test html</title>
        <style type="text/css">

        </style>
        <script type="text/javascript">
            function init(){
                    console.log(window.Worker)
              var worker = new Worker('test.js');
              //event 参数中有 data 属性,就是子线程中返回的结果数据
              worker.onmessage= function (event) {
                  // 把子线程返回的结果添加到 div 上
                  document.getElementById("result").innerHTML +=
                     event.data+"<br/>";
              };
          }
        </script>
    </head>
    <body onload="init()">
        <div id="result"></div>
    </body>
</html>

test.js代码:

var i=0;

function timedCount(){
    for(var j=0,sum=0;j<100;j++){
        for(var i=0;i<100000000;i++){
            sum+=i;
        }
    }
    // 调用 postMessage 向主线程发送消息
    postMessage(sum);
}
console.log("in-test.js");
postMessage("Before computing,"+new Date());
timedCount();
postMessage("After computing,"+new Date());

注:在chrome运行会报错,因为chrome并不支持worker;在Safari和Firefox下都可以正常运行。

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值