HTML5之Worker用法


HTML5提供了Worker类用于多线程处理。Worker是在UI主线程中创建，后台执行的一段js脚本，它通过消息与UI线程传递数据。使用Worker就3步：

cheungmine 2011-11-29

第1步：创建一个Worker，需要指定一个js文件，作为Worker线程的执行体：

    var worker = new Worker("worker.js");

第2步：给Worker实例指定消息处理函数，只有2个：onmessage ，onerror
    worker.onmessage = function (event) {
        // update UI here
        var t1 = new Date().getTime();
        elemById("_time").value = t1 - t0;
        elemById("_piValue").value = event.data;
    };

    worker.onerror = function (event) {  
        alert(event.message);  
    };

第3步：给worker发消息：postMessage。

    elemById("_time").value = "-";
    t0 = new Date().getTime();
    worker.postMessage(parseInt(elemById("_num_rects").value));


下面以一个具体的例子来说明Worker的用法。这个例子是用数值积分的方法求pi=(3.1415926....）的。worker.js就是做这个工作。

  1. // worker.js   
  2. //   calculate pi using numerical integration   
  3. // 2011-11, cheungmine   
  4. self.onmessage = function (event) {  
  5.   // numerical integration to calc pi   
  6.   var num_rects = event.data;  
  7.   var width = 1.0/num_rects;  
  8.   var mid;  
  9.   var height;  
  10.   var sum = 0.0;  
  11.   var area;  
  12.   for (var i=0; i<num_rects; i++) {  
  13.     mid = (i+0.5) * width;  
  14.     height = 4.0/(1.0+mid*mid);  
  15.     sum += height;  
  16.   }  
  17.   area = width*sum; // area=pi   
  18.   
  19.   // post message back to UI thread   
  20.   self.postMessage(area);  
  21. };  
HTML5主页面js-test.html如下：
  1. <!doctype html>  
  2. <html lang="en">  
  3. <head>  
  4.   <meta charset="UTF-8">  
  5.   <title>js-test.html</title>  
  6.   <script type="text/javascript">  
  7.     function elemById(id) {  
  8.       return document.getElementById(id);  
  9.     }  
  10.   
  11.     function getBrowserAgent() {  
  12.       var browser = "$";  
  13.       if ((navigator.userAgent.indexOf('MSIE') >= 0) &&  
  14.           (navigator.userAgent.indexOf('Opera') < 0)){  
  15.         browser = "$IE";  
  16.       }  
  17.       else if (navigator.userAgent.indexOf('Firefox') >= 0){  
  18.         browser = "$FIREFOX";  
  19.       }  
  20.       else if (navigator.userAgent.indexOf('Opera') >= 0){  
  21.         browser = "$OPERA";  
  22.       }  
  23.       else if (navigator.userAgent.indexOf('Chrome') >= 0){  
  24.         browser = "$CHROME";  
  25.       }  
  26.       return browser;  
  27.     }  
  28.   
  29.     var browser = getBrowserAgent();  
  30.   
  31.     window.addEventListener('load',   
  32.       function () {  
  33.         if (browser=="$IE") {  
  34.           // MSIE  
  35.           if (window.confirm("IE does not support HTML5 currently.\n"+  
  36.               "please use lastest FireFox, Chrome or Opera!\n"+  
  37.               "if you havenot any of them installed,\n"+  
  38.               "please click OK to enter download page.")) {  
  39.             window.location.replace("selbrowser.html");  
  40.           }  
  41.           else {  
  42.             window.close();  
  43.           }  
  44.         }  
  45.         else if (browser=="$FIREFOX"||browser=="$CHROME") {  
  46.           // do stuff for FireFox and Chrome  
  47.         }  
  48.         else {  
  49.           // do stuff for others  
  50.         }  
  51.           
  52.         initPage();  
  53.       },  
  54.       false  
  55.     );  
  56.   
  57.     var dt = new Date();  
  58.     var t0 = 0;  
  59.   
  60.     function initPage () {  
  61.       // onclick  
  62.       elemById("_piWorker").addEventListener('click',  
  63.         function(){  
  64.           var worker = new Worker("worker.js");  
  65.           worker.onmessage = function (event) {  
  66.             // update UI here  
  67.             var t1 = new Date().getTime();  
  68.             elemById("_time").value = t1 - t0;  
  69.             elemById("_piValue").value = event.data;  
  70.           };  
  71.   
  72.           worker.onerror = function (event) {    
  73.             alert(event.message);    
  74.           };    
  75.   
  76.           elemById("_time").value = "-";  
  77.           t0 = new Date().getTime();  
  78.           worker.postMessage(parseInt(elemById("_num_rects").value));  
  79.         },  
  80.         false  
  81.       );  
  82.     }  
  83.   </script>  
  84. </head>  
  85. <body>  
  86.   <p>Press button "calc" to get pi</p>  
  87.   <p>  
  88.     <input type="input" size="10" id="_num_rects" value="100000000">  
  89.     <input type="button" id="_piWorker" value="calc">  
  90.     pi=<input type="input" size="30" id="_piValue" value="">  
  91.     time elapsed: <input type="input" size="10" id="_time" value="-">  
  92.   </p>  
  93. </body>  
  94. </html>  
  • 1
  • 2
  • 下一页

相关内容