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