js任务执行顺序

JS 线程简述

js是单线程的，一次只能执行一个任务，执行完毕后才能继续下一个。

js执行任务的方式也叫作同步执行，同步和异步与我们平时理解的不太一样，平时的同步我们会认为是多个事情一起做，但是在js中我们所谓的同步任务是一个接一个的像是排队一样的去做。

同步任务是指在主线程上排队执行的任务，只有前一个任务执行完毕，才能继续执行下一个任务，当我们打开网站时，网站的渲染过程，比如元素的渲染，其实就是一个同步任务

但是只有同步任务是不能满足日常的一些需求的，这个时候便出现了一个异步概念。

异步任务是指不进入主线程，而进入任务队列的任务，只有任务队列通知主线程，某个异步任务可以执行了，该任务才会进入主线程，当我们打开网站时，像图片的加载，音乐的加载，其实就是一个异步任务

js中的异步任务又分宏任务和微任务（大概如下所示）：

宏任务：渲染事件、请求、script、setTimeout、setInterval

微任务：Promise.then、MutationObserver(监听DOM)

JS 执行机制

现在我们已经知道了js的同步和异步任务以及异步任务中的宏任务和微任务，下面就是执行顺序的问题啦。

当执行任务栈中的同步任务执行完后，就会去任务队列中拿一个宏任务放到执行栈中执行，执行完该宏任务中的所有微任务，再到任务队列中拿宏任务，即一个宏任务、所有微任务、渲染、一个宏任务、所有微任务、渲染...(不是所有微任务之后都会执行渲染)，如此形成循环，即事件循环(EventLoop)

简单来讲就是：

同步任务01 > 异步任务 > 宏任务01 > 微任务01 > 微任务02... > 宏任务02...