一 JS的运行机制
JavaScript是一门单线程语言,单线程意味着在一个时间点内只能做一件事。
二 同步与异步的产生原因
因为JS是单线程的,同一时间只能做一件事,JS引擎就会有多余的时间,为了解决单线程所造成的这个问题,提出了同步和异步的执行模式。
2.1同步(阻塞)
同步执行模式就是JS会严格按照原本单线程逻辑,从上到下,从左到右的执行代码逻辑。
2.2异步(非阻塞)
在执行JS代码时先逐步执行同步代码,遇到异步代码先将异步代码放到任务队列中,直到同步代码执行完璧才执行异步代码。
小结:JS执行顺序按照单线程模式运行,同步先执行,异步后执行。所有的异步任务都要等待当前的同步任务执行完成后执行。
任务队列中将异步任务划分为宏任务和微任务。
三 JS中的宏任务与微任务
常见的宏任务与微任务
宏任务: setTimeout setInterval ajax Dom事件
微任务:promise.then/finally/catch async/await 隐式创建promise.then
事件循环主要是针对解决宏任务,一次事件循环只能处理一个宏任务,执行宏任务的时候会进行一次轮询,看有没有微任务,如果有微任务将会把微任务执行全部执行完毕,在执行宏任务。
小案例:
1:
// // 事件循环
setTimeout(function () { //setTimeout 宏任务
console.log('1');
});
async function test(){
console.log('5')
await async2();
// 隐式创建一个微任务 promise.then()
console.log('6')
}
new Promise(function (resolve) {
console.log('2');
resolve();
}).then(function () {
console.log('3');
}).finally(()=>{
console.log('8');
})
function async2(){
console.log('7');
}
test()
console.log('4');
//2 5 7 4 3 6 8 1
2:
async function async1() {
console.log(1);
const result = await async2();
// 隐式创建一个微任务 相当于promise.then()
console.log(3);
}
async function async2() {
console.log(2);
}
Promise.resolve().then(() => {
console.log(4);
});
setTimeout(() => {
console.log(5);
});
async1();
console.log(6);
// 1 2 6 4 3 5