image.png
首先,请记住两点:
- JS 是单线程语言
- JS 的Event Loop 是JS的执行机制.要想深入理解JS的执行,就得深入了解JS 的 Event Loop
JS 为什么是单线程? 为什么需要异步? 单线程又是如何实现异步的呢?
1. JS 为什么是单线程
JS 最初被设计用在浏览器中,那么想象一下,如果浏览器中的 JS 是多线程的
场景描述:
假设现在有两个线程,process1和process2,由于是多线程的 JS ,所以它们对同一个DOM同时进行操作
process1删除了改DOM,而process2编辑了改DOM,同时下达了两个矛盾的命令,浏览器到底该如何执行呢?
这样想,JS 为什么会被设计成单线程应该容易理解了吧
2. JS 为什么需要异步
场景描述:
如果 JS 中不存在异步,代码只能自上而下的执行,这个时候,假如上一行代码的解析时间过长,那么下一
行代码就会被阻塞,而对于用户而言,阻塞就意味着"卡死",这样就导致了很差的用户体验
所以,JS中需要异步执行
3. JS 单线程又是如何实现异步的呢
是通过事件循环(event loop)来实现的,理解了event loop机制,就理解了 JS 的执行机制
JS 中的event loop (1)
例1,观察下面代码的执行顺序
console.log(1)
setTimeout(() => console.log(2),0)
console.log(3)
//运行结果是:1 3 2
也就是说,setTimeout里的代码并没有立即执行,而是延迟了一段时间,满足一定条件后才去执行,这类代码,我们称之为异步代码
所以,这里我们知道了 JS 把任务分类的一种方式: 同步任务和异步任务
按照这种分类方式, JS 的执行机制是:
- 首先判断 JS 是同步还是异步,同步就进入主线程,异步就进入 event table
- 异步任务在event table中注册函数,当满足触发条件后,就推入event queue
- 同步任务进入主线程后一直执行,直到主线程空闲时,才会去event queue中查看有否有可执行的异步任务,如果有,就推入主线程中
以上三步循环执行,这就是event loop
JS 中的event loop (2)
以上关于event loop的解释就是我对于JS执行机制的理解,直到我遇到了下面这行代码
setTimeou(() => console.log('代码开始执行'),0)
new Promise((resolve,reject) => {
console.log('开始for循环');
for(let i=0;i<10000;i++){
i == 99 && resolve()
}
}).then(() => console.log('执行then函数'))
console.log('代码执行结束');
尝试按照上文我们刚学到的 JS 执行机制去分析
猜测结果是:开始for循环 -- 代码执行结束 -- 代码开始执行 -- 执行then函数
然而实际结果却是:开始for循环 -- 代码执行结束 -- 执行then函数 -- 开始for循环
事实上,JS 执行机制按照同步和异步的划分方式,并不准确
准确的划分方式是:
- macro - task(宏任务):包括整体script代码,setTimeout,setInterval
- micro - task(微任务):promise,process.nextTick
image
按照这种分类方式,JS 的执行机制是: - 执行一个宏任务,过程中如果遇到微任务,就将其放到微任务的[事件队列]里
- 当前宏任务执行结束后,会查看微任务的[事件队列],并将里面全部的微任务依次执行完
重复执行以上两步,结合event loop(1) 和 event loop(2) 就是更为准确的 JS 执行机制了
现在我们回过头来分析例2:
image.png
关于setTimeout
下面这段代码是什么意思? 我们一般说:3秒后,执行setTimeout里面的函数
setTimeout(() => {
console.log('执行代码');
})
但是这种说话并不严谨,正确的解释是:3秒后,setTimeout中的函数会被推入event queue,而event queue(事件队列)里的任务,只有在主线程空闲时才会执行.
所以只有满足 ① 三秒后, ② 主线程空闲,3秒后才会执行该函数
如果主线程执行内容很多,执行时间超过了3秒,比如执行了10秒,那么这个函数只有在10秒后执行了