js事件循环机制、async与defer、同步与异步模式

同步模式aynchronous与异步模式asynchronous

·js是单线程语言，代码从上到下解析执行，若只有同步aync模式，那么页面将会阻塞，故需要异步async执行。

·js代码运行顺序：首先运行主线程，在遇到异步代码，如定时器时，会将其放入任务队列中，等主线程运行完毕后再将任务队列中的事件取出来按顺序执行。

js事件循环

·当执行异步任务时，异步任务中可能也会有同步任务和异步任务，先执行主线程后再次进入任务队列执行异步任务，这个过程会无限循环下去，这个过程就是事件循环。

·宏任务：普通任务，正常执行，正常的异步任务都是宏任务，比如定时器、IO任务

·微任务：优先于宏任务执行，但是不会抢断，有queueMicrotask、async、Promise

！！！在异步任务中，先执行微任务，再执行宏任务。

 

async于defer

使用原因：当一个script标签在页面中时，如果不加设置，文档会在解析到script标签时将js文件解析、编译、执行完毕后才会去执行其他元素，async于defer则会将script标签的元素变为异步执行模式，使得页面不会停留在标签处，当dom元素解析完毕后再加载js文件。

 

区别：async会引用时就将script异步编译执行，没有顺序可言，但是defer则有顺序，会在最后再执行。

 

async函数与await表达式

·async函数：函数的返回值是一个Promise对象，Promise对象的值由async函数执行的返回值决定，需要使用.then函数输出值。

·await表达式：表达式右侧一般为Promise对象，也可以是其他值；如果是Promise对象，那个await会阻塞后面的代码，直到拿到Promise对象的resolve值作为其运算结果；如果是其他值，则把其他值作为其结果

·async与await是非阻塞的，await阻塞的只是async指向的函数而不是整段代码，async与await均基于Promise，async始终会返回一个Promise对象。