何为同步
、异步
?
同步任务(synchronous)
- 同步任务指的是,在主线程上排队执行的任务,只有前一个任务执行完毕,才能执行后一个任务;
- 同步任务进栈顺序:先进后出,后进先出;(栈只有一端开口);
- 同步会阻塞程序的执行;
同步任务:页面的初始化、DOM 操作、计算任务;
大白话:同步就是我强依赖于你(对方),我必须等到你的回复,才能去做下一步的事情。
异步任务(asynchronous)
- 不进入主线程,而进入
任务队列
的任务,只有等主线程任务执行完毕,任务队列
开始通知主线程,请求执行任务,该任务才会进入主线程执行。 - 异步任务进任务队列顺序:先进先出,后进后出;(队列有两端开口);
- 异步不会阻塞程序的执行;
异步任务: 网络请求、定时器、事件处理、异步函数;
大白话:异步就是我并不强依赖于你,我对你是否回不回复我的信息并不在意,无论你回不回复我,我都会继续去做我的事情。
一、JavaScript是一门单线程语言
总所周知,JavaScript是一门单线程语言。单线程是指JavaScript引擎执行JavaScript时只分了一个线程给它执行,所以说执行JavaScript时是单线程的。
二、何为进程?何为线程?
进程:
进程是指在计算机系统中正在执行的一个程序实例。一个程序可以创建一个或多个进程(例如:打开一个浏览器,在浏览器上打开多个网页),每个进程都有自己的内存空间、执行状态和资源使用情况。进程是操作系统对程序的一次动态执行过程的抽象。
多进程示例:
- 浏览器是多进程
- 不同类型的标签页都会开启一个新的进程
- 相同类型的标签页是会合并到一个进程
线程:
线程是CPU调度的最小单位,是建立在进程的基础上运行的单位,共享进程的内存空间。(CPU是电脑的大脑,可以同时打开多个程序(也可以抽象地理解为软件),例如:QQ、微信,一个线程分配给QQ,一个给微信)
三、单线程意味着什么?
JavaScript 同时只能执行一个任务,其他任务都必须在后面排队等待。也就是说代码只能同步执行,必须执行上一行才能执行下一行。然而并不是还有异步
!
四、微任务与宏任务
微任务(microtask)
- 微任务会在当前任务执行完成后
立即执行
,在浏览器渲染之前执行。 - 微任务具有较高的优先级,在每个事件循环中会在宏任务执行之前执行。
微任务:Promise async/await 、Object.observe MutationObserver、 process.nextTick(Node.js 环境)。
宏任务(macrotask)
- 宏任务会在事件循环中执行,一般来自外部的事件,如
定时器
事件、UI交互
事件和网络请求
事件等。
宏任务:setTimeout、setInterval、Ajax、DOM事件 、script(整体代码) 、I/O、UI交互事件、setImmediate(Node.js 环境)。
总结
[ 宏任务、微任务 ]是指JavaScript中异步任务的两种不同任务的分类,宏任务类似于整体的异步任务,微任务则是宏任务中的一个子任务。
- 宏任务表示需要异步执行的任务
- 微任务表示宏任务执行后需要立即执行的子任务
如下图所示:微任务优先级 > 宏任务优先级
五、事件循环(Event Loop)又被称为事件轮询
JavaScript的异步编程通过执行栈和消息队列来实现。首先所有的同步任务都是在主线程上执行的,它会形成一个执行栈,异步任务不会在主线程上执行,当异步任务得到响应(如某个点击事件、服务加载完成、setTimeout等待时间截止)就会被推入消息队列中。当执行栈里面的任务执行完的时候(栈空),JS引擎就会去消息队列中读取任务,它会把这个任务中的回调函数压入执行栈中,然后执行栈就又开始新的同步任务执行。
这种执行栈空就去消息队列读取任务的过程时不断循环的,每次栈空都会去消息队列读取任务,如果没有任务就一直等待,知道有新的任务出现,这叫做事件循环(event Loop)。
六、练习题
// 第一题
console.log("开始");setTimeout(function() {console.log("定时器回调函数");
}, 0);console.log("结束");// 第二题
console.log("开始");setTimeout(function() {console.log("定时器回调函数");
}, 0);Promise.resolve().then(function() {console.log("微任务");
});console.log("结束");// 第三题
console.log("开始");setTimeout(function() {console.log("定时器回调函数");
}, 0);Promise.resolve().then(function() {console.log("微任务1");
}).then(function() {console.log("微任务2");
});console.log("结束");// 第四题
console.log("开始");setTimeout(function() {console.log("定时器回调函数");
}, 0);Promise.resolve().then(function() {console.log("微任务1");Promise.resolve().then(function() {console.log("微任务2");});
});console.log("结束");// 第五题
console.log("开始");setTimeout(function() {console.log("定时器回调函数1");Promise.resolve().then(function() {console.log("嵌套微任务1");});
}, 0);setTimeout(function() {console.log("定时器回调函数2");
}, 0);Promise.resolve().then(function() {console.log("微任务");
});console.log("结束");// 第六题
console.log('script start');setTimeout(function() {console.log('setTimeout');
}, 0);Promise.resolve().then(function() {console.log('promise1');
}).then(function() {console.log('promise2');
});console.log('script end');// 第七题
console.log('script start');setTimeout(function() {console.log('setTimeout1');
}, 0);Promise.resolve().then(function() {console.log('promise1');
}).then(function() {console.log('promise2');
});setTimeout(function() {console.log('setTimeout2');
}, 0);console.log('script end');// 第八题
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');
}, 0);async1();new Promise(function(resolve) {console.log('promise1');resolve();
}).then(function() {console.log('promise2');
});console.log('script end');