Web Workers

ゝ一世哀愁。 2022-06-14 03:19 137阅读 0赞

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

发表评论取消回复

表情：

评论列表（有 0 条评论，137人围观）

还没有评论，来说两句吧...

相关阅读

相关使用 Web Workers

使用 Web Workers Web Worker为Web内容在后台线程中运行脚本提供了一种简单的方法。线程可以执行任务而不干扰用户界面。此外，他们可以使用`XM

淡淡的烟草味﹌/ 2023年03月01日 06:25/ 0 赞/ 20 阅读

相关 H5 web Worker

H5 web Worker H5线程线程中可用的变量、函数与类 1. self：用来表示本线程范围内的作用域。 2. postMessage(msg)：向创建线

￡神魔★判官ぃ/ 2022年09月25日 05:18/ 0 赞/ 151 阅读

相关 HTML5Web Workers

最近正在写一个数据量比较大的页面，正好偶然看到HTML5的Web Workers可以实现非阻塞处理数据，心中甚喜。终于网上查了一番发现确实是个好东西，然而

系统管理员/ 2022年07月26日 11:24/ 0 赞/ 172 阅读

相关 Web Workers

Web Workers 为 Web 前端网页上的脚本提供了一种能在后台进程中运行的方法。一旦它被创建，Web Workers 就可以通过 postMessage 向任务池发送任

ゝ一世哀愁。/ 2022年06月14日 03:19/ 0 赞/ 138 阅读

相关 Web Worker和WebSocket

1、Web Worker 1）Web Worker 是运行在后台的 JavaScript、独立于其他脚本、不会影响页面的性能、您可以继续做任何愿意做的事情：点击、选取内容等等

￡神魔★判官ぃ/ 2022年06月08日 02:09/ 0 赞/ 239 阅读

相关 web worker的了解

如，MDN[文档][Link 1]中介绍的那样，使用demo如下 <!DOCTYPE html> <html lang="en">

我就是我/ 2022年05月23日 02:05/ 0 赞/ 189 阅读

相关 HTML5 Web Workers

当在 HTML 页面中执行脚本时，页面的状态是不可响应的，直到脚本已完成。 web worker 是运行在后台的 JavaScript，独立于其他脚本，不会影响页面

谁践踏了优雅/ 2022年05月19日 08:06/ 0 赞/ 178 阅读

相关 Web Worker初步学习

Web Worker是H5的新特性之一，但用的比较少。其特性是在Javascript单线程执行的基础上，开启一个子线程。子程序可以和主线程相互收发数据，但是不影响主线程。且子线

布满荆棘的人生/ 2022年05月16日 09:54/ 0 赞/ 245 阅读

相关 Web Worker使用

Web Workers 是 HTML5 提供的一个javascript多线程解决方案，我们可以将一些大计算量的代码交由web Worker运行而不冻结用户界面。介绍通过

快来打我*/ 2022年02月24日 02:36/ 0 赞/ 243 阅读

相关 html5 Web Workers

虽然在JavaScript中有setInterval和setTimeout函数使javaScript看起来好像使多线程执行，单实际上JavaScript使单线程的，一次只能做一

快来打我*/ 2022年02月02日 14:59/ 0 赞/ 214 阅读