第一章:事件循环介绍:
-
浏览器中的事件循环:
- 为了协调事件(event),用户交互(user interaction),脚本(script),渲染(rendering),网络(networking)等,用户代理(user agent)必须使用 事件循环(event loops).
- 事件:PostMessage(多个页面通信),MutationObserver(dom监听)等
- 用户交互:click,onScroll等
- 渲染:解析dom,css等
- 脚本:执行脚本
-
nodejs中的事件循环
- 事件循环允许Node.js执行非阻塞I/O操作,尽管JavaScript是单线程的,通过尽可能将操作卸载到系统内核,由于大多数现代内核都是多线程的,因此 他们可以处理在后台执行的多个操作。当其中一个操作完成时,内核会告诉Nodejs,以便可以将相应的回调添加到轮询队列中以最终执行。
- 事件:EventEmitter
- 非阻塞I/O: 网络请求,文件读写等
- 脚本: js执行脚本
-
事件循环的本质
- 在浏览器或者nodejs环境中,运行时对js脚本的调度方式就叫事件循环
setTimeout(()=>{
console.log('setTimeout')
},0)
Promise.resolve().then(() =>{
console.log('promise')
})
console.log('main')
// main promise setTimeout
第二章:浏览器事件循环
-
javascript为什么是单线程的?
- 浏览器js的作用是操作DOM,这决定了它只能是单线程,否则会带来很复杂的同步问题。比如,假定javascript同时有两个线程,一个线程在某个DOM 节点上添加内容,另一个线程删除了这个节点,这时浏览器不知道以哪个线程为主。
-
任务队列
- 单线程意味着所有任务需要排队,如果因为任务cpu计算量大还好,但是I/O操作cpu是闲着的。所以js就设计成了一门异步语言,不会做无谓的等待。
- 任务可以分成两种,一种是同步任务,另一种是异步任务。
- 所有同步任务都在主线程上执行,形成一个执行栈。
- 主线程之外,还存在一个任务队列。只要异步任务有了运行结果,就在任务队列之中放置一个事件。
- 一旦执行栈中的所有同步任务执行完毕,系统就会读取任务队列,看看里面有哪些事件。那些对应的异步任务,于是结束等待状态,进入执行栈,开始执行。
- 主线程不断重复上面的第三步
- 主线程从任务队列中读取事件,这个过程是循环不断的,所以整个的这种运行机制又称 Event Loop(事件循环)
-
宏任务和微任务
- 除了广义的同步任务和异步任务,javaScript单线程中的任务可以细分为 宏任务和微任务。
- macrotask(宏任务): script(整体代码),setTimeout, setInterval, setImmediate, I/O, UI rendering
- microtask(微任务):process.nextTick, Promise, Object.observe, MutationObserver 1.宏任务进入主线程,执行过程中会搜集微任务加入微任务队列。 2.宏任务执行完成之后,立马执行微任务中的任务。微任务执行过程中将再次收集宏任务,并加入宏任务队列 3.反复执行1,2
-
事件循环:每执行完一轮宏任务和微任务就叫做一环事件;
高频面试题
- 一轮事件循环会执行一次宏任务以及所有的微任务
setTimeout(() => {
console.log('setTimeout')
setTimeout(() => {
console.log('setTimeout2')
},0)
},0)
Promise.resolve().then(() =>{
console.log('Promise')
Promise.resolve().then(() =>{
console.log('Promise2')
})
})
console.log('main')
// main promise promise2 setTimeout
- 任务队列一定会保持先进先出的顺序执行,没次只能执行一个红任务!!!·
setTimeout(() => { // 两个setTimeout谁先进的话 谁就先出
console.log('setTimeout')
Promise.resolve().then(() =>{
console.log('promise')
})
},0)
Promise.resolve().then(() =>{
console.log('promise2')
setTimeout(() => {
console.log('setTimeout2')
},0)
})
console.log('main')
// main promise2 setTimeout promise setTimeout2
new Promise((res, rej) =>{
console.log(1)
res()
}).then(() =>{
console.log(2)
new Promise((res,rej) =>{
console.log(3)
res()
}).then(() =>{
console.log(4)
}).then(() =>{
console.log(5)
}).then(() =>{
console.log(6)
})
}).then(() =>{
console.log(7)
})
.then(() =>{
console.log(8)
})
// 1 2 3 4 7 5 8 6