HTML5中的Web Worker技术

可乐必妥 發表於 2019-5-27 21:34:00

为了让后台程序更好的执行，在HTML5中设计了Web Worker技术。Web Worker的产生主要是考虑到在HTML4中JavaScript Web程序都是以单线程的方式执行的，一旦前面的脚本花费时间过长，后面的程序就会因长期得不到响应而使用户页面操作出现异常。
　　Web Worker实现的是线程技术，可以使运行在后台的JavaScript独立于其他脚本，从而不会影响页面的性能。
　　示例：
<div class="cnblogs_code">
<pre> 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></pre>
</div>
 
上面的代码引入了一个脚本文script/01.js，代码如下：
<div class="cnblogs_code">
<pre> 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();</pre>
</div>
 
这个示例实现了一个计数器的功能，点击开始按钮，开始计数，点击停止按钮，停止计数。
下面我来解释一下代码的流程：
网页第17行，检测浏览器是否支持Web Worker技术，主流的浏览器谷歌、火狐都支持，IE只有IE10，IE11，IE Edge支持，低版本的IE不支持
网页第19行，引入js脚本，创建一个Worker对象的实例，并执行js脚本
js脚本第6行，在执行脚本的时候，使用postMessage方法，传递给网页数据
网页第20行，在脚本使用postMessage方法传递数据后，onmessage回调函数会接收传递过来的数据，对该数据进行处理
网页第19行，如果需要停止Worker，使用work.terminate();可以停止正在执行的脚本 
来源：https://www.cnblogs.com/modou/p/10933469.html

頁: [1]

琼殿技术论坛's Archiver

HTML5中的Web Worker技术