HTML5 Web Workers

web Workers 为前端网页脚本提供了一种允许javascript创建多个线程，但子线程完全受主线程控制，且不得操作DOM的方法。正常情况下javascript是单线程。
 
三大特征
1、能长时间运行(响应)
2、启动性能及内存消耗也很理想
3、可以执行长时间运行而不被用户所中断的后台程序，去执行事务或逻辑，同时页面可及时响应
 
创建 worker 对象方法。
var worker = new Worker('url');

// url 为新线程中执行的脚本url

 

参数介绍
1、postMessage(data)
子线程和主线程之间互相通信的方法，传递的data为任意值。
// var worker = new Worker('url')
//worker.postMessage 主线程传递给子线程数据，对象
worker.postMessage({first:1,second:2});

//子线程使用 postMessage 为主线程传递字符串
postMessage('test');

 

2、terminate()
主线程中终止worker，此后无法再利用其进行相关信息传递。注意：一旦terminate后，无法重新启用，只能另外创建。
// var worker = new Worker('url');
worker.terminate();

 

3、message
获取信息。当有消息发送时，触发该事件。且，消息发送时双向的，消息内容可通过data来获取。
 
4、error
出错处理。错误消息可通过e.message来获取。
// var worker = new Worker('url');
worker.onerror = function(e){
     // 打印出错信息
     console.log(e.message);
     // 终端与子线程的联系
     worker.terminate();
}

 

完整案例代码
主页面
<!DOCTYPE html>
<head>
     <title> worker </title>
     <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
     <script>
     function init(){
          // 创建一个 worker 对象，并向它传递将在新线程中执行的脚本url
          var worker = new Worker('worker.js');
          // 接收 worker 传递过来的数据
          worker.onmessage = function(event){
               document.getElementById('result').innerHTML+=event.data+"<br />";
          };
     };
     </script>
</head>
<body onload="init()">
     <div id="result"></div>
</body>
</html>

worker.js内容

var i=0;
function timedCount(){
     for(var j=0,sum=0; j<100; j++){
          for(var i=0; i<100000000; i++){
               sum+=i;
          };
     };
     // 将得到的sum发送回主线程
     postMessage(sum);
};
// 将执行timedCount前的时间，通过postMessage发送回主线程
postMessage('Before computing, '+new Date());
timedCount();
// 结束timedCount后，将结束时间发回主线程
postMessage('After computing, '+new Date());

 

workerGlobalScope
正常页面的最顶层是window，但worker的引用文件，执行的全局上下文，最顶部的叫 WorkerGlobalScope，是无法访问window，及和window相关的DOM API，但可以与setTimeout,setInterval等协作。
workerGlobalScope属性及方法：
 
1、self
引用 WorkerGlobalScope 对象本身
 
2、location
location 属性返回当线程被创建出来的时候与之关联的WorkerLocation对象，它表示用于初始化这个工作线程的脚步资源的绝对URL，即使页面被多次重定向后，这个URL资源位置也不会改变。
 
3、close
关闭当前线程，与terminate作用类似
 
4、importScripts
通过importScripts()方法的url可以在worker中加载库函数
 
5、XMLHttpRequest
用来发送Ajax请求
 
6、setTimeout / setInterval 以及 addEventListener / postMessage
 
 
worker 优势及不足
 
优势
可以加载一个js进行大量，复制的计算，而不影响主进程，并通过 postMessage，onmessage 进行通信
可以在 worker 中通过 importScripts(url) 加载另外的脚本文件
可以使用 setTimeout(),clearTimeout(),setInterval(),clearInterval()
可以使用 XMLHttpRequest 来发送请求
可以访问 navigator 的部分属性
 
不足
不能跨域加载JS
worker内代码不能访问DOM
各个浏览器对Worker的实现不太一致，如FF里允许worker中创建新的worker，而Chrome中就不行
IE这个新特性
 
 
如果您发觉哪里写的不对，或理解不了，可留言。本人将在第一时间改正错误，及解释相关信息。
posted @ 2017-11-20 19:39  萧亮  阅读(111)  评论(0)    收藏  举报