JS脚本运行和UI交互不能同时进行,有时候在脚本运行时间较长的情况下,浏览器会出现假死状态,严重影响了用户交互的体验。Web Workers的出现一定程度上解决了此问题。每个Worker都有自己完全独立的全局运行环境,并且不占用浏览器UI线程的时间。因此,可以把一些计算量大的数据处理任务交给Web Workers处理而不影响用户交互(一般,认为浏览器端脚本运行时间超过100ms即会影响用户体验。此时可以考虑使用定时器将任务分解执行或者考虑Web Workers)。
由于Web Workers并没有在浏览器UI线程队列中,因此无法使用浏览器端的一些资源。了解更多关于Web Workers可以使用的函数、APIs等可以查看此处。
前边提到,每个Worker都有独立的全局运行环境。一般这些环境包括:
- navigator对象:可以使用的属性有四个appName、appVersion、userAgent、platform;
- location对象:所有属性只读;
- self对象:与浏览器端的window类似,指向全局的worker对象;
- postMessage():function,用于worker和主线程间的通信;
- importScripts():function,Worker全局作用域中的一个方法,用于向worker以同步方式导入一个或多个外部脚本;
- 定时器相关的方法:setTimeout()、clearTimeotu()、serInterval()、clearInterval();
- close():function,用于在Worker线程中立即终止Worker,在主线程中可以使用myWorker.terminate()。
- 多数API:console API、FileReader、FileReaderSync、ImageData、WebSocket、WebGL、XMLHttpRequest等;
Worker与主线程的网页脚本通过postMessage()和onmessage事件句柄关联起来。postMessage()用于传递数据,而onmessage进行监听并对接收到的数据进行处理。首先由主线程使用postMessage()向Worker发送需要处理的数据,Worker中的onmessage事件句柄被触发并执行,然后Worker线程使用postMessage()进行回传同时触发主线程的onmessage事件句柄。简单示例如下:
//main.js
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Worker Test</title>
<script>
var worker = new Worker("worker.js");
worker.onmessage = function (evet) {
console.log(event.data);
};
worker.postMessage("Hello, I'm the tmp.js");
</script>
</head>
<body>
<p>Hello World</p>
</body>
</html>
//worker.js
importScripts("tmp.js"); //调用外部脚本供worker使用
var answer_worker = function (e) {
var response = "I received your message: ";
var result = strCat(response, e.data);
postMessage(result);
}
onmessage = answer_worker;
//tmp.js
function strCat(str1, str2) {
return str1 + str2;
}
运行结果如下: