详解高级前端面试常问的EventLoop
首先啥是EventLoop?
整个js这种运行机制又称为Event Loop(事件循环)
EventLoop又分为浏览器端和node端两种
上代码感受一下
setTimeout(() => {console.log(1)Promise.resolve(3).then(data => console.log(data))}, 0)setTimeout(() => {console.log(2)}, 0)
//浏览器 1 3 2
//node 1 2 3
浏览器的EventLoop
首先就是执行时会有一个栈 然后有一个事件队列和微任务空间(自己命名的)
当我们的代码从上到下同步执行时,遇到setTimeout就记时,当时间到时就把此事件放到事件队列中,遇到微任务就把微任务放到微任务空间,代码会继续向下执行,直到同步代码执行完毕。
完毕后,会看看微任务空间中有没有微任务,有就把微任务空间中的微任务全部执行,然后去队列中取我们的事件执行,执行时若有微任务继续放到微任务空间,当此事件执行完毕,还会把微任务空间中的微任务全部执行完毕,然后再去取队列中的异步任务。。。。反复循环
有图有真相(是不是很丑!丑也别说出来)
微任务和宏任务
- 微任务 Promise的then, (MutationObserver)
- 宏任务 setInterval, setTimeout, setImmediate(ie), MessageChannel
node端的EventLoop
想上个丑图
再来段文字描述 争取把自己绕晕
- setTimeout 和 setImmediate 执行顺序不固定 取决于node的准备时间
setImmediate 设计在poll阶段完成时执行,即check阶段; setTimeout 设计在poll阶段为空闲时,且设定时间到达后执行;但其在timer阶段执行 其二者的调用顺序取决于当前event loop的上下文,如果他们在异步i/o callback之外调用(在i/o内调用因为下一阶段为check阶段),其执行先后顺序是不确定的,需要看loop的执行前的耗时情况
- 上图每一个方框都对应一个事件队列,当event loop执行到某个阶段时会将当前阶段对应的队列依次执行。当队列执行完毕或者执行的数量超过上线时,会转入下一个阶段
- 微任务是在切换对列是执行
废话不多说,上代码
setImmediate(() => {console.log('setImmediate1') setTimeout(() => {console.log('setTimeout1')}, 0);
})
setTimeout(()=>{console.log('setTimeout2')setImmediate(()=>{console.log('setImmediate2')})
},0);
//首先setImmediate和setTimeout执行顺序不固定
//所以setImmediate1和setTimeout2,打印顺序不定
//假设 setImmediate1先打印 有两种顺序
//1.执行顺序是 setImmediate1 setTimeout2 setTimeout1 setImmediate2
//2.执行顺序是 setImmediate1 setTimeout2 setImmediate2 setTimeout1
// 1.setImmediate1打印后把setTimeout1放进timer队列 然后执行setTimeout2 这时候把setImmediate2放进check队列中 打印setTimeout2 发现timer中还有setTimeout1 他就会把timer对列中的执行完 才会执行下一队列的代码
//然后打印setTimeout1, 切换对列到check 打印setImmediate2
//2. setImmediate1打印后把setTimeout1放进timer队列 然后执行setTimeout2 这时候把setImmediate2放进check队列中 打印setTimeout2 这个时候node执行过快setTimeout1还没有到时间,所以切换对列执行setImmediate2 然后是setTimeout1
//setTimeout第二个参数虽然是0,但是都有默认时间一般是4ms左右
再来一题
setImmediate(() => {console.log('setImmediate1') setTimeout(() => {console.log('setTimeout1')}, 0);
})
setTimeout(()=>{console.log('setTimeout2')process.nextTick(()=>console.log('nextTick'))setImmediate(()=>{console.log('setImmediate2')})
},0);
//假设setImmediate1先
//setImmediate1 setTimeout2 setTimeout1 nextTick setImmediate2
//setImmediate1 setTimeout2 nextTick setImmediate2 setTimeout1
//微任务会在切换对列时执行 上面从timer对列切换到check对列时nextTick执行
//上面一题明白了这一个也明白了
再来一题
let fs = require('fs');
fs.readFile('./1.txt',function () {console.log(1);setTimeout(() => {console.log('setTimeout')}, 0);setImmediate(() => {console.log('setImmediate')});
});//顺序固定 1 setImmediate setTimeout
// 为什么呢?看上面的图 首先readFile肯定是poll对列 执行时把setTimeout setImmediate放到各自队列 然后按上下顺序查找对列 查找到check队列发现有 就把setImmediate打印出 然后顺序检查下一队列close没有 循环 再次从上往下找 直到timer打印setTimeout
以上内容是本人试出来的 mac vscode
微任务有两种 nextTick和then 那么这两个谁快呢?
Promise.resolve('123').then(res=>{console.log(res);})process.nextTick(() => console.log('nextTick'))//顺序 nextTick 123//很明显 nextTick快
详解高级前端面试常问的EventLoop相关推荐
- 2019前端面试常问
面试项目简介: Vue:hash(散列算法)DOM Diff算法(React) Node.js https://www.cnblogs.com/DCL1314/p/7903085.html 路由传参: ...
- web前端面试常问问题一(肝货)
目录 1.什么是盒子模型?盒子模型分为哪几种?如何计算? 2.描述cookies,sessionStorage和localStorage的区别? 3.行内元素有哪些?块级元素有哪些? 空(void)元 ...
- 前端面试常问的水平居中和垂直居中方法(高频面经)
面试和常用的居中方法 水平方向上 针对inline, 内联块inline-block, 内联表inline-table, inline-flex元素及img,span,button等元素. text_ ...
- 高级前端面试100问
文章目录 一.JS基础-原理实现 二.Promise 一.JS基础-原理实现 实现new function newOperator(ctor) {if (typeof ctor !== 'functi ...
- svm原理详解(大厂面试必问)
视频参考https://www.bilibili.com/video/BV1ZE411p73x?p=2&spm_id_from=pageDriver 最优化问题: 拉格朗日乘子法 .KKT问题 ...
- 前端面试常问的题目(持续更新中)
1.闭包问题 什么是闭包?答:"闭包就是能够读取其他函数内部变量的函数 造成闭包的原因?答: 解决方法?答:可以使用let.立即执行函数 闭包可以实现什么?可以访问局部变量.可以保护变量不受 ...
- linux高级运维笔试简答题及答案,企业linux初级和高级运维面试常问题目问答总结技巧讲解(2020年录制)...
课程增值: 课程是我最近面试辅导的所有学员,成功找到工作,企业常问题目,我带领大家学习,面试如何问答. 我曾经经历面试linux运维没有做大量准备,经历大量hr给我说的一句话就是 回家等通知吧,心碎了 ...
- 大厂前端面试都问些什么问题?入职爱奇艺年薪48万,面试经验总结
前言 "金九银十"跳槽季,又到了面试求职的高峰期.好多小伙伴都会跳槽去找工作.如果你不跳槽,也建议把这篇文章看完,毕竟金九银十之后,就是金三银四了,总是逃不掉的? 你在面试的时候, ...
- 给大家提供一些面试常问的问题
给大家提供一些面试常问的问题 1. 简述 private. protected. public. internal 修饰符的访问权限. 答 . private : 私有成员, 在类的内部才可以 ...
- java除了框架还需要什么_除了框架,前端面试还问什么
原标题:除了框架,前端面试还问什么 现在的web前端技术的发展很快,各种新技术层出不穷.前后端分离的开发模式也让前端开发者的地位日益提升,自然有很多小伙伴慕名入了前端开发的坑,希望能在前端领域大展宏图 ...
最新文章
- dnf超时空漩涡副本路线流程图_DNF超时空漩涡真的不难,掌握这些技巧和打法,自己开团当团长!...
- JavaScript: 设置Cookie
- [原] 利用Radix树作为Key-Value 键值对的数据路由
- 全球及中国操纵杆控制系统行业应用动态与十四五形势分析报告2022版
- linux中256错误,YUM安装遭遇: [Errno 256] No more mirrors to try
- 苹果原壁纸高清_周易壁纸 | 八卦图阵高清壁纸
- 暂停停止继续播放 0201 winform
- mysql使用语句_Mysql基本使用语句
- 在virtualenv中安装NumPy、 SciPy、 scikit-learn、 matplotlib
- gis导出栅格数据为什么不能tif_GIS基础操作教程(3)--点数据操作【附带练习数据】...
- JavaScript创建对象的三种方式之利用构造函数创建对象及使用方法(3)
- jquery 之for 循环
- 软件评测师考试通过啦
- 汉字拼音互相转换工具类
- WireShark基本使用(7)第 7 章 高级
- JZOJ5401. 【NOIP2017提高A组模拟10.8】Star Way To Heaven prim求mst
- ikbc键盘 win解锁
- 学会善于总结,善于表达
- PAT甲级 A1030
- JavaScript EventListener