HTML5中的Web Worker技术

时间:2023-01-31 19:37:06

  为了让后台程序更好的执行,在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();可以停止正在执行的脚本