HTML5中的Web Worker技術

時間 2019-11-06

標籤 html5 html web worker 技術欄目 HTML5 简体版

原文原文鏈接

　　爲了讓後臺程序更好的執行，在HTML5中設計了Web Worker技術。Web Worker的產生主要是考慮到在HTML4中JavaScript Web程序都是以單線程的方式執行的，一旦前面的腳本花費時間過長，後面的程序就會因長期得不到響應而使用戶頁面操做出現異常。html

　　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，代碼以下：post

 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();