WebWorker进阶

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

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


初始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 作为其后端似乎违反直觉。要想知道原因,必须理解其单线程的真正含义。

JavaScript多线程编程

浏览器端JavaScript是以单线程的方式执行的,也就是说JavaScript和UI渲染占用同一个主线程,那就意味着,如果JavaScript进行高负载的数据处理,UI渲染就很有可能被阻断,浏览器就会出现卡顿,降低了用户体验。

浏览器进程线程

进程是正在运行的程序的实例;线程(英语:thread)是操作系统能够进行运算调度的最小单位。可以打开任务管理器,可以看到有一个后台进程列表。这里就是查看进程的地方,而且可以看到每个进程的内存资源信息以及cpu占有率。

聊聊 JavaScript 与浏览器的那些事 - 引擎与线程

对 JavaScript 解释器和浏览器的线程机制理解的不是特别透彻,很容易混淆浏览器多线程机制并错误认为由于 Web Worker 的设计使得 JavaScript 拥有了多线程的能力。事后搜了不少资料进行学习,整理成此文,主要介绍浏览器的各个引擎、线程间的工作机制以及 JavaScript 单线程的一些事。

javascript中的伪线程,使用setTimeout模拟一个多线程

浏览器的内核是多线程的,一个浏览器一般至少实现三个常驻线程:javascript引擎线程,GUI渲染线程,浏览器事件触发线程。当我们要循环过百万级的数据甚至亿的时候怎么办?那就用setTimeout模拟一个多线程。

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

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

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