JavaScript 单线程执行机制

单线程介绍

JavaScript 是单线程,却能够执行异步任务,这是因为 JavaScript 中存在事件循环(Event Loop)和任务队列(Task Queue)。

事件循环

事件循就是一个执行机制,主线程中的异步任务或回调会放至任务队列中,当主线程任务全部执行完,会把任务队列中等待执行的任务及回调按照顺序拿到主线程执行,需要注意的是在执行队列中的任务过程中又出现新的同步任务则会优先执行。

任务队列

异步相关任务会添加到任务队列中等待事件循环机制去执行,网络请求、定时器、DOM操作,而不同任务有不同的处理方式,分别分为宏任务与微任务,微任务相关操作执行要比宏任务更快一步,

宏任务

1. setTimeOut、setInterval

2. request 网络请求

3. requestAnimationFrame API 多态补帧

4. DOM 用户交互事件、DOM 重绘、回流时触发的函数

微任务

1. Promise

         resolve、reject 回调、Promise,then() 、async / await

2. DOM发生变化时触发的回调函数

备注:DOM 变化触发的回调与宏任务中重新渲染触发的事件不同,因此为微任务。

主线程

JS 中只有一个主线程,如果按照上下文执行同步与异步,当异步耗费事件过长时,那么需要等待此任务执行完成,因此需要事件事件循环(Event Loop)与任务队列(Task Queue),也就是当同步任务执行完成之后才会执行异步任务。

JavaScript 也可以实现多线程,多线程文章会在下期详细介绍。括弧 今天太晚了先睡觉了!

课外练习

以下代码输出结果,以及做哪些改动可以依次输出正常顺序结果。

for (var i = 0; i < 5; i++) {
    setTimeout(() => {
        console.log(i)
    })
}