web worker 是运行在后台的 JavaScript,独立于其他脚本,不会影响页面的性能。
需在后台执行的js任务: webworkers.js
var i = 0; function timeCount() { i = i+1; postMessage(i); //重要 ! 向 HTML页面传回数据 setTimeout("timeCount()", 1000); } timeCount();
HTML 页
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Document</title> </head> <body> <p>普通循环任务:<span id="timeout"></span></p> <p>多线程后台任务:<span id="workers"></span></p> <button onclick="c()">测试</button> </body> </html> <script> function c() { alert('test'); } //普通循环任务 var t = 0; function time() { setTimeout(function() { t++; document.getElementById('timeout').innerHTML = t; time(); }, 1000); } time(); //多线程后台任务 var w; function startWorker() { if (typeof(Worker) !== "undefined") { //是否为第一次启动该进程 if (typeof(w) == "undefined") { //创建 web workers 对象 w = new Worker("webworkers.js"); } //接收并显示数据 event 为指定关键字 w.onmessage = function(event) { document.getElementById("result").innerHTML = event.data; }; } else { document.getElementById("result").innerHTML = "抱歉,你的浏览器不支持 Web Workers..."; } } // 终止 workers 任务 function stopWorker() { w.terminate(); w = undefined; } </script>