Web Worker

Web Workers可以让JS运行到后台,来解决JS线程可能会冻结页面的问题。我们可以将大量数据的处理交给worker来做,只将页面的渲染事情交给JS就好了。

基本现在有三种worker:Worker(Dedicated Worker),SharedWorker和Service Worker。

浏览器支持情况:

  • Worker:IE10+,Chrome,Safari5+等都是支持的,安卓4.4以上才支持。
  • SharedWorker:IE不支持,安卓不支持。
  • ServiceWorker:Chrome42以上才支持(实验中的)

使用Worker

var myWorker = new Worker('need.js');
myWorker.postMessage("");//这句话说是用来启动worker的,说是worker不接受到信息是不会触发的,但是Chrome好像只要new了就会执行..

传的数据都支持字符串,自Safari4之后都支持JSON格式。所以JSON也都是可以使用的。注意,这些数据的传输都是拷贝赋值的,而不是共享的执行环境。

相互之间都是通过postMessage和onmessage来通信的。

//主线程
var myWorker = new Worker('worker.js');
myWorker.onmessage = function (oEvent) {
    console.log(oEvent.data);
};
myWorker.postMessage("从主线程来的");
//worker.js内部
onmessage = function (oEvent) {
    console.log(oEvent.data);
};
postMessage('worker的数据1');
postMessage('worker的数据2');
postMessage('worker的数据3');

注意我们最好在主页面中监听下error事件,因为不监听的话,worker就会默默地失败了。

想要停止Worker的工作,只要在主页面简单的myWorker.termiate()就行了,执行流也没有问题。

worker自己也可以自杀,调用self.close()就可以了。但是在worker内部的正常顺序流调用好像有些问题(感觉这句话会被套上了默认的setTimeout),最好在onmessage里面再调用close,比较靠谱。

Worker全局作用域

Worker与主页面所执行的JS完全在不一样的作用域内,并不共用作用域。注意:Web Worker代码不能访问DOM,也无法任何方式影响页面的外观。特点如下:

  • 全局对象就是worker对象本身,就是说self和this都指向worker对象。
  • 最小化的navigator对象,有online,appName,appVersion,userAgent和platFrom属性
  • 只读的location
  • settimeout,setInterval,cleartimeout,clearinterval
  • XMLHttpRequest构造函数

所以,worker的运行环境与页面相比,功能是相当有限的。

worker引入其他的js

我们可以用下面的语句来引入其他的js(必须是同源策略),importScript('file1.js','file2.js');

这样子会按照file1,file2的顺序执行,并且会在两个都执行完了才会往下执行。而且系统默认处理好了回调的问题,同步方式写代码就可以了。

专用worker和共享worker

共享的资源是能够在各个页面之间共享的,但是还是得同源的。规范也没有定好呢..

而且worker能够访问的资源太少了,基本只能主页面传递,local的,session之类的,页面信息都不能访问的到。

共享worker

这个东西的支持程度很差,他与worker的不同之处在于他能够被同源的多个tab页面所访问到。如果所有的tab页被关闭,那这个worker才会被关闭。使用例子:

//main
if (!!window.SharedWorker) {
  var myWorker = new SharedWorker("worker.js");
  myWorker.port.onmessage = function(e) {
    console.log(e.data);
  }
}
//worker.js
var s=1;
onconnect = function(e) {
    s++;
  var  = e.ports[0];
    port.onmessage = function(e) {
      port.postMessage("");
    }
    port.postMessage(s);
}
//打开多个页面的时候s的值会被递增,也就是说,新建worker,就会触发connect。worker.js的内部变量是可以被各个tab访问到的。

mdn给的官方例子完全没能体现Sharedworker的共享的特性,差评。

service worker

这是个实验中的属性,chrome42以上才能够使用。基本就是测试中..

service worker可以处理fetch事件(拦截网络请求),开发者可以来做网络代理来做网络拦截,提供了离线的能力(没有页面也能执行)。

sw被更新的时候,会重新下载新的,然后install,然后等到页面上没有使用sw了,就会把老的卸掉,使用新的sw。

他还能够做后台推送的事情(我的理解为因为这个SW会至少24小时重新下载一次,然后在里面写上脚本,执行上面的更新操作后,触发推送)。

注意sw只能运行在https中,localhost也可以。

顺便给个github的传送门,喜欢的朋友star一下啊,自己平时遇到的问题以及一下学习的思考都会在上面记录~

参考:

http://www.html5rocks.com/zh/tutorials/workers/basics/

http://imweb.io/topic/559d13ec3d7bb8096b69cfcf

http://www.alloyteam.com/2016/01/9274/

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 206,839评论 6 482
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 88,543评论 2 382
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 153,116评论 0 344
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 55,371评论 1 279
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 64,384评论 5 374
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 49,111评论 1 285
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 38,416评论 3 400
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 37,053评论 0 259
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 43,558评论 1 300
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 36,007评论 2 325
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 38,117评论 1 334
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 33,756评论 4 324
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 39,324评论 3 307
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 30,315评论 0 19
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 31,539评论 1 262
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 45,578评论 2 355
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 42,877评论 2 345

推荐阅读更多精彩内容