javascript是单线程语言
那么,你可能要问,javascript为什么是单线程,难道不能实现多线程吗?
这跟历史有关系。javascript从诞生的时候就是单线程,原因大概是不想让浏览器变得太复杂,因为多线程需要共享资源、且有可能会修改彼此的运行结果。试想,假如javascript是多线程的,在一个线程中为某个DOM节点添加了任务,在另一个线程中又将该节点删除了,这就比较尴尬了,最后应该依照哪个结果呢?
但是这并不意味着单线程就是阻塞,实现单线程非阻塞的方法就是事件循环。
同步任务和异步任务
在javascript中,我们将所有的任务大体上分为两类:同步任务和异步任务。
- 同步任务:立即执行的任务,同步任务一般会直接进入到主线程中执行
- 异步任务:异步执行的任务,比如
ajax
网络请求,setTimeout
定时函数等。
同步任务进入主线程,即主执行栈,异步任务进入任务队列,主线程中的任务执行完毕为空时,会去任务队列中读取对应的任务,推入主线程执行。上述过程的不断重复就是事件循环。
宏任务和微任务
上面我们认识到了同步任务和异步任务,知道先执行完主执行栈中的同步任务,然后再执行异步任务,那么问题来了,异步任务中哪个任务被率先推入主执行栈中呢?这就引出了我们的宏任务和微任务。
宏任务由宿主发起,而微任务由javascript自身发起。
什么是宿主?宿主就是js运行的环境。一般是浏览器或者Node.
宏任务
- script (可以理解为外层同步代码)
- setTimeout/setInterval
- UI rendering/UI事件
- postMessage、MessageChannel
- setImmediate、I/O(Node.js)
微任务
- Promise.then
- MutaionObserver
- Object.observer(已经废弃;Proxy对象替代)
- process.nextTick(Node.js)
微任务先执行,宏任务后执行。
async和await
async
是异步的意思,await
则可以理解为async wait
。所以可以理解async就是用来声明一个异步方法,而await是用来等待异步方法执行。
async
async
函数返回一个promise
对象,下面两种方法是等效的
function f() {
return Promise.resolve('TEST');
}
// asyncF is equivalent to f!
async function asyncF() {
return 'TEST';
}
await
正常情况下,await命令后面是一个Promise对象,返回该对象的结果。如果不是Promise对象,就直接返回对应的值。
async function f(){
// 等同于
// return 123
return await 123
}
f().then(v => console.log(v)) // 123
不管await后面跟的是什么,await都会阻塞后面的代码。
练习
async function async1() {
console.log('async1 start')
await async2()
console.log('async1 end')
}
async function async2() {
console.log('async2')
}
console.log('script start')
setTimeout(function () {
console.log('settimeout')
})
async1()
new Promise(function (resolve) {
console.log('promise1')
resolve()
}).then(function () {
console.log('promise2')
})
console.log('script end')
答案:script start
、async1 start
、async2
、promise1
、script end
、async1 end
、promise2
、settimeout
.
答案:
1.首先,console.log('script start')
直接执行。
2.遇到setTimeout
,推进宏任务。
3.执行async1()
,首先直接打印async1 start
,随后遇到await
,执行完async2()
,打印出async2
,会阻塞之后的代码执行,将之后的任务推入微任务,继续执行同步任务。
4.遇到Promise
,执行第一步,打印出promise1
,将then()
中的任务推入微任务,继续执行同步任务。
5.执行到script end
,同步任务结束。
6.查看异步任务队列中是否有微任务(注意是异步任务队列,遵循先进先出),依次执行async1 end
、promise2
。
7.微任务执行结束,继续执行宏任务,打印出settimeout
,结束。