includeios / document

js玄学
27 stars 2 forks source link

Web Workers #2

Open includeios opened 6 years ago

includeios commented 6 years ago

Web Workers


12月20号发布的Safri浏览器内核webkit表示自己开始支持service workers,这就意味的主流浏览器(window下的chorme和Firefox,ios下的Safri,ie.....嗯,先不管他)都支持service workers,web app离线缓存页面将不是梦~ Service workers 其实是web workers中的一种类型,所以在学习使用service workers之前,我们先来看看web workers是啥,有哪些类型,都能干些什么吧

整体介绍:

Web Workers使script能够单独地运行在一个独立的线程中,这意味着我们可以将一些有复杂的逻辑计算的js放在其他线程下工作,而不去阻塞主线程(一般是ui渲染)的运行

概念和使用:

worker是通过构造函数【Worker(filterName.js) 】生出来的Object,这个js文件里写的代码会单独运行在一个新的执行环境(context)中而不是当前的window,这个工作环境其实是一个DedicatedWorkerGlobalScope对象,(对于dedicated类型的worker是他,对于shared类型的worker是SharedWorkerGlobalScope).

理论上在这个worker线程下你想干啥就干啥,但是还是有一些例外,比如,你没有办法在worker中直接操作dom,也没办法使用window对象一些默认的方法和属性,不过呢,window下还是有很多功能你可以直接使用的,像webSockets,一些存储工具indexedDB啊,还有一个火狐浏览器搞的Data Store啊~,具体请参考 Functions and classes available to workers

workers与主线程间通过messages渠道来传递数据,发送message的方法都是postMessage,接受数据都是通过监听onmessage事件,值得注意的是数据在传输时是通过复制的方法而不是共享~

有的时候,workers可能会生成新的workers....,只要这些构建这些workers的js文件在同一源下就可以了。worker 可以通过XMLHttpRequest来访问网络,只是4LHttpRequest4的responseXML和channel这两个属性将总是null。

workers类型

除了dedicated(专用)类型的workers,还有下面几种类型

简单示例链接

dedicatedWorkesr: github地址在线实例 SharedWorkers:github地址github地址,在线实例在线实例 ServiceWorkers:github地址在线实例

兼容性

image

源文章地址和参考资料: https://developer.mozilla.org/en-US/docs/Web/API/Web_Workers_API

http://web.jobbole.com/84792/