Web Workers

最新推荐文章于 2025-05-21 23:12:54 发布

原创最新推荐文章于 2025-05-21 23:12:54 发布 · 386 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#web #前端

前端开发同时被 2 个专栏收录

227 篇文章

订阅专栏

JavaScript

185 篇文章

订阅专栏

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());