TA

TA

web worker简易入门

js 是单线程的语言,由于此特性,我们在处理并发时需要用到一些技巧,如 setTimeout (),setInterval (),调用 XMLHttpRequest 等。
但这里的并发只是非阻塞(参照 John Resig 的文章How JavaScript Timers Work),真正的多线程编程则需要 HTML5 的 web worker。

###【worker 的使用】
web worker 的使用非常简单,线程之间通讯的 api 与 html5 postmessage 或 node.js 里面的 socket.io 方法类似。

通讯:

  1. 发送方:postMessage (data)
  2. 接收方:onmessage (event)

终止 web worker:

  1. 子线程: self.close ()
  2. 父线程: worker.terminate ()

按照目前 w3c 规范,web worker 分为两种:专用 worker (Dedicated Worker) 和共享 worker (Shared Worker)。

###【专用 worker】
实例化一个 web worker 对象,异步加载子线程文件 worker.js,其中的代码将执行。

给 worker 增加侦听

在 worker.js 里,发送消息给父线程

在父线程页面就能看到发送过来的信息了。

同时,在 web worker 标准中,是支持对象参数的,也就是说我们能够传递 json 数据。再看一个稍微复杂点的例子,父线程:

worker.js:

从上面的例子可以看到,一是利用对象参数,进程之间能够较灵活的实现控制;二是当 woker 执行 taskStart () 处理大量数据时,只在子进程处理,不会给主页面带来阻塞,通常,处理大量数据会消极影响程序的响应能力,而 web worker 通过这样的方式,能提供一个更流畅更实时的 UI。

###【共享 worker】
共享 worker 允许线程在同源中的多个页面间进行共享,例如:同源中所有页面或脚本可以与同一个共享线程通信。它的实例化与事件侦听的写法与专用 worker 略有不同,主页面:

shared-worker.js:

用两个窗口打开这个页面,第一个显示:Someone just said "Hello shared worker!" This is message number 1,第二个也收到一样的信息,
但是后面是message number 2

###【安全性和错误检查】
出于安全性的考虑,web worker 必须遵守同源策略。同时,它的全局对象是 worker 对象本身,this 和 self 引用的都是 worker 对象。
只能访问:

  1. navigator 对象(仅限 appName, appVersion, platform, userAgent)
  2. location 对象(只读)
  3. XMLHttpRequest
  4. setTimeout (), setInterval (), clearTimeout () 和 clearInterval () 方法

不能访问:

  1. DOM (不是线程安全的)
  2. window 对象
  3. document 对象
  4. parent 对象

worker 内部出现错误时,可以用 worker.onerror 侦听到,error 的事件有三个属性:

  1. filename: 发生错误的文件名
  2. lineno: 代码行号
  3. message: 完整的错误信息

如:

###【web worker 的其他尝试】
对于比较消耗时间的操作,我们可看到 web worker 能够发挥它的作用。比如:大量数据排序,精确到像素的 canvas 计算等。而我们又知道,jsonp 加载数据时,动态创建 script 标签,加载和执行这些过程都是阻塞式的,而 web worker 正好可以异步加载,这会是更快的方式吗?带着这个疑问我做了下面的试验,分别用 jsonp 和 worker 的方式去加载文件,计算数据返回时延:

第一次加载是一份 1k 大小的文件,每个方法重复 5 次,返回结果为:
1k 文件重复 5 次
第二次加载 1800k 大小的文件,返回结果为:
1800k 文件重复 5 次
可以看到对于较小的数据,jsonp 还是比 web worker 要快,这可能是实例化 worker 对象时带来的影响;而数据偏大时,web worker 的加载将会更优,而且它可以异步加载。

THE END.

Loading...
Ownership of this post data is guaranteed by blockchain and smart contracts to the creator alone.