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();可以停止正在执行的脚本

标签：

相关文章