JavaScript旨在在单线程环境中运行，这意味着多个脚本无法同时运行.考虑一种情况，您需要处理UI事件，查询和处理大量API数据，以及操纵DOM.
JavaScript将使您的浏览器在CPU利用率很高的情况下挂起.让我们举一个简单的例子，JavaScript经历一个大循环 :
<!DOCTYPE HTML>
<html>
<head>
<title>Big for loop</title>
<script>
function bigLoop() {
for (var i = 0; i <= 10000; i += 1) {
var j = i;
}
alert("Completed " + j + "iterations" );
}
function sayHello(){
alert("Hello sir...." );
}
</script>
</head>
<body>
<input type = "button" onclick = "bigLoop();" value = "Big Loop" />
<input type = "button" onclick = "sayHello();" value = "Say Hello" />
</body>
</html>
当您单击Big Loop按钮时，它将在Firefox中显示以下结果
什么是Workers？
可以使用Web Worker处理上述情况，Web Worker将执行所有计算量大的任务，而不会中断用户界面，并且通常在单独的线程上运行。
Web Workers允许长时间运行的脚本不会被响应单击或其他用户交互的脚本中断，并允许执行长任务而不会产生使页面保持响应的状态。
Web Workers是后台脚本，并且相对较重，不打算大量使用。 例如，为四百万像素图像的每个像素启动一个工作程序是不合适的。
在Web Worker中执行脚本时，它无法访问网页的窗口对象（window.document），这意味着Web Worker无法直接访问网页和DOM API。 尽管Web Workers不能阻止浏览器UI，但是他们仍然可以消耗CPU周期并降低系统响应速度。
Workers如何工作？
Web Workers使用JavaScript文件的URL初始化，其中包含该Worker将执行的代码。 此代码设置事件侦听器并与从主页派生事件的脚本进行通信。 以下是简单的语法
var worker = new Worker('bigLoop.js');
如果指定的javascript文件存在，浏览器将产生一个新的工作线程，该线程异步下载。 如果工作人员的路径返回404错误，则工作人员将静默失败。
如果您的应用程序具有多个支持的JavaScript文件，则可以将其导入importScripts()方法，该方法以文件名作为参数，并以逗号分隔，如下所示
importScripts("helper.js", "anotherHelper.js");
生成Web Worker后，将使用postMessage()方法完成Web Worker及其父页面之间的通信。 根据您的浏览器/版本，postMessage()可以接受字符串或JSON对象作为其单个参数。
使用主页上的onmessage事件访问由Web Worker传递的消息。 现在，让我们使用Web Worker编写bigLoop示例。 以下是主页（hello.htm），它将产生一个Web工作程序来执行循环并返回variablej的最终值
<!DOCTYPE HTML>
<html>
<head>
<title>Big for loop</title>
<script>
var worker = new Worker('bigLoop.js');
worker.onmessage = function (event) {
alert("Completed " + event.data + "iterations" );
};
function sayHello() {
alert("Hello sir...." );
}
</script>
</head>
<body>
<input type = "button" onclick = "sayHello();" value = "Say Hello"/>
</body>
</html>
以下是bigLoop.js文件的内容。 这利用了postMessage（）API将通信传递回主页
for (var i = 0; i <= 1000000000; i += 1) {
var j = i;
}
postMessage(j);
停止Web Workers
Web Workers不会自己停止，但是启动它们的页面可以通过调用Terminate()方法来停止它们。
worker.terminate();
终止的Web Worker将不再响应消息或执行任何其他计算。 您无法重新启动工作程序； 相反，您可以使用相同的URL创建一个新工作线程。
处理错误
下面显示了Web Worker JavaScript文件中的错误处理功能示例，该功能将错误记录到控制台。 使用错误处理代码，上面的示例将如下所示
<!DOCTYPE HTML>
<html>
<head>
<title>Big for loop</title>
<script>
var worker = new Worker('bigLoop.js');
worker.onmessage = function (event) {
alert("Completed " + event.data + "iterations" );
};
worker.onerror = function (event) {
console.log(event.message, event);
};
function sayHello() {
alert("Hello sir...." );
}
</script>
</head>
<body>
<input type = "button" onclick = "sayHello();" value = "Say Hello"/>
</body>
</html>
检查浏览器支持
以下是检测浏览器中可用的Web Worker功能支持的语法
<!DOCTYPE HTML>
<html>
<head>
<title>Big for loop</title>
<script src = "/js/modernizr-1.5.min.js"></script>
<script>
function myFunction() {
if (Modernizr.webworkers) {
alert("Congratulation!! you have web workers support." );
} else {
alert("Sorry!! you do not have web workers support." );
}
}
</script>
</head>
<body>
<button onclick = "myFunction()">Click me</button>
</body>
</html>