前言
提示:以下是本篇文章正文内容,下面案例可供参考
一、常见的宏任务和微任务?
宏任务:setTimeout setInterval Dom事件, Ajax请求
微任务:Promise async/await
微任务>dom渲染>宏任务
结论:微任务执行时机比宏任务早
举例说明:
console.log(1)
setTimeout(()=>{
console.log(2)
},0)
Promise.resolve().then(()=>{
console.log(3)
})
console.log(4)
//它们的执行顺序为1 4 3 2
//同步的代码会先打印,异步的代码会后打印,
//promise是微任务先执行
二、异步与同步?
异步与同步的区别:
- 异步不会阻塞程序的执行
- 同步会阻塞程序的执行
异步使用的场景:
1.定时任务:setTimeout,setInverval
2.网络请求:ajax请求,动态img加载
3.事件绑定
//ajax请求代码示例
console.log('start')
$.get('./data1.json',function(data1){
console.log(data1)
})
console.log('end')
加载:
事件绑定:
也就是说,在请求的过程中,不能有空余时间,会产生异步的请求,回头再处理,
然后继续下面的请求
同步使用的场景:
console.log(1000)
alert(200)
console.log(3000)
js大部分都是同步
三、同步异步问题?
首先要知道javascript是单线程的语言,js任务需要排队按照顺序执行,如果一个任务消耗时间太长,后面的任务也等着,但是假如我们需要浏览新闻,但是新闻中包含了超清图片加载很慢,总不能等网页一直卡到图片完全出来,所以将任务分为两类:
同步任务
异步任务
如下是过程:
这个过程是同步和异步任务分别进入不同的执行“场所”,同步进入主线程,异步进入Event Table并注册函数。当指定的事情完成时,Event Table会将这个函数移入任务队列(Event Queue)。主线程内的任务执行完毕为空,就去任务队列(Event Queue)读取对应的函数,进入主线程执行。
上述过程会不断重复,也就是常说的Event Loop(事件循环)。
总结:
1)所有的同步任务都在主线程上执行,行成一个执行栈。
2)除了主线程之外,还存在一个任务列队,只要异步任务有了运行结果,就在任务列队中植入一个时间标记。
3)主线程完成所有任务(执行栈清空),就会读取任务列队,先执行微任务队列在执行宏任务队列。
4)重复上面三步。
只要主线程空了,就会读取任务列队,这就是js的运行机制,也被称为 event loop(事件循环)。
四、执行顺序?
1.主线程上宏任务、微任务执行顺序
console.log('---start---');//第一轮主线程
setTimeout(() => {
console.log('setTimeout'); // 将回调代码放入个宏任务队列,第二轮宏任务执行
}, 0);
new Promise((resolve, reject) => {
console.log('---Promise第一轮微任务同步执行---');//第一轮微任务同步执行
resolve()
}).then(()=>{
console.log('Promise.then实例成功回调执行'); // 将回调代码放入微任务队列,第一轮宏任务执行完后立即执行
});
console.log('---end---');//第一轮主线程结束
执行顺序:主线程 >> 主线程上创建的微任务 >> 主线程上创建的宏任务
2.宏任务中包含微任务
// 宏任务队列 1
setTimeout(() => {
// 宏任务队列 2.1
console.log('timer_1');
setTimeout(() => {
// 宏任务队列 3
console.log('timer_3')
}, 0)
new Promise(resolve => {
resolve()
console.log('new promise')
}).then(() => {
// 微任务队列 1
console.log('promise then')
})
}, 0)
setTimeout(() => {
// 宏任务队列 2.2
console.log('timer_2')
}, 0)
console.log('========== Sync queue ==========')
========== Sync queue ==========
1 timer_1
2 new promise
3 promise then
4 timer_2
5 timer_3
//请写出输出内容
async function async1() {
console.log('async1 start'); //2
await async2();
// await async2()会把后边的东西延后 (放到异步队列里面) 本身先执行 后面跟的是 转化为promise
console.log('async1 end'); //6
}
async function async2() {
console.log('async2'); //3
}
console.log('script start'); //1
setTimeout(function() {
console.log('setTimeout'); //8
}, 0)
async1();
new Promise(function(resolve) {
console.log('promise1'); //4
resolve();
}).then(function() {
console.log('promise2'); //7
});
console.log('script end'); //5
注意:
函数调用是同步
函数不调用不执行