浅谈worker

作者 johansen 日期 2017-05-12
技术小记
浅谈worker

这周遇到一个关于监测统计的需求，看了一下后台同学写的代码，开了一个定时器在前端不断发ajax请求，但是前端滑屏交互复杂，事件会出现无法触发，为了解决这个问题主要是时间片段无法给到手势事件。这也是js单线程的问题所在。
解决方法就拜托给web worker – 一个让web应用程序具备多线程处理能力的特性。常用来处理前端UI线程会被阻塞（这意味着用户需要对着一个无法进行任何交互的页面抓狂，这是无法容忍的）。所以我们可以通过建立worker对象将复杂的计算交由服务端进行，相当于开辟了一个新的线程。通过worker的onmessage的通信完成后台与前端的交互。

下面的demo涉及两个文件，分别是demo.html、worker.js。代码很简单，但已经包含了webworker最重要的几个内容，细节在后面再展开：

  • 1.worker创建：new Worker(XX)
  • 2.消息发送：postMessage
  • 3.worker事件：消息接收(message)、出错处理(error)
  • 4.worker终止：terminate

demo.html里面的代码：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
var worker = new Worker('worker.js');
worker.onmessage = function(evt){
    alert('消息收到啦：'+ evt.data);
    worker.terminate();
};
worker.onerror = function(e){
    alert('demo出错了！出错原因是：' + e.message);
    worker.terminate();
};
worker.postMessage('这是webworker的demo！');

worker.js里面的代码：

1
2
3
4
5
onmessage = function(evt){
    postMessage(evt.data +'--worker.js里的附加信息');
};
  1. demo.html里创建一个worker W ， W 加载 worker.js ，并向其发送消息：这是’webworker的demo！’
  2. worker.js 收到 W 传给它的消息，并在该消息末尾加上’–worker.js里的附加信息’后，再回传给 W
  3. W 收到 worker.js 回传的消息，弹窗显示，然后把自己给终止掉.

worker的API

  1. worker创建
    var worker = new Worker('worker.js');
  2. possMessage(data)
    发送消息，data理论上可以为任意值，但保险起见最好还是传字符串。
  3. terminate()
    终止worker，此后无法再利用其进行消息传递等。需要注意：worker不会自行终止，一旦terminate，无法重新启用，只能另行创建。

worker的事件

  1. message
    一旦有消息发送，则会触发。消息的发送是双向的，消息的内容可通过data获取，如demo.html中，evt.data即为worker.js中传递过来的消息内容：

    1
    2
    3
    4
        worker.onmessage = function(evt){
        alert('消息收到啦：'+ evt.data);
        worker.terminate();
    };

  2. error
    出错处理，比如worker.js中出现语法错误、运行时错误之类的，就会触发，错误信息可通过e.message获得，如demo.html中

    1
    2
    3
    4
        worker.onerror = function(e){
        alert('demo出错了！出错原因是：' + e.message);
        worker.terminate();
    };

worker的this指向

在worker.js中的顶层对象不是window,下面的demo可以证明这一点：

1
2
3
4
alert('hello'); //额外添加的语句
this.onmessage = function(evt){
    postMessage(evt.data +'--worker.js里的附加信息');
};

由此可以知道在worker.js是无法访问到window.但是可以访问setInterval,setTimeout.
那真正的worker.js的全局上下文是什么？是一个workerGlobalScope的对象。他有如下属性

  • 1.self

    指向WorkerGlobalScope

  • 2.importScripts(xx[,xx,xx]);

    加载外部脚本文件

  • 3.close()
    关闭当前线程，与terminate作用类似。
  • 4.setTimeout/setInterval

这周项目很忙的我，第三方的设计稿改了4遍，导致我项目做了三遍，真是虐心，周五晚上上完线，写博客，对工作总结一下。赶紧回家聊妹子了。明天一定要睡到中午吃饭。大家周末愉快了。

FEATURED TAGS
技术小记