- 先看一道题
// js是单线程的,如果遇到了异步的内容,交给浏览器处理(等待,监听)
console.log(1);
setTimeout(() => {
console.log(2);
}, 0);
console.log(3);
// 输入答案顺序 1>>3>>2
如下图
- js执行主线程,代码一步一步往下执行,js是单线程的,只要遇到异步的函数,不会停留,会将异步函数交给 浏览器处理
- 浏览器是多线程的,可以同时处理多件事件的,让浏览器去等,去监听.处理异步函数
- 浏览器将异步完成的任务,满足条件的,安置到任务队列中排队
- 主线程的完成了空闲了,才会开始处理执行任务队列中的任务
宏任务: 主线程代码,setTimeout,上一个宏任务执行完,才会考虑执行下一个宏任务
微任务: promise.then .catch async/await的内容,属于微任务,满足条件的微任务,会在当前宏任务的最后,下一个宏任务前执行
执行流程图
1.先执行主线程的宏任务. 2.同等级任务队列中若有微任务先执行微任务, 3. DOM页面渲染 4.执行下一个宏任务
第二题
console.log(1);
setTimeout(() => {
console.log(2);
}, 0);
const p = new Promise((resolve, reject) => {
console.log('哈哈');
resolve(1000)
})
p.then((res) => {
console.log(res);
})
console.log(3);
// 答案顺序 1 >> 哈哈 >> 3 >> 1000 >> 2