事件循环

1、什么是同步函数，什么是异步函数？
其实函数本身没有什么同步异步的区别，它只不过是一个包裹了一些语句或则另外一个函数的容器。真正区别它是否是异步函数，则是看它的执行触发条件是否是异步操作。比如，我们定义一个 function test() {};并且在 js 代码中的某个位置上对它进行调用 test()，因为它的执行触发条件是在 js 中同步执行的，因此它是个同步函数；另外当我们对某个 dom 元素绑定点击事件 onclick='test'，因为它的执行触发条件是在 js 中异步执行的，因此它是个异步函数。

2、js 怎么处理同步函数的执行顺序？
浏览器在执行 js 代码之前，会先整体预处理一遍 js 代码，解析代码中的函数和变量，但是变量不予赋值。在 js 执行期中，根据 js 代码中函数的触发执行操作 functionName() 位置从而对函数内部语句进行同步执行。

3、js 怎么处理同步和异步代码的执行顺序？
js 代码是先执行同步代码，之后再执行异步代码的。这是因为 js 是单线程，在浏览器执行 js 代码时，它会在主线程中先执行整个 js 代码中的同步部分并将异步函数推送到事件队列中，直到主线程执行完毕同步代码并处于空闲状态，主线程才会执行被触发条件所触发的异步操作函数。倘若同步代码执行时间过长，即使异步操作函数已被触发条件所触发，也会阻塞其异步操作函数的执行，因为主线程还在执行同步代码，未处于空闲状态。

  setTimeout(() => {
    console.log('异步代码')
  }, 0)
  console.log('同步代码')
  for(let i = 0; i < 2500000000; i++) {}

// 同步代码
// 异步代码 【被同步代码阻塞，非0秒后出现】

4、单线程 js 怎么处理异步函数之间的顺序？
异步函数会被推送到事件队列中，事件队列中分有宏任务队列和微任务队列，因此异步函数也分为宏任务事件和微任务事件。首先会将整个 js 文件看成一个宏任务，推送到宏任务队列并立即触发执行，由于此时的主线程为空闲状态，就会先执行 js 文件中的同步代码，之后就是执行微任务事件代码，最后就开始执行宏任务事件代码。

宏任务：script、setTimeout、setInterval、MessageChannel、postMessage 和 setImmediate
微任务：Promise 的 then/catch/finally、process.nextTick、MutationObsever

  async function haha() {
    return '微任务'
  };
  function hahaha() {
    console.log('同步函数');
  };
  haha().then(res => console.log(res));
  hahaha();
  console.log('同步语句');
  
// 同步函数
// 同步语句
// 微任务

5、js 怎么处理宏任务事件执行顺序并执行的？
如上述情况，当 js 执行完毕当前宏任务事件中的同步代码和微任务事件代码后，就会挑选宏任务队列里面触发时间最早的宏任务事件，若触发时间最早的宏任务事件存在多个，则会按照事件在 js 声明的先后顺序进行优先级选择，先声明级别高于后声明。如此便选择到了触发时间最早且优先级最高的宏任务，当 js 又再一次执行完毕当前宏任务事件中的同步代码和微任务事件代码后，就会挑选宏任务队列里面触发时间最早且优先级最高的宏任务事件执行。循环往复，这便是事件循环。

  async function test() {};
  setTimeout(() => {
    console.log('异步1-1')
    test().then(() => console.log('异步1-微任务'))
    setTimeout(() => { console.log('异步1-2') }, 1000);
    setTimeout(() => { console.log('异步1-3') }, 0);
  }, 0);
  setTimeout(() => {
    console.log('异步2-1');
    test().then(() => console.log('异步2-微任务'))
    setTimeout(() => { console.log('异步2-2') }, 1000);
    setTimeout(() => { console.log('异步2-3') }, 0);
  }, 0);
// 异步1-1
// 异步1-微任务
// 异步2-1
// 异步2-微任务
// 异步1-3
// 异步2-3
// 异步1-2
// 异步2-2