为了让后台程序更好的执行，在HTML5中设计了Web Worker技术。Web Worker的产生主要是考虑到在HTML4中JavaScript Web程序都是以单线程的方式执行的，一旦前面的脚本花费时间过长，后面的程序就会因长期得不到响应而使用户页面操作出现异常。
Web Worker实现的是线程技术，可以使运行在后台的JavaScript独立于其他脚本，从而不会影响页面的性能。
示例：
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <meta name="viewport" content="width=device-width, initial-scale=1.0"> 6 <meta http-equiv="X-UA-Compatible" content="ie=edge"> 7 <title>Document</title> 8 </head> 9 <body> 10 <div id="num"></div> 11 <button onclick="startWork()">开始</button> 12 <button onclick="stopWork()">停止</button> 13 <script> 14 var work; 15 16 function startWork() { 17 if(typeof(Worker)!=undefined) { 18 if(work==undefined) { 19 work = new Worker("script/01.js"); 20 work.onmessage = function(event) { 21 document.getElementById("num").innerHTML = event.data; 22 } 23 } 24 } 25 } 26 27 function stopWork() { 28 if(work!=undefined) { 29 work.terminate(); 30 } 31 } 32 </script> 33 </body> 34 </html>
上面的代码引入了一个脚本文script/01.js，代码如下：
1 var i=0; 2 3 function timeCount() { 4 i=i+1; 5 console.log(i); 6 postMessage(i); 7 setTimeout("timeCount()",1000); 8 } 9 10 timeCount();
这个示例实现了一个计数器的功能，点击开始按钮，开始计数，点击停止按钮，停止计数。
下面我来解释一下代码的流程：
网页第17行，检测浏览器是否支持Web Worker技术，主流的浏览器谷歌、火狐都支持，IE只有IE10，IE11，IE Edge支持，低版本的IE不支持
网页第19行，引入js脚本，创建一个Worker对象的实例，并执行js脚本
js脚本第6行，在执行脚本的时候，使用postMessage方法，传递给网页数据
网页第20行，在脚本使用postMessage方法传递数据后，onmessage回调函数会接收传递过来的数据，对该数据进行处理
网页第19行，如果需要停止Worker，使用work.terminate();可以停止正在执行的脚本
此内容由惯性聚合(RSS阅读器)自动聚合整理，仅供阅读参考。 原文来自 — 版权归原作者所有。