(1)JS为什么是单线程的?
JS最初被设计用在浏览器中,那么想象一下,如果浏览器中的JS是多线程的。
场景描述:
那么现在有2个进程,process1 process2,由于是多进程的JS,所以他们对同一个dom,同时进行操作
process1 删除了该dom,而process2 编辑了该dom,同时下达2个矛盾的命令,浏览器究竟该如何执行呢?
这样想,JS为什么被设计成单线程应该就容易理解了吧
(2) JS为什么需要异步?
场景描述:
如果JS中不存在异步,只能自上而下执行,如果上一行解析时间很长,那么下面的代码就会被阻塞。
对于用户而言,阻塞就意味着"卡死",这样就导致了很差的用户体验
所以,JS中存在异步执行。
(3) JS单线程又是如何实现异步的呢?
既然JS是单线程的,只能在一条线程上执行,又是如何实现的异步呢?
是通过的事件循环(event loop),理解了event loop机制,就理解了JS的执行机制
(4)宏任务和微任务
- 宏任务(macro-task): 包括整体代码script,setTimeout,setInterval,ajax,dom操作
- micro-task(微任务):Promise,process.nextTick
(5)宏任务和微任务关系图
- 执行一个宏任务,过程中如果遇到微任务,就将其放到微任务的【事件队列】里
- 当前宏任务执行完成后,会查看微任务的【事件队列】,并将里面全部的微任务依次执行完
console.log('start......')
setTimeout(function(){
console.log('setTimeout......')
})
new Promise(function(resolve){
console.log('Promise1 begin......')
resolve()
}).then(function(){
// 微任务1
console.log('Promise1 then......')
setTimeout(function(){
console.log('setTimeout2......')
})
new Promise(function(resolve2){
console.log('Promise2 begin......')
resolve2()
}).then(function(){
// 微任务2
console.log('Promise2 then......')
})
})
console.log('finish1......')
结果以及分析:
结果:
- start......,
- Promise1 begin......,
- finish1......,
- Promise1 then......
- Promise2 begin......
- Promise2 then......
- setTimeout......
- setTimeout2...... 分析:
// 第一轮事件循环
- start......,
- Promise1 begin......,
- finish1......,
- Promise1 then......
- Promise2 begin......
- Promise2 then......
// 第一轮事件循环
setTimeout......
setTimeout2......
(6)js的事件循环
- 首先判断JS是同步还是异步,同步就进入主进程,异步就进入event table
- 异步任务在event table中注册函数,当满足触发条件后,被推入event queue
- 同步任务进入主线程后一直执行,直到主线程空闲时,才会去event queue中查看是否有可执行的异步任务,如果有就推入主进程中
(7)谈谈setTimeout?
这段setTimeout代码什么意思? 我们一般说: 3秒后,会执行setTimeout里的那个函数
setTimeout(function(){
console.log('执行了')
},3000)
但是这种说并不严谨,准确的解释是: 3秒后,setTimeout里的函数被会推入event queue,而event queue(事件队列)里的任务,只有在主线程空闲时才会执行.