任务、微任务、队列和计划

任务(宏任务):

  • 渲染事件(如解析 DOM、计算布局、绘制);
  • 用户交互事件(如鼠标点击、页面滚动、放大缩小等);
  • JavaScript 脚本执行事件;
  • 网络请求完成、文件读写完成事件。

微任务:MutationObserver、Promise

以下内容来自 Google Chrome 的开发者Jake,此文为中文翻译版本。原文地址>>>

当我告诉我的同事Matt Gaunt我正在考虑写一篇关于浏览器事件循环中的微任务排队和执行的文章时,他说:“我跟你说实话,Jake,我不打算读那个。”好吧,反正我已经写好了,所以我们都要坐在这里享受它,好吗?

实际上,如果你更喜欢视频,Philip Roberts在JSConf上就事件循环做了一个很棒的演讲——微任务没有涉及,但它是对其余内容的一个很好的介绍。不管怎样,继续节目…

用这一小段JavaScript:

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

你可能感兴趣的:(JavaScript高级编程)