当在 HTML 页面中执行脚本时，页面的状态是不可响应的，直到脚本已完成。
Web Workers 是运行在后台的 JavaScript线程，独立于其他脚本，不会影响到前端其他任何操作或体验。
主要过程包括：
1、创建Worker对象；
2、将参数值传递通过Worker对象的postMessage方法传递传递给后台线程脚本；
3、后台线程脚本处理后将结果通过postMessage方法返回；
4、原脚本通过监听onMessage事件获取后台线程传过来的值。
实例代码如下：
html页面：
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> 5 <title>无标题文档</title> 6 <script type="text/javascript" src="bb.js"> 7 </script> 8 </head> 9 <body> 10 输入数值：<input type="text" id="num"><input type="button" id="button" value="计算" /> 11 </body> 12 </html>
bb.js代码：
1 window.onload = function() { 2 var worker = new Worker("sumCalculate.js"); 3 console.log(worker); 4 var bbDom = document.getElementById("button"); 5 6 bbDom.addEventListener("click", f); 7 8 function f(){ 9 var num = parseInt(document.getElementById("num").value); 10 worker.postMessage(num); 11 } 12 13 worker.onmessage = function(event) { 14 alert(event.data); 15 } 16 }
后台线程sumCalculate.js代码：
1 onmessage = function(event) { 2 var result = event.data * 10; 3 postMessage(result); 4 }
---------------------------------------------------------------------------------
笔者水平有限，若有错漏，欢迎指正，如果转载以及CV操作，请务必注明出处，谢谢！
笔者水平有限，若有错漏，欢迎指正，如果转载以及CV操作，请务必注明出处，谢谢！
分类:
Html | Css
本文转自Windstep博客园博客，原文链接：http://www.cnblogs.com/lwbqqyumidi/archive/2012/11/08/2761046.html，如需转载请自行联系原作者
