Workers

Web Workers能在后台进程中运行的方法.
Web Workers 进程能够在不影响用户界面的情况下处理任务，并且，它还可以使用 XMLHttpRequest 来处理 I/O，但通常，后台进程（包括 Web Workers 进程）不能对 DOM 进行操作。如果希望后台程序处理的结果能够改变 DOM，只能通过返回消息给创建者的回调函数进行处理。

  1. 主线程中创建 Worker 实例，并监听 onmessage 事件
    1
    function init(){ 
    var worker = new Worker('compute.js'); 
    worker.onmessage= function (event) { 
        console.log(event.data) 
    }; 
}

在客户端的 compute.js 中，只是简单的重复多次加和操作，最后通过 postMessage 方法把结果返回给主线程。而在这段时间内，主线程不被阻塞，用户可以通过拖拽浏览器，变大缩小浏览器窗口等操作测试这一现象。

  1. compute.js 中调用 postMessage 方法返回计算结果

    1
    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); 
} 
postMessage("Before computing,"+new Date()); 
timedCount(); 
postMessage("After computing,"+new Date());

  2. 父页面中嵌入子页面，调用 postMessage 方法发送数据

    1
    function sendIt(){ 
  // 通过 postMessage 向子窗口发送数据
  document.getElementById("otherPage").contentWindow 
      .postMessage( 
          document.getElementById("message").value, 
         "http://child.com:8080"
      ); 
} 
<!-- 通过 iframe 嵌入子页面 -->
<iframe src="//child.com:8080/TestHTML5/other-domain.html"
            id="otherPage"></iframe> 
<input type="text" id="message">
<input type="button" value="Send to child.com" onclick="sendIt()" />

在子窗口中监听 onmessage 事件，并用 JavaScript 实现显示父窗口发送过来的数据。

  1. 子窗口中监听 onmessage 事件，显示父窗口发送来的数据
    ```dash
    window.addEventListener(“message”, function( event ) {
    // 把父窗口发送过来的数据显示在子窗口中
    document.getElementById(“content”).innerHTML+=event.data+”
    “;
    }, false );