共计 1590 个字符,预计需要花费 4 分钟才能阅读完成。
javascript 为单线程脚本语言,HTML5 推出 web worker 规范,容许创立多个子线程,不过子线程齐全受主线程管制,并且不能够操作 DOM。
浏览器 EventLoop 机制
- 所有同步工作都在主线程上执行,造成执行栈
- 主线程之外还有一个工作队列,只有异步工作有了运行后果,就在工作队列中搁置一个事件
- 执行栈中所有同步工作执行实现,零碎就会读取工作队列,看看有哪些工作。那些对应的异步工作完结期待状态进入执行栈,开始执行
- 主线程一直反复以上三个步骤
node EventLoop 机制
- V8 引擎解析 JavaScript 脚本
- 解析后的代码调用 node API
- libuv 库负责 node API 执行,他将不同的任务分配给不同的线程,造成一个 EventLoop,以异步的形式把执行后果返回给 V8 引擎
- V8 引擎将后果返回给用户
延长 - 异步工作
异步工作能够分为宏工作与微工作,在工作队列中,先执行微工作,微工作执行完再执行宏工作,每次宏工作执行完,零碎会先看有没有可执行的微工作。
宏工作列表
- I/O
- setTimeout
- setInterval
- requestAnimationFrame(浏览器)
- setImmediate(node)
微工作列表
- promise then/catch/finally
- async/await
- MutationObserver(浏览器)
- process.nextTick(node)
* process.nextTick 为以后执行栈尾部,下一次 EventLoop 读取工作队列之前触发回调函数
* setImmediate 为当前任务队列的尾部,每次 EventLoop 读取工作队列时触发回调函数
示例
console.log('start task')
setTimeout(() => {console.log('setTimeout1')
process.nextTick(() => {console.log('nextTick in setTimeout')
})
}, 0)
setImmediate(() => {console.log('setImmediate 1')
setTimeout(() => {console.log('setTimeout in setImmediate 1')
}, 0)
setImmediate(() => {console.log('setImmediate 2')
})
setTimeout(() => {console.log('setTimeout in setImmediate 2')
}, 0)
})
process.nextTick(() => {console.log('nextTick 1')
process.nextTick(() => {console.log('nextTick 2')
})
})
new Promise(()=> {console.log('promise')
const chain = Promise.resolve()
chain.then(() => {console.log('chain 1')
})
chain.then(() => {console.log('chain 2')
})
})
console.log('end task')
// 执行后果:// start task
// promise
// end task
// nextTick 1
// nextTick 2
// chain 1
// chain 2
// setTimeout1
// nextTick in setTimeout
// setImmediate 1
// setImmediate 2
// setTimeout in setImmediate 1
// setTimeout in setImmediate 2
/**
* 提醒!* setImmediate 与 setTimeout 执行程序随机,只有 setImmediate 嵌套时固定先执行 setImmediate
*/
参考:http://www.ruanyifeng.com/blo…
正文完
发表至: javascript
2021-05-19