js 在浏览器的事件机制

事件循环Event Loop:浏览器为了协调事件处理、脚本执行、网络请求和渲染等任务而制定的工作机制。

image.png

宏任务Task:代表一个个离散的、独立的工作单元。浏览器完成一个宏任务，在下一个宏任务执行开始前，会对页面进行重新渲染。主要包括创建文档对象、解析HTML、执行主线JS代码以及各 种事件如页面加载、输入、网络事件和定时器等。

微任务:微任务是更小的任务，是在当前宏任务执行结束后立即执行的任务。如果存在微任务，浏览器会清空微任务之后再重新渲染。微任务的例子有 Promise 回调函数、DOM变化等。

console.log('script start');

setTimeout(function () {
  console.log('setTimeout');
}, 0);

Promise.resolve()
  .then(function () {
    console.log('promise1');
  })
  .then(function () {
    console.log('promise2');
  });

console.log('script end');

结果：

script start
script end
promise1
promise2
setTimeout

浏览器先执行是宏任务，然后执行微任务。Promise是第一个宏任务后的微任务，所以先执行。setTimeout的回调函数是下一个宏任务