WebWorker进阶

时间: 2019-07-10阅读: 117标签: 线程

WebWorker与主线程之间的通信

这篇文章主要分享介绍了WebWorker特殊应用场景, 扩展了WebWorker的能力, 为跨页面通信提供了另外一种思路。在上一篇文章里面也有了解到webworker与主线程之间的通信,使用的是一个PostMessage。在上一篇文章中,有个例子是,从主线程到子线程传了一个json,从子线程到主线程传了一个number,由此可见,Webworker与主线程通信之间的通信内容可以是:字符串、对象、二进制或者是任何JavaScript可以表示存储的内容,只要这个内容可以用JavaScript的变量来表示,那么这个内容就可以被PostMessage传输,然后这个传输就是拷贝关系。也就是说在子线程里面到主线程会完全拷贝一份一模一样的,之后再送给需要接收消息的另一方,这就是一个拷贝关系,这个关系主要是为了防止传输过程中出现的意外造成数据的不完整,然后在JavaScript中,一些参数的传递都是一个浅拷贝,浅拷贝违背了子线程和主线程只能通过PostMessage传递消息的原则。所以WebWorker与主线程通信之间的通信关系都是拷贝关系。但是我们需要考虑的一点是,拷贝数据量过大时,拷贝起来是比较消耗性能的,因此WebWorker有一个转移的方式,转移起来只能使用二进制,转移之后当前线程无论是从主到子还是从子到主,转移之后的二进制数据就没有操作权了,接收方才有操作权。

webWorker.postMessage(arrayBuffer, \[arrayBuffer\]);



执行同页面的WebWorker

JavaScript代码要在WebWorker里面执行的代码需要放在同一个文件里。

未知的script 类型,代码不会执行

<script id="samePageWorker" type="unknow">
    addEventListener('message', () => {
        postMessage('send message!');
    }, false);
</script>

二进制读取并开启新的WebWorker

const blob = new Blob(\[document.getElementById('samePageWorker').text\]);
//把读取文件的内容放到内存中,之后再返回一个内存地址
const url = URL.createObjectURL(blob);
/\* 获取保存在内存中的文件地址 */
const webWorker = new Worker(url);
​
webWorker.postMessage(123);


WebWorker嵌套

//主进程起了一个main.js的WebWorker,向它发送了一个Hello
const webWorker = new Worker('./main.js');
window.webWorker = webWorker;
webWorker.postMessage('Hello');
​
//子进程main.js又起了一个worker然后向下面这个子进程发送了一个message:word
this.addEventListener('message', event => {
    console.log('received index.html data', event.data);
}, false);
const webWorker = new Worker('./index.js');
webWorker.postMessage('Word');
​
//在index.js也就是最里层的WebWorker加了一个消息监听事件,接收到了下面这个数组
this.addEventListener('message', event => {
    console.log('received main data', event.data);
}, false)};

Shared WebWorker(跨页面通信)

不能使用console

const shareWorker = new SharedWorker('./main.js');
window.shareWorker = shareWorker;
shareWorker.port.start();
shareWorker.port.postMessage(1);
shareWorker.port.onmessage = event => {    
	console.log(event.data);
}


const shareWorker = new SharedWorker('./main.js');
shareWorker.port.postMessage(1);
shareWorker.port.onmessage = event => {    
	console.log(event.data);
};
shareWorker.port.start();
let temp = 1;

this.onconnect = event => {
    const port = event.ports[0];
    port.start();

    port.onmessage = e => {
        temp = temp + e.data;
        port.postMessage(temp);
    }
}

来自:https://my.oschina.net/u/4144971/blog/3072070


链接: http://www.fly63.com/article/detial/4131

Web Workers 到底是什么?

以前我们总说,JS是单线程没有多线程,当JS在页面中运行长耗时同步任务的时候就会导致页面假死影响用户体验,从而需要设置把任务放在任务队列中;执行任务队列中的任务也并非多线程进行的,然而现在HTML5提供了我们前端开发这样的能力

深入理解 Web Workers

网站使用了复杂的物理效果和 SVG 滤镜。它在移动设备上的手感很好,所以需要很流畅地运行才能出效果。在同一个线程中运行物理效果和 SVG 滤镜开销太大了,所以我把物理效果部分移动到了 Web Worker 中来充分利用资源。

线程的来龙去脉,你了解吗?

用户级线程很快投入使用,Linux系统中的 pthread(POSIX thread)库可以说是大获成功,操作系统做出了一项重大决定——支持内核级线程。内核级线程解决了进程并行的问题,除此之外,由于内核看得到线程的存在

React Fiber

前段时间准备前端招聘事项,复习前端React相关知识;复习React16新的生命周期:弃用了componentWillMount、componentWillReceivePorps,componentWillUpdate三个生命周期

初始WebWorker

JS单线程:我们都知道JavaScript它是一个单线程的语言,同一时间只能做一件事。比如:在浏览器中,某一时刻我们在操作DOM,你们这个时刻我们就不能去运行JavaScript代码,反过来也是,当我们在运行JavaScript代码的时候

进程切换与线程切换的区别?

注意这个题目问的是进程切换与线程切换的区别,不是进程与线程的区别。当然这里的线程指的是同一个进程中的线程。这个问题能很好的考察面试者对进程和线程的理解深度,有比较高的区分度。

理解JS执行顺序

众所周知,JS的执行顺序是自上而下的。 严格意义上来说,javascript没有多线程的概念,所有的程序都是单线程依次执行的。 就是代码在执行过程中,另一段代码想要执行就必须等当前代码执行完成后才可以进行。

如何理解JS的单线程?

JS本质是单线程的。也就是说,它并不能像JAVA语言那样,两个线程并发执行。 但我们平时看到的JS,分明是可以同时运作很多任务的,这又是怎么回事呢?

JavaScript Event Loop和微任务、宏任务

JavaScript的一大特点就是单线程, 同一时间只能做一件事情,主要和它的用途有关, JavaScript主要是控制和用户的交互以及操作DOM。注定它是单线程。 假如是多个线程, 一个移除DOM节点,一个新增DOM节点,浏览器以谁的为准呢?

Node.js 多线程完全指南

很多人都想知道单线程的 Node.js 怎么能与多线程后端竞争。考虑到其所谓的单线程特性,许多大公司选择 Node 作为其后端似乎违反直觉。要想知道原因,必须理解其单线程的真正含义。

fly63.com版权所有,内容以共享、参考、研究为目的,不存在任何商业目的。其版权属原作者所有,如有侵权,请与小编联系!情况属实本人将予以删除!

广告赞助文章投稿关于web前端网站点搜索站长推荐网站地图站长QQ:522607023

小程序专栏: 土味情话心理测试脑筋急转弯幽默笑话段子句子语录成语大全