如何将JavaScript事件循环机制中的宏任务和微任务原理描述为一个长尾？

本文共计783个文字，预计阅读时间需要4分钟。

javascript首先执行一段代码 + async function () { + await f2(); + console.log('f1'); + } + async function f2() { + console.log('f2'); + } + console.log('正確1'); + f1(); + setTimeout(()=> { + console.log('定時器'); + }, 0); + console.log('正確2') + 正确的打印顺序应该是： + 正確1 + f2 + f1 + 定時器 + 正確2

首先看一段代码

async function (){ await f2() console.log('f1') } async function f2(){ console.log('f2') } console.log('正常1') f1() setTimeout(()=>{ console.log('定时器') }) console.log('正常2')

正确的打印顺序应该是：正常1，f2 ，正常2，f1，定时器

为什么会出现这样打印顺序呢

首先javascript是一门单线程语言，在最新的HTML5中提出了Web-Worker，但javascript是单线程这一核心仍未改变。既然js是单线程，那就像只有一个窗口的银行，客户需要排队一个一个办理业务，同理js任务也要一个一个顺序执行。如果一个任务耗时过长，那么后一个任务也必须等着。所以就出现了同步任务和异步任务。