web worker 多开子线程,且这些子线程无I/O权限,只能为主线程分担一些诸如计算的任务
不足
worker内代码不能操作DOM(更新UI)
只能加载服务器的js文件且不能跨域加载JS
不是所有浏览器都支持这个特性
API
1. 主线程
①创建新的Worker
var worker = new Worker(“worker.js”)
②传递参数
worker.postMessage()
③接收消息
worker.onMessage = function(msg){}
worker.onmessageerror = function(msg){}
④异常处理
worker.onerror = function(err){}
⑤结束worker
worker.terminate()
2.worker线程
self.name: Worker 的名字。该属性只读,由构造函数指定。
self.onmessage:指定message事件的监听函数。
self.onmessageerror:指定 messageerror 事件的监听函数。发送的数据无法序列化成字符串时,会触发这个事件。
self.close():关闭 Worker 线程。
self.postMessage():向产生这个 Worker 线程发送消息。
self.importScripts():加载 JS 脚本。
示例
index.html代码:
<!DOCTYPE html> <html> <body> <p>Count numbers: <output id="result"></output></p> <button onclick="startWorker()">Start Worker</button> <button onclick="stopWorker()">Stop Worker</button> <input type="text" value="" /> <script> var w; function startWorker() { if (typeof Worker !== 'undefined') { if (typeof w === 'undefined') { w = new Worker('demo_workers.js'); } w.onmessage = function (event) { document.getElementById('result').innerHTML = event.data; }; } else { document.getElementById('result').innerHTML = 'Sorry, your browser does not support Web Workers...'; } } function stopWorker() { w.terminate(); } </script> </body> </html>
demo_workers.js代码:
function timedCount () { for (var i = 0; i < 10000000000; i++) { if (i % 100000 === 0) { postMessage(i); } } } timedCount();
运行结果: