深入Javascript异步编程
一、 什么是同步编程、异步编程
- 传统的同步编程是一种请求响应模型,调用一个方法,等待其响应返回。
- 异步编程就是要重新考虑是否需要响应的问题,也就是缩小需要响应的地方。因为越快获得响应,就是越同步化,顺序化,事务化,性能差化。
1. 同步编程
任务「Task1,Task2,Task3」进入主线程排队,一个接一个按部就班顺序执行,如下图:
2. 异步编程
任务不进入主线程,进入「任务队列」,当主线程执行完毕后开始读取任务队列,如下图:
运行机制:
* 所有同步任务都在主线程上执行,形成一个执行栈 (execution context stack)
* 主线程之外,还存在一个"任务队列"(task queue)。当异步任务有了运行结果,就在"任务队列"之中放置一个事件。
* 一旦"执行栈"中的所有同步任务执行完毕,系统就会读取"任务队列",看看里面有哪些事件,对应的异步任务结束等待状态,进入执行栈,开始执行。
* 主线程不断重复上面的第三步。
3. 常见的异步任务
- setTimeout
- setInterval
- setImmediate
- Promise
- MutationObserver
- process.nextTick
- ……
二、 剖析异步编程
1. 看一个DEMO
setTimeout(() => {
console.log(1)
}, 0)
Promise.resolve().then(() => {
console.log(2)
})
Promise.resolve().then(() => {
console.log(3)
})
console.log(4)
运行后发现打印结果是:4 -> 2 -> 3 -> 1,带着疑问我们看下面的讲解……
2. Event loop事件
Javascript事件循环可以分为这样的一个过程:分别是
宏任务
->执行栈
->微任务
从上图中我们拆分理解:
- 一个事件循环(event loop)会有一个或多个任务队列(task queue)
- task queue 就是 macrotask queue
- 每一个 event loop 都有一个 microtask queue
- task queue == macrotask queue != microtask queue
- 一个任务 task 可以放入 macrotask queue 也可以放入 microtask queue 中
3. Microtasks 和 Macrotasks的分类
- macrotasks:
- setTimeout
- setInterval
- setImmediate
- I/O
- UI rendering
- microtasks:
- process.nextTick
- Promises
- Object.observe(废弃)
- MutationObserver
4. 运行差异
我们再来看一个比较有意思的例子
Promise.resolve().then(() => {
console.log('micro')
})
Promise.resolve().then(() => {
console.log('micro')
})
setTimeout(() => {
console.log('macro')
Promise.resolve().then(() => {
console.log('insert-micro')
})
}, 0)
setTimeout(() => {
console.log('macro')
}, 0)
console.log('start')
结果来看打印顺序分别是start -> micro -> micro -> macro -> insert-micro -> macro
在timer执行栈中会执行I/O,idle,prepare,再通过poll方式去看是否有micro事件去执行,check确认没有任务可以执行就会关闭callbacks……
简单来说:
事件循环的顺序,决定了JavaScript代码的执行顺序
,它从script(整体代码)开始第一次循环,之后全局上下文进入函数调用栈
,直到调用栈清空(只剩全局),然后执行所有的micro-task,当所有可执行的micro-task执行完毕之后,循环再次从macro-task开始
,找到其中一个任务队列执行完毕,然后再执行所有的micro-task,这样一直循环下去。
三、 异步编程的几种方式
1. 回调函数
const fn = callback => {
setTimeout(() => {
callback && callback(1)
}, 1000)
}
fn(n => {
console.log(n)
})
这种回调函数通过setTimeout
来执行callback,从而达到异步的效果
2. 事件监听
dom.on('done', () => {})
dom.on('done', () => {})
setTimeout(() => {
dom.trigger('done')
}, 1000)
这种通过给dom绑定监听’done’事件,同时借助setTimeout
来达到异步效果
3. 发布/订阅
下图是通过发布/订阅来实现异步操作
这里简单聊一下观察者模式和发布/订阅的异同点:
- 观察者模式由具体目标进行调度的
- 发布/订阅模式由统一由调度中心调度
- 观察者模式的订阅者与发布者之间是存在依赖的
- 发布/订阅模式不存在依赖
4. Promise
Promise是抽象异步处理对象以及对其进行各种操作的组件,它是基于并列 /并行处理设计的一种编程语言,Promise对象用于表示一个异步操作的最终状态(完成或失败),以及其返回的值。
我们从上图可看出Promise是一个接一个走下去的,该实现方式其实包括了队列/链式
其中队列的实现方式如下:
实现方式:
constructor:
handle:
next:
链式的实现方式如下:
constructor:
handle:
next:
5. Generator、Async/Await
Generator是一个状态机,它封装了多个内部状态,执行它将生成一个遍历器对象,而async函数是Generator函数的语法糖,await返回一个Promise对象,如果不是,会被转换成一个立即执行的Promise对象,await将等待当前行执行完成才会继续之后的内容。所以这里就举一个比较简单的例子了……
async function f() {
await Promise.reject('出错了')
.catch(e => console.log(e));
return await Promise.resolve('hello world');
}
f().then(v => console.log(v))
// 出错了
// hello world
四、 总结
到此为止,我们基本上剖析完整个Javascript的异步编程了,因为Javascript是单线程的(虽然现在有了woker,但就目前看来实用性并不强),因此异步编程对其尤为重要。拿nodejs来说,外壳是一层js语言,这是用户操作的层面,在这个层次上它是单线程运行的,所以我们会在很多场景下用到异步操作,虽然node底层运用了很多多线程的操作,但对于用户层是透明的,所以掌握好Javascript的异步编程对于我们coder来说还是很有必要的。