关于js执行顺序的总结

背景：最近在做管理项目的时候，由于页面业务比较多，调用方法比较多。就经常出现同步异步的问题，在方法中套用方法，数据的各种渲染等问题接踵而至，遇到多了，感觉需要总结一下。
参考资料：https://www.jianshu.com/p/62c7d633a879添加链接描述
https://www.jianshu.com/p/ca480f9e7dea

通过阅读大神们的文章大概知道了部分理论，然后就是看题各种实践。

总结如下：

js是单线程，始终是等到一个方法执行完后再执行下一个方法。

那么这个执行顺序就相当的重要了。

1、js执行中方法自上而下依次执行
2、先执行执行栈中的方法，依次执行
3、遇到异步问题放入到任务列中
任务列----》 （微队列和宏队列）
微队列 -----》微任务==={
微队列，microtask，也叫jobs。
异步任务的回调会依次进入micro task queue，等待后续被调用，
这些异步任务包括：
process.nextTick (Node独有)
Promise
Object.observe
MutationObserver
}
宏队列------》宏任务==={
宏队列，macrotask，也叫tasks。
异步任务的回调会依次进入macro task queue，等待后续被调用，
这些异步任务包括：
setTimeout
setInterval
setImmediate (Node独有)
requestAnimationFrame (浏览器独有)
I/O
UI rendering (浏览器独有)
}
在相同执行层级的微任务和宏任务中，微任务先执行，然后宏任务再执行；

4、执行栈中的方法执行完成过后再执行任务列中的方法。
5、如此循环往复称为事件循环

注意事项：
1、promise 异步体现在then，catch中，写在promise中的代码被当作同步任务立即执行
2、async await中 await之前的代码也是立即执行的（实际上await是一个让出线程的标志。await后面的表达式会先执行一遍，将await后面的代码加入到microtask中，然后就会跳出整个async函数来执行后面的代码。）
3、注意整个js代码中的层次关系。同层次之间进行执行栈和任务列分析。微任务和宏任务的推敲。然后再往下一层级推敲。（经过几次实际操作后得出的。。。之前一直以为只要是宏任务就会比微任务后执行来着，后来实践不是这样的）

放上几个实例供大家联系：自己得出结果后在浏览器console里面执行一下检测一下哟：

(function() {

    setTimeout(() => {
        console.log(0);
    });

    new Promise(resolve => {
        console.log(1);

        setTimeout(() => {
            resolve();
            Promise.resolve().then(() => console.log(2));
            console.log(3);
        });

        Promise.resolve().then(() => console.log(4));

    }).then(() => {
        console.log(5);
        Promise.resolve().then(() => console.log(8)); //这句是多加的
        setTimeout(() => console.log(6));
    });

    console.log(7);

})();

(function() {
    setTimeout(() => {
        console.log(0);
    });

    new Promise(resolve => {

        console.log(1);
        
        setTimeout(() => {
            resolve();
            Promise.resolve().then(() => {
                console.log(2);
                setTimeout(() => console.log(3));
                Promise.resolve().then(() => console.log(4));
            });
        });

        Promise.resolve().then(() => console.log(5));

    }).then(() => {

        console.log(6);
        Promise.resolve().then(() => console.log(7));
        setTimeout(() => console.log(8));

    });

    console.log(9);
})();

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


function fn(){
    console.log(1);
    
    setTimeout(() => {
        console.log(2);
        Promise.resolve().then(() => {
            console.log(3);
        });
    },0);
    
    new Promise((resolve, reject) => {
        console.log(4);
        resolve(5);
    }).then(data => {
        console.log(data);
    });
    
    setTimeout(() => {
        console.log(6);
    },0);
    
    console.log(7);
}
fn(); //