JS中的同步异步编程-微任务-宏任务

浏览器是多线程的
1. GUI渲染线程
2. HTTP网络请求线程(并发数6~7)
3. 事件监听\定时器监听…

JS代码的运行是单线程的：浏览器只分配一个GUI渲染线程去执行我们的JS代码
1. 对于大部分JS代码来讲上面代码没有执行完，下面代码是不能执行的 “同步编程”
2. 但是对于某些JS代码来讲（事件绑定、定时器、Promise/async/await、Ajax等），我们需要在上面代码没有处理的情况下，GUI渲染线程能够继续向下执行 “异步编程”

console.time('AAA');
//...执行的代码
console.timeEnd('AAA');
//time/timeEnd可以记录一段程序执行的时间（时间受电脑性能和执行时候的环境状态的影响）“事后统计法“ 200ms-400ms

---

一、理解JS的同步和异步

题目一

 console.log(1);
setTimeout(() => {
 console.log(2);
}, 1000);
console.log(3);
setTimeout(() => {
    console.log(4);
}, 0);
console.log(5);
for (let i = 0; i < 99999999; i++) {
    // do soming
    if(i===99999998){
   		 console.log(6);
    }
}
console.log(7);

答案：13567 42

setTimeout(() => {
    console.log(1);
}, 20);
console.log(2);
setTimeout(() => {
    console.log(3);
}, 10);
console.log(4);
console.time('AA');
for (let i = 0; i < 90000000; i++) {
    // do soming
}
console.timeEnd('AA'); //=>AA: 79ms 左右
console.log(5);
setTimeout(() => {
    console.log(6);
}, 8);
console.log(7);
setTimeout(() => {
    console.log(8);
}, 15);
console.log(9);

答案：24579 3168
输出24579是同步的，3168是异步的

---

二、理解宏任务和微任务

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');

答案：
script start
async1 start
async2
promise1
script end
async1 end
promise2
setTimeout

---

三、理解JS中的有哪些队列

1、数据结构中的队列：队列和优先级队列
2、浏览器渲染队列（减少DOM的回流和重绘的=>只要遇到修改DOM的统一放到渲染队列中，直到遇到读取样式的，停止往队列里放，将渲染队列中的代码执行，重新渲染刷新页面，再遇到修改DOM的，按以上步骤执行）
3、同步异步编程：任务/事件队列
4、vue/react中关于修改状态的更新也是有队列结构的
【vue】
this.name=‘xxx’;
this.arr=[10,20];
…
和浏览器渲染队列类似，是等到所有的状态代码都处理好，统一让组件重新渲染一次