Web Worker

Web Worker 让你在后台运行JS代码。

一般地,JavaScript和页面UI会共用一个线程,当JavaScript在运行的时候,页面是不响应用户的任何操作的。这个时候,这段代码就可以交给Web Worker来完成,不会影响页面交互。


Web Worker 无法访问DOM节点

Web Worker 无法访问window、document之类的浏览器全局变量

Web Worker 无法访问全局变量或全局函数

Web Worker 无法使用 alert(),confirm()等


1.常用API

(1)postMessage(data)

子线程与主线程之间互相通信使用方法,传递的data为任意值

//worker = new Worker('url');
//worker.postMessage传递给子线程数据,对象
worker.postMessage({first:1,second:2});
//子线程中也可以使用postMessage,如传递字符串
postMessage(‘test’);

(2)terminate()

线程中终止worker,此后无法再利用其进行消息传递。注意:一旦terminate后,无法重新启用,只能另外创建。

 function init(){                
      var worker = new Worker('worker.js');                
     //每隔100毫秒,向子线程传递{name: 'monkey'}信息                
      setInterval(function(){
           worker.postMessage({name: 'monkey'});
      },100);                
      //当主线程worker收到来自子线程的消息后,触发message事件  
      worker.onmessage = function(event){                                
            document.getElementById('result').innerHTML+=event.data+"<br/>" ;                   //主线程使用terminate方法中断与子线程来往,在浏览器中只能显示一次event.data                    worker.terminate();
         };
    };


3.Web Worker 上下文

onmessage()   //接收消息事件

onerror()     //错误消息事件

<!DOCTYPE html>
    <head>
        <title>worker</title>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
        <script>
            function init(){
                var worker = new Worker('worker.js');
                //接收消息事件
                worker.onmessage = function(event){
                    console.log(event.data);
                };
                //错误信息事件
                worker.onerror = function(e){
                    console.log('erro: ' + e.message);
                    //终止线程
                    worker.terminate();
                };
            };
        </script>
    </head>
    <body onload = "init()">
        
    </body>
</html>


我们可以做什么:

  1.可以加载一个JS进行大量的复杂计算而不挂起主进程,并通过postMessage,onmessage进行通信

  2.可以在worker中通过importScripts(url)加载另外的脚本文件

  3.可以使用 setTimeout(), clearTimeout(), setInterval(), and clearInterval()

  4.可以使用XMLHttpRequest来发送请求

  5.可以访问navigator的部分属性

局限性:

  1.不能跨域加载JS

  2.worker内代码不能访问DOM

  3.各个浏览器对Worker的实现不大一致,例如FF里允许worker中创建新的worker,而Chrome中就不行

  4.IE这个新特性


發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章