共计 3026 个字符,预计需要花费 8 分钟才能阅读完成。
转载自:http://lynnelv.github.io/js-e…
抛在后面的问题:
- 单线程如何做到异步
- 事件循环的过程是怎么的
macrotask
和microtask
是什么,它们有何区别
单线程和异步
提到 js,就会想到 单线程 , 异步,那么单线程是如何做到异步的呢?概念后行,先要理解下单线程和异步之间的关系。
js 的工作分为 同步 和 异步 两种,它们的解决形式也不同, 同步工作 是间接在主线程上排队执行,异步工作 则会被放到工作队列中,若有多个工作(异步工作)则要在工作队列中排队期待,工作队列相似一个缓冲区,工作下一步会被移到 调用栈(call stack),而后主线程执行调用栈的工作。
单线程是指 js 引擎中负责解析执行 js 代码的线程只有一个(主线程),即每次只能做一件事,而咱们晓得一个 ajax 申请,主线程在期待它响应的同时是会去做其它事的,浏览器先在事件表注册 ajax 的回调函数,响应回来后回调函数被增加到工作队列中期待执行,不会造成线程阻塞,所以说 js 解决 ajax 申请的形式是异步的。
总而言之,查看调用栈是否为空,以及确定把哪个 task 退出调用栈的这个过程就是 事件循环,而js 实现异步的外围就是事件循环。
调用栈和工作队列
顾名思义,调用栈是一个栈构造,函数调用会造成一个栈帧,帧中蕴含了以后执行函数的参数和局部变量等上下文信息,函数执行完后,它的执行上下文会从栈中弹出。
下图就是调用栈和工作队列的关系图
事件循环
对于事件循环,HTML 标准的介绍
There must be at least one event loop per user agent, and at most one event loop per unit of related similar-origin browsing contexts.
An event loop has one or more task queues.
Each task is defined as coming from a specific task source.
从标准了解,浏览器至多有一个事件循环,一个事件循环至多有一个工作队列(macrotask),每个外工作都有本人的分组,浏览器会为不同的工作组设置优先级。
macrotask & microtask
标准有提到两个概念,但没有具体介绍,查阅一些材料大略可总结如下:
macrotask:蕴含执行整体的 js 代码,事件回调,XHR 回调,定时器(setTimeout/setInterval/setImmediate),IO 操作,UI render
microtask:更新应用程序状态的工作,包含 promise 回调,MutationObserver,process.nextTick,Object.observe
其中 setImmediate
和process.nextTick
是 nodejs 的实现,在 nodejs 篇会具体介绍。
事件处理过程
对于 macrotask
和microtask
的了解,光这样看会有些艰涩难懂,联合事件循坏的机制了解清晰很多,上面这张图能够说是介绍得十分分明了。
总结起来,一次事件循环的步骤包含:
1. 查看 macrotask 队列是否为空,非空则到 2,为空则到 3
2. 执行 macrotask 中的一个工作
3. 持续查看 microtask 队列是否为空,若有则到 4,否则到 5
4. 取出 microtask 中的工作执行,执行实现返回到步骤 3
5. 执行视图更新
mactotask & microtask 的执行程序
crotask.png)
读完这么多水灵灵的概念介绍,还不如看一段代码感触下
console.log('start')
setTimeout(function() {console.log('setTimeout')
}, 0)
Promise.resolve().then(function() {console.log('promise1')
}).then(function() {console.log('promise2')
})
console.log('end')
打印台输入的 log 程序是什么?联合上述的步骤剖析,系不系 so easy~
首先,全局代码(main())压入调用栈执行,打印start
;
接下来 setTimeout 压入 macrotask 队列,promise.then 回调放入 microtask 队列,最初执行 console.log(‘end’),打印出end
;
至此,调用栈中的代码被执行实现,回顾 macrotask 的定义,咱们晓得全局代码属于 macrotask,macrotask 执行完,那接下来就是执行 microtask 队列的工作了,执行 promise 回调打印promise1
;
promise 回调函数默认返回 undefined,promise 状态变为 fullfill 触发接下来的 then 回调,持续压入 microtask 队列,event loop 会把以后的 microtask 队列始终执行完,此时执行第二个 promise.then 回调打印出promise2
;
这时 microtask 队列曾经为空,从下面的流程图能够晓得,接下来主线程会去做一些 UI 渲染工作(不肯定会做),而后开始下一轮 event loop,执行 setTimeout 的回调,打印出setTimeout
;
这个过程会一直反复,也就是所谓的 事件循环。
视图渲染的机会
回顾下面的事件循环示意图,update rendering(视图渲染)产生在本轮事件循环的 microtask 队列被执行完之后,也就是说执行工作的耗时会影响视图渲染的机会。通常浏览器以每秒 60 帧(60fps)的速率刷新页面,据说这个帧率最适宜人眼交互,大略 16.7ms 渲染一帧,所以如果要让用户感觉顺畅,单个 macrotask 及它相干的所有 microtask 最好能在 16.7ms 内实现。
但也不是每轮事件循环都会执行视图更新,浏览器有本人的优化策略,例如把几次的视图更新累积到一起重绘,重绘之前会告诉 requestAnimationFrame 执行回调函数,也就是说 requestAnimationFrame 回调的执行机会是在一次或屡次事件循环的 UI render 阶段。
以下代码能够验证
setTimeout(function() {console.log('timer1')}, 0)
requestAnimationFrame(function(){console.log('requestAnimationFrame')
})
setTimeout(function() {console.log('timer2')}, 0)
new Promise(function executor(resolve) {console.log('promise 1')
resolve()
console.log('promise 2')
}).then(function() {console.log('promise then')
})
console.log('end')
运行后果截图如下
能够看到,后果 1 中 requestAnimationFrame()
是在一次事件循环后执行,而在后果 2,它的执行则是在三次事件循环完结后。
总结
- 事件循环是 js 实现异步的外围
-
每轮事件循环分为 3 个步骤:
a) 执行 macrotask 队列的一个工作
b) 执行完以后 microtask 队列的所有工作
c) UI render - 浏览器只保障 requestAnimationFrame 的回调在重绘之前执行,没有确定的工夫,何时重绘由浏览器决定