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下都可以正常运行。

### 使用 Web Workers 在 JavaScript 中执行后台任务 Web Workers 是一种在前端实现多线程的技术,允许开发者通过创建新的背景线程来运行脚本[^4]。这些线程独立于主线程工作,因此不会干扰用户界面的操作[^3]。 #### 创建和启动 Web Worker 要使用 Web Workers,在 HTML 文件中可以通过 `new Worker()` 方法实例化一个新的 Worker 对象,并指定一个外部 JavaScript 文件作为其入口点: ```javascript // 主线程中的代码 const myWorker = new Worker('worker.js'); ``` 上述代码会加载名为 `worker.js` 的文件并将其作为一个单独的线程运行。 #### 向 Web Worker 发送消息 主线程可以向 Web Worker 发送数据,这通常用于传递需要处理的任务参数。发送消息的方法如下所示: ```javascript myWorker.postMessage({ data: 'Hello from main thread!' }); ``` 这里调用了 `postMessage()` 函数,它接受任何可序列化的对象作为参数[^2]。 #### 接收来自 Web Worker 的消息 当 Web Worker 完成计算并将结果返回给主线程时,可以在主线程监听 `message` 事件以接收该结果: ```javascript myWorker.onmessage = function(event) { console.log('Received:', event.data); }; ``` 此部分展示了如何捕获由子线程发出的消息,并打印接收到的数据到控制台[^1]。 #### 终止 Web Worker 如果不再需要某个特定的工作进程,则应该终止它以释放资源: ```javascript myWorker.terminate(); ``` 这一操作立即停止 Worker 执行的所有活动。 #### Web Worker 内部逻辑编写 下面是一个简单的例子展示了一个可能存在于 `worker.js` 文件内的基本结构: ```javascript self.onmessage = function(e) { let result = e.data * 2; // 假设我们只是简单地加倍传入数值 self.postMessage(result); // 将结果发回给父级页面/应用 } ``` 这段代码定义了当 Worker 收到来自主文档的信息时应采取的动作——即倍增输入值再反馈回去。 ### 注意事项 虽然 Web Workers 提供了一种强大的方式来进行复杂的运算而不影响用户体验,但也存在一些局限性和最佳实践需要注意。例如,由于安全原因,Workers 只能访问有限的一组 API 和全局变量集合[^5]。 ---
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值