HTML5中的postMessage API基本使用教程

2019-01-28 22:16:10王冬梅
  •    document.getElementById("result").innerHTML +=           event.data+"<br/>";    
  •   };      }    
  • </script>     </head>    
  • <body onload="init()">     <div id="result"></div>    
  • </body>     </html>  

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

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

    JavaScript Code复制内容到剪贴板
    1. var i=0;       
    2. function timedCount(){      for(var j=0,sum=0;j<100;j++){    
    3.   for(var i=0;i<100000000;i++){        sum+=i;    
    4.   }      }    
    5.  // 调用 postMessage 向主线程发送消息     postMessage(sum);    
    6. }       
    7. postMessage("Before computing,"+new Date());     timedCount();    
    8. postMessage("After computing,"+new Date());