一、JS的执行机制
在学习js的同步与异步之前,我们要先了解认识js的执行机制
JavaScript 的执行机制主要基于以下几个关键概念:
-
单线程
- JavaScript 是单线程运行的,这意味着它在同一时间只能执行一个任务。这保证了程序执行的顺序性和可预测性,但也限制了其并发处理能力。
-
同步任务和异步任务
- 同步任务会按照代码的书写顺序依次执行,阻塞后续代码的执行,直到完成。
- 异步任务不会阻塞代码的执行,会在合适的时机被放入任务队列中等待执行。
-
任务队列
- 分为宏任务队列和微任务队列。
- 宏任务如
setTimeout
、setInterval
等,微任务如Promise.then
等。
-
事件循环(Event Loop)
- 这是 JavaScript 实现异步编程的核心机制。
- 程序首先执行同步任务,当遇到异步任务时,将其交给相应的模块(如定时器模块、网络请求模块等)处理,并在异步任务完成后将其回调函数放入任务队列中。
- 当同步任务执行完后,会检查微任务队列,如果有微任务则依次执行,直到微任务队列为空。然后从宏任务队列中取出一个宏任务执行,执行完后再次检查微任务队列,如此循环。
执行机制(事件循环):在程序开始的时候,程序中的每一个语句将会进入到调用栈当中。可以将他想象成一个CPU。然后在这个任务栈中,它会将任务分为同步任务和异步任务。其中,同步任务会被立即执行,而异步任务会将被调到队列中(可以简单认为耗时时间长的为异步任务,但其实不是),同时,异步任务会被浏览器分成微任务和宏任务(你也可以粗略的认为事件稍长的为宏任务,其他为微任务。但其实也不是,后面会讲),然后将微任务放入微任务队列,相对应的,宏任务会被放入宏任务队列。当调用栈当中的任务空了,他就会先访问微任务队列,然后将微任务队列清空了,再执行宏任务队列当中的任务。循环往复。
二、同步任务
定义: 同步操作会阻塞当前线程或进程,直到该操作完成。这意味着当一段代码执行同步操作时,后面的代码必须等待该操作完成才能继续执行。在同步操作中,任务按顺序执行,一个任务必须完成后才能执行下一个任务。这种方式会阻塞程序的执行,直到当前任务完成。
特点:
简单直观,代码按照从上到下的顺序执行。
在执行耗时操作时会阻塞其他任务,可能导致UI无响应(在前端JavaScript中)。
三、微任务
包括但不限于:
Process.nextTick(node)
Promis.then() / catch() 注意:Promise本身是同步任务,then/catch的回调函数是异步微任务
Async / Await
Object.observe
四、宏任务
包括但不限于:
script(代码块)
setTimeout / setInterval 定时器
setImmediate 定时器