js事件的执行机制

js是一门单线程语言,js任务是一个一个顺序执行的,就像是只有一个核酸窗口,做核酸的人需要一个一个排队做核酸

同样,js任务也要一个一个顺序执行,如果一个任务耗时过长,那么后一个任务也必须要等着

当我们浏览网页的时候假如,网页内的一部分内容加载很慢,比如一张超高清图片,我们的网页会一直等到图片完全加载后才显示吗?

答案当然是不

js将任务分为同步任务和异步任务,

当我们打开网站时,网页的渲染过程就是一堆同步任务,比如网页的基本骨架以及页面元素的渲染

像图片音乐这种占用资源大 耗时久的任务就是异步任务

        同步和异步任务分别进入不同的执行"场所",同步的直接进入主线程,异步任务进入 Event Table(事件表)并注册函数

        当指定的事情完成后,Event Table会将这个函数移入Event Queue(事件队列)

        主线程的任务执行完毕为空,会去Event Queue读取对应的函数,进入主线程执行

        上述过程会不断重复,也就是Event Loop(事件循环)

怎样知道主线程执行栈为空?

js引擎会持续不断的检查主线程执行栈是否为空，一旦为空，就会去Event Queue那里检查是否有等待被调用的函数。

事件循环(主线程->事件队列)中操作流程(微任务->宏任务)

异步任务分为 宏任务 与 微任务

这里再其他博主那里引入一张图片

通常情况下,js执行顺序

第一轮事件循环:

        1.主线程执行js整段代码,将ajax,setTimeout等回调函数注册到事件队列,并区分宏任务和微任务

        2.主线程提取并执行事件队列的所有微任务,并注册微任务中的异步任务到事件队列中,

第二轮事件轮询:

        1.主线程提取事件队列中的第一个宏任务

        2.主线程执行第一个宏任务,并注册这个宏任务中的异步任务到事件队列

        3.执行事件队列中所有的微任务,并将微任务中的异步任务到事件队列中

宏任务每执行完一个,就清空一次事件队列中的微任务

每执行一次任务都可能注册新的宏任务或微任务到响应的任务队列中