js "多线程" 与 异步调用 EventLoop 机制
JavaScript语言的一大特点就是单线程,也就是说,同一个时间只能做一件事。那么,为什么JavaScript不能有多个线程呢?这样能提高效率啊。
当然也并不是多线程就是好的, 多线程虽然可以共享全局变量, 但是很容易造成问题, 因此需要原子锁, 互斥锁等保证一个变量不能被多个线程同时访问, js引擎是单线程运行的可能跟他的设计初衷也是有关的, 他并不需要那么多线程, 浏览器内核是多线程,至少包括三个常驻线程: JavaScript引擎线程 , GUI渲染线程, 浏览器事件触发线程
JavaScript引擎是基于事件驱动单线程执行的,JavaScript引擎一直等待着任务队列中任务的到来,然后加以处理,浏览器无论什么时候都只有一个JavaScript线程在运行JavaScript程序。
GUI渲染线程负责渲染浏览器界面,当界面需要重绘(Repaint)或由于某种操作引发回流(Reflow)时,该线程就会执行。但需要注意,GUI渲染线程与JavaScript引擎是互斥的,当JavaScript引擎执行时GUI线程会被挂起,GUI更新会被保存在一个队列中等到JavaScript引擎空闲时立即被执行。
事件触发线程,当一个事件被触发时该线程会把事件添加到待处理队列的队尾,等待JavaScript引擎的处理。这些事件可来自JavaScript引擎当前执行的代码块如setTimeout、也可来自浏览器内核的其他线程如鼠标点击、Ajax异步请求等,但由于JavaScript的单线程关系所有这些事件都得排队等待JavaScript引擎处理(当线程中没有执行任何同步代码的前提下才会执行异步代码)。
作为浏览器脚本语言,JavaScript的主要用途是与用户互动,以及操作DOM。这决定了它只能是单线程,否则会带来很复杂的同步问题。比如,假定JavaScript同时有两个线程,一个线程在某个DOM节点上添加内容,另一个线程删除了这个节点,这时浏览器应该以哪个线程为准?为了利用多核CPU的计算能力,HTML5提出Web Worker标准,允许JavaScript脚本创建多个线程,但是子线程完全受主线程控制,且不得操作DOM。所以,这个新标准并没有改变JavaScript单线程的本质, 所以很多人说这是伪多线程
setTimeout(function(){
console.log(0);
},0)
console.log(1);
// 1
// 0
打印结果先打印1, 先执行了console.log(), 然后才执行 setTimeout()函数, 所以 setTimeout 是一个很有代表性的异步函数 当然还有 setInterval 以及典型的 ajax
大家都知道 js是单线程语言, 单线程就是代码一段一段执行, 按顺序执行,比如:
for(var i=0;i<100000;i++){
}
alert('hello world!!!');
这段代码的意思是执行100...次后再执行alert,这样带来的问题是,严重堵塞了后面代码的执行,至于为什么,主要是因为JS是单线程的
那么什么是异步? js单线程是怎么实现异步的?
异步, 举个例子来说, 就好像你出去吃饭, 提前预定了, 但是由于人比较多, 没有位置了, 那么这个时候你可以出去逛个街啥的, 等人少的时候, 店家会通知你过去,你再过去吃饭就好了
比如 ajax 当 js单线程执行完 XMLHttpRequest.send() 之后,为了及时的得到响应内容, 在单线程中注册相应的事件就好, XMLHttpRequst.onReadyStateChange=fn(), 注册之后浏览器会在内部的其他线程监听事件, 直到事件被触发, 浏览器会在任务队列添加一个任务等待该单线程执行.
>>>任务队列
单线程就意味着所有的任务都要排队来执行,那么如果有耗时操作,那么后面的任务就很难得到执行, 为了解决这个问题, 所有就有了同步任务和异步任务, 同步任务是处在主线程上的任务,排队执行, 异步任务不进入主线程, 是在任务队列中的任务, 异步任务都必须要有回调函数,只有任务队列通知主线程, 某个异步任务可以执行了, 异步任务才会进入主线程被执行
执行顺序如下:
(1)所有同步任务都在主线程上执行,形成一个执行栈(execution context stack)。只有同步任务执行完才会去执行任务队列中的任务.
(2)主线程之外,还存在一个"任务队列"(task queue)。只要异步任务有了运行结果,就在"任务队列"之中放置一个事件。
(3)一旦"执行栈"中的所有同步任务执行完毕,系统就会读取"任务队列",看看里面有哪些事件。那些对应的异步任务,于是结束等待状态,进入执行栈,开始执行。
(4)主线程不断重复上面的第三步
一个js程序的单线程用来执行栈中的同步任务,当所有同步任务执行完毕后,栈被清空,然后读取任务队列中的一个待处理任务,并把相关回调函数压入栈中,单线程开始执行新的同步任务,执行完毕。
单线程从任务队列中读取任务是不断循环的,每次栈被清空后,都会在任务队列中读取新的任务,如果没有新的任务,就会等待,直到有新的任务,这就叫任务循环。因为每个任务都由一个事件所触发,所以也叫 EventLoop, setTimeout()函数就是一个异步任务, 被立刻添加到任务队列,等待执行, 等到同步任务执行完成之后, 才执行任务队列中的任务, 所以即使0秒 也是在 console.log()后面执行
>>>>回调函数事件
每个异步任务都要对应一个回调函数, 回调函数就是那些被主线程挂起的代码, 当异步任务开始执行的时候, 就是开始执行回调函数的时候
"任务队列"中的事件,除了IO设备的事件以外,还包括一些用户产生的事件(比如鼠标点击、页面滚动等等)。只要指定过回调函数,这些事件发生时就会进入"任务队列",等待主线程读取。
"任务队列"是一个先进先出的数据结构,排在前面的事件,优先被主线程读取。主线程的读取过程基本上是自动的,只要执行栈一清空,"任务队列"上第一位的事件就自动进入主线程。但是,由于存在后文提到的"定时器"功能,主线程首先要检查一下执行时间,某些事件只有到了规定的时间,才能返回主线程。
>>>> EventLoop
iOS 中有 runloop,也是一个事件循环机制, 可以让线程不断的循环运行, 取出队列中的任务处理, 没有任务的时候就让线程休眠,节省 CPU 资源, 还能提高效率, 和 eventloop有点相像, EventLoop是一个程序结构, 用于等待和发送消息事件, 这也是 JavaScript 可以单线程执行异步任务的机制, 简单说,就是在程序中设置两个线程:一个负责程序本身的运行,称为"主线程";另一个负责主线程与其他进程(主要是各种I/O操作)的通信,被称为"Event Loop线程"(可以译为"消息线程")。
比如读取文件, 网络请求, 每当遇到I/O的时候,主线程就让Event Loop线程去通知相应的I/O程序,然后接着往后运行,所以不存在等待时间。等到I/O程序完成操作,Event Loop线程再把结果返回主线程, 这时就是函数回调的时候, 主线程就调用事先设定的回调函数,完成整个任务。
>>>>node.js 的运行机制
node.js 支持多线程
(1)V8引擎解析JavaScript脚本。
(2)解析后的代码,调用Node API。
(3)libuv库负责Node API的执行。它将不同的任务分配给不同的线程,形成一个Event Loop(事件循环),以异步的方式将任务的执行结果返回给V8引擎。
(4)V8引擎再将结果返回给用户。
node
process.nextTick方法可以在当前"执行栈"的尾部----下一次Event Loop(主线程读取"任务队列")之前----触发回调函数。也就是说,它指定的任务总是发生在所有异步任务之前。setImmediate方法则是在当前"任务队列"的尾部添加事件,也就是说,它指定的任务总是在下一次Event Loop时执行,这与setTimeout(fn, 0)很像
process.nextTick(function A() { console.log(1); process.nextTick(function B(){console.log(2);}); }); setTimeout(function timeout() { console.log('TIMEOUT FIRED'); }, 0) // 1 // 2 // TIMEOUT FIRED
由于process.nextTick方法指定的回调函数,总是在当前"执行栈"的尾部触发,所以不仅函数A比setTimeout指定的回调函数timeout先执行,而且函数B也比timeout先执行。这说明,如果有多个process.nextTick语句(不管它们是否嵌套),将全部在当前"执行栈"执行
setImmediate(function A() {
console.log(1);
setImmediate(function B(){console.log(2);});
});
setTimeout(function timeout() {
console.log('TIMEOUT FIRED');
}, 0);
setImmediate与setTimeout(fn,0)各自添加了一个回调函数A和timeout,都是在下一次Event Loop触发。那么,哪个回调函数先执行呢?答案是不确定。运行结果可能是1--TIMEOUT FIRED--2,也可能是TIMEOUT FIRED--1--2。
令人困惑的是,Node.js文档中称,setImmediate指定的回调函数,总是排在setTimeout前面。实际上,这种情况只发生在递归调用的时候。process.nextTick和setImmediate的一个重要区别:多个process.nextTick语句总是在当前"执行栈"一次执行完,多个setImmediate可能则需要多次loop才能执行完。事实上,这正是Node.js 10.0版添加setImmediate方法的原因,否则像下面这样的递归调用process.nextTick,将会没完没了,主线程根本不会去读取"事件队列"!
1
2
3
4
5
6
7
8
|
setTimeout(function() {
console.log("a")
}, 0)
for(let i=0; i<10000; i++) {}
console.log("b")
// 结果:b a
|
打印结果表明回调函数并没有立刻执行,而是等待栈中的任务执行完毕后才执行的。栈中的任务执行多久,它就得等多久。
JavaScript单线程和其异步机制就如上所述。所谓的单线程并不孤单,它的背后有浏览器的其他线程为其服务,其异步也得靠其他线程来监听事件的响应,并将回调函数推入到任务队列等待执行。单线程所做的就是执行栈中的同步任务,执行完毕后,再从任务队列中取出一个事件(没有事件的话,就等待事件),然后开始执行栈中相关的同步任务,不断的这样循环
>>>几种 js异步函数实现方式
![](https://images2018.cnblogs.com/blog/1013553/201803/1013553-20180307111048474-343088449.png)
promise 方式 比较常用的 .then()可以链式调用 但是还是不够清晰明了
async await 这是 es7的异步解决方案 , 主要还是 await 一个 promise, 只是调用起来更加清晰直观, 看起来就像同步函数一样
像上面这个 await 异步函数 , 打印结果为 2秒后打印 world, 再隔1 秒后打印 hello , 最后打印 helloword