初始WebWorker

更新日期: 2019-07-09阅读: 2.3k标签: 线程

基本概念

JS单线程:我们都知道JavaScript它是一个单线程的语言,同一时间只能做一件事。比如:在浏览器中,某一时刻我们在操作dom,你们这个时刻我们就不能去运行JavaScript代码,反过来也是,当我们在运行JavaScript代码的时候,我们也不能去操作DOM,这个也就是JS的单线程。为什么要JS成单线程?因为在浏览器环境下,如果是多线程的,也就是操作DOM和运行JavaScript代码是并行处理的话,假如某个时刻,浏览器正在绘制DOM,但是这个时候的JavaScript代码改变了DOM,这样就会造成一个不一致,因此JS就被设计成了一门单线程语言。

虽然JS是单线程,但是它的宿主,我们的浏览器环境(node环境)它是一个多线程的,在浏览器和node里面只有一条JS线程,但是还有很多其他的线程。以浏览器为例,浏览器的常驻线程(如下)大概有前三个:第一个,UI线程,也就是DOM浏览器元素的回流和重绘,这个UI线程与JavaScript线程是互斥的。第二个就是JavaScript线程,单线程的运行JS代码。第三个是GUI线程,它主要是处理与用户交互的一些逻辑,比如点击某一个元素,拖动了或者缩放了这个就是由GUI线程处理的。除此之外还有NetWorker线程,网络线程,发送ajax请求,发送http请求都是走的network线程。还有File线程,读取文件。还有一个定时器线程。

UI线程 - 回流和重绘 - 与Javascript线程互斥
JavaScript线程 - 单线程运行JavaScript
GUI线程 - 交互线程
Network线程
File线程
定时器线程

这里可能会有一个问题是ajax请求对于JS来说是异步的,但是JavaScript是单线程的,这样就涉及到了一个基于事件的驱动。当我们发起一个网络请求时,浏览器会把这一部分网络请求交给network线程去处理,然后JavaScript线程等待network的指令驱动。在没有代码要运行的情况下,JavaScript线程始终是空闲的,有了事件驱动之后,它会一直处于一个轮询的状态(Event Loop),浏览器会不断查询目前是否有JavaScript线程需要运行,如果有就运行,没有就保持闲置。当一个网络请求发送出去,这个时候的JavaScript线程是处于闲置的,但是浏览器还是会不停的询问,当network线程结束后,浏览器发现有新的JavaScript代码需要执行,它就会驱动JavaScript的线程去处理网络请求返回的结果,这个就是JS 基于事件驱动的模型。

Event Loop(事件轮询图)


异步是将耗时比较长的任务放置到Event Queue 事件队列的尾部。


WebWorker

WebWorker为了解决浏览器假死这个问题而孕育而生的一项新技术。它是多线程模型,也是基于宿主。它属于JavaScript线程中的一个子线程,它完全受主线程控制,但是在WebWorker里面是不能操作DOM的。因为上面提到的UI线程和JavaScript线程是互斥的,这个互斥也就保证了DOM的唯一性,因此主的基调不能改变,但是需要有一个新的线程来分担繁杂的计算任务,这个也就是WebWorker。


浏览器的兼容性



应用场景

WebWorker是为了处理影响UI线程的JavaScript运算。因为在同一时刻,UI线程和JavaScript线程只能有一个在运行,如果这个时候JS的线程承担过多运算的话,它的耗时就变得很长,这个时候的UI线程是没有反应的,这样就造成了页面的假死

一旦新建就会始终运行,不会被主线程打断。即使主线程卡死了,WebWorker依然在运行。
同源限制,对于同一个WebWorker来讲,只有同源的网页才能够访问。
不能操作和访问DOM(window、document),因为要保证DOM 的唯一性。
不能使用包含交互的全局方法(alert、confirm),但是可以使用XMLHttpRequest、setTimeout、setInterval
不能读取本地文件(不止WebWorker不能读取,JavaScript主线程也不能读取),出于安全性的考虑,浏览器是不允许js读取本地文件的。
WebWorker分为两个:dedicated web worker(专用线程) ,只有一个网址一个页面可以使用这个线程和 shared web worker(共享线程),多个同源的网页可以共享一个WebWorker,这样为跨页面通信提供了一种可能。


基本用法

创建WebWorker

const webWorker = new Worker('main.js');


let result = 0;
const fibonacci = (n) => {
      if (n <= 1) return 1;
      return fibonacci(n - 1) + fibonacci(n - 2);
}

result = fibonacci(10);
console.log('result', result);

向WebWorker发送消息(数据)

webWorker.postMessage({ number : 10 });

WebWorker接收消息

webWorker.addEventListener('message', event => {
      console.log('received webworker data', event.data);
}, false);

WebWorker发送消息(返回数据)

this.postMessage(returnValue);

主线程接收WebWorker消息

webWorker.addEventListener('message', event => {
      console.log('received webworker data', event.data);
}, false);

关闭WebWorker

方式一:在主线程关闭WebWorker
webWorker.terminate();

方式二:在子线程,WebWorker内部自己调用自己的close方法,不再接收新的 Macrotask(宏任务)
this.close();

WebWorker调用脚本

importScripts('./one.js', './two.js');


WebWorker错误监听

webWorker.addEventListener('error', error => {
    console.error(error.filename, error.lineno, error.message);
});

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

链接: https://www.fly63.com/article/detial/4110

理解的线程、进程的关系与区别

进程就是一个应用程序在处理机上的一次执行过程,它是一个动态的概念,而线程是进程中的一部分,进程包含多个线程在运行。一简言之: 进程就是一个应用程序在处理机上的一次执行过程,它是一个动态的概念,而线程是进程中的一部分,进程包含多个线程在运行。

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

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

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

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

浏览器进程线程

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

JavaScript多线程编程

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

Node.js 多线程完全指南

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

JavaScript Event Loop和微任务、宏任务

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

如何理解JS的单线程?

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

理解JS执行顺序

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

WebWorker进阶

篇文章主要分享介绍了WebWorker特殊应用场景, 扩展了WebWorker的能力, 为跨页面通信提供了另外一种思路。在上一篇文章里面也有了解到webworker与主线程之间的通信,使用的是一个PostMessage

点击更多...

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