美文网首页
Web Workers Part 2: 通信

Web Workers Part 2: 通信

作者: butterandfly | 来源:发表于2016-11-07 18:00 被阅读0次

这是Web Workers系列文章的第二部分,还没了解Web Workers的同学可以先查看Part 1

你可能会需要查阅这些接口:WorkerDedicatedWorkerGlobalScope

为什么需要域(线程)间的通信

上一篇文章里我们学会了创建一个Worker,并让js代码在一个独立的域(及线程)里运行;但你会发现:

  • js代码里不能使用window
  • js代码里不能使用document(其实就是window下的所有属性都不能找到)

这是因为你的js代码运行在一个叫DedicatedWorkerGlobalScope的作用域里,这与页面所处在的window域是隔离的,谁都不能查找到对方。
但这并不意味着两个域之间就不能传递信息,毕竟worker域归根到底也是为window域服务。

如何进行通信

如上面所说,window域与worker域是隔离的:

                                       
                     #         
    Window Scope     #     Dedicated Worker Global Scope
                     #

但存在一个中间者,无论是window域或worker域都能向这个中间者发送消息;这个中间者就是一开始在window域下面创建的Worker实例:

                    Worker
                   /       \
                 /           \
               /     #         \
    Window Scope     #     Dedicated Worker Global Scope
                     #

下面是两者分别向另一个域发送消息的代码:

window域 -> Worker域

// window域,index.html
// worker是之前new Worker创建的实例
worker.postMessage('Winter is coming.')
// worker域,worker.js
self.addEventListener('message', event => {
  // 处理消息
})

window域 <- Worker域

// worker域,worker.js
self.postMessage('Winter is coming.')
// windows域,index.html
// worker是之前new Worker创建的实例
worker.addEventListener('message', event => {
  // 处理消息
})

以上就是域间通信的方式。
通过这样,当在worker域里完成复杂任务后你就能告诉页面,让页面做对应处理;或当页面接受到某些指令时,让worker域里开始某些工作。
你现在已经懂得怎么创建独立线程,并让这个线程与页面线程通信;下一部分我们会再具体深入一下DedicatedWorkerGlobalScope这个接口。

相关文章

  • Web Workers Part 2: 通信

    这是Web Workers系列文章的第二部分,还没了解Web Workers的同学可以先查看Part 1 你可能会...

  • 初探 HTML5 Web Workers

    原文:初探 HTML5 Web Workers 一、Web Workers是什么 Web Worker为Web内容...

  • JavaScript是如何工作的:Web Workers的构建块

    摘要: 理解Web Workers。 原文:JavaScript是如何工作的:Web Workers的构建块 + ...

  • Web Workers Part 1:什么是Web Worker

    “Web Workers”在WHATWG里已经是LS,被大多数浏览器支持,详细可看caniuse。 在讲述Web ...

  • Web Workers

    12月20号发布的Safri浏览器内核webkit表示自己开始支持service workers,这就意味的主流浏...

  • Web Workers

    当浏览器切换到后台运行,操作系统会把浏览器挂起,挂起之后,比如定时器,在回到原来页面的时候,会出现获取秒有重复的问...

  • Web Workers

    什么是Web Worker? 我们都知道HTML页面在执行script的时候是unresponsive的,直到sc...

  • Web Workers

    1.JS单线程 说起Web Workers,首先必须了解因为JS运行在浏览器中,是单线程的,每个window一个J...

  • Web Workers

    web worker JavaScript是单线程的,遇到计算密集型或高延迟的任务时,会影响整个页面的运行。Web...

  • Web Workers

    Web Workers 分类及 5 个使用场景 how-javascript-works 作者:Troland链接...

网友评论

      本文标题:Web Workers Part 2: 通信

      本文链接:https://www.haomeiwen.com/subject/iqpouttx.html