Web Worker简单工作原理

JavaScript是单线程的。因此，持续时间较长的计算会阻塞UI线程，HTML5 Web Workers可以让Web应用程序具备后台处理能力。

Web Workers的限制：

    Web Workers不能访问window.document。即不能直接访问Web页面和DOM API。

用途：

1. 执行一些后台数据处理
2. 监听由后台服务器广播的新闻信息，收到后台服务器的消息后，将其显示在Web页面上。

用到的数据：

self对象： 指向全局worker对象

importScripts() 用来加载Worker所用到的外部JavaScript文件

close()方法 立即停止Worker运行

使用案例：解析一个很大的JSON字符串，假设数据量很大，至少需要500ms才能解析完成。很明显时间太长，超出了客户端允许JS运行的时间，因此会干扰用户体验。而此任务很难分解成若干个使用定时器的小任务，因此Worker成为最理想的解决方案。

页面JS脚本：

 1 //处理worker传过来的信息
 2 function messageHandler(e) {
 3     //在控制台输出数据
 4     console.log(e.data);
 5 }
 6 function errorHandler(e) {
 7     console.warn(e.message, e);
 8 }
 9 //终止worker运行
10 function stopWorker() {
11     worker.terminate();
12 }
13 function loadDome() {
14     //检查是否存在Woker对象
15     if(typeof Worker === 'undefined') {
16         document.getElementById('support').innerHTML = 'no support web worker';
17     }else {
18         worker = new Worker('worker.js');
19         worker.addEventListener('message', messageHandler, false);
20         worker.addEventListener('error', errorHandler, false);
21         
22         //为post按钮添加事件
23         document.getElementById('post').onclick = function() {
24             worker.postMessage('Here is a message for you');
25         }
26         document.getElementById('stop').onclick = stopWorker;
27     }
28 }
29 window.addEventListener('load', loadDome, false);
30 worker.js文件：
31 function messageHandler(e) {
32     postMessage("Worker say: "+e.data+" too");
33 }
34 addEventListener('message', messageHandler, false);

 

转载于:https://www.cnblogs.com/mackxu/archive/2012/12/21/2827981.html