首页
学习
活动
专区
工具
TVP
发布
精选内容/技术社群/优惠产品,尽在小程序
立即前往

面试官:说说Event Loop事件循环、微任务、宏任务

then()方法里面的回调才是微任务图片(2). await右边的表达式还是立即执行,表达式之后的代码才是微任务, await微任务可以转换成等价的promise微任务分析图片(3). script标签本身是一个宏任务...其实是声明了⼀个promise,promise是同步代码,顺序⾏打印async2函数里的4 ,只有.then⾥⾯的代码会加⼊微任务队列⾥,这⾥相当于⾏了async2()之后,再将后面的代码加⼊⼀个微任务队列中...6.接着执行第二个微任务,也就是16行代码,打印8。第17行的then这个时候会加入微任务队列。...then()方法里面的回调才是微任务图片(2). await右边的表达式还是立即执行,表达式之后的代码才是微任务, await微任务可以转换成等价的promise微任务分析图片(3). script标签本身是一个宏任务...6.接着执行第二个微任务,也就是16行代码,打印8。第17行的then这个时候会加入微任务队列。

76240
  • 您找到你想要的搜索结果了吗?
    是的
    没有找到

    面试官:说说Event Loop事件循环、微任务、宏任务5

    本次队列清空寻找下一个宏任务,重复步骤1以此反复直到清空所以宏任务,这种不断重复的执行机制,就叫做事件循环画了一张图来描述事件循环图片4.易错点(1). promise本身是一个同步的代码(只是容器),只有它后面调用的...then()方法里面的回调才是微任务图片(2). await右边的表达式还是立即执行,表达式之后的代码才是微任务, await微任务可以转换成等价的promise微任务分析图片(3). script标签本身是一个宏任务...执行Promise的then方法里的代码,打印63.微任务执行完毕后,最后执行定时器里的宏任务,打印2,3,4三.图片参考 前端进阶面试题详细解答1.先执行主线程上的同步代码,打印12.执行第9行的函数...,进⼊async1内部,async1其实是声明了⼀个promise,promise是同步代码,顺序⾏打印async2函数里的4 ,只有.then⾥⾯的代码会加⼊微任务队列⾥,这⾥相当于⾏了async2...6.接着执行第二个微任务,也就是16行代码,打印8。第17行的then这个时候会加入微任务队列。

    78120

    面试官:说说Event Loop事件循环、微任务、宏任务

    以此反复直到清空所以宏任务,这种不断重复的执行机制,就叫做事件循环画了一张图来描述事件循环图片更多面试题解答参见 前端进阶面试题详细解答4.易错点(1). promise本身是一个同步的代码(只是容器),只有它后面调用的...then()方法里面的回调才是微任务图片(2). await右边的表达式还是立即执行,表达式之后的代码才是微任务, await微任务可以转换成等价的promise微任务分析图片(3). script标签本身是一个宏任务...执行Promise的then方法里的代码,打印63.微任务执行完毕后,最后执行定时器里的宏任务,打印2,3,4三.图片1.先执行主线程上的同步代码,打印12.执行第9行的函数,进⼊async1内部,async1...其实是声明了⼀个promise,promise是同步代码,顺序⾏打印async2函数里的4 ,只有.then⾥⾯的代码会加⼊微任务队列⾥,这⾥相当于⾏了async2()之后,再将后面的代码加⼊⼀个微任务队列中...6.接着执行第二个微任务,也就是16行代码,打印8。第17行的then这个时候会加入微任务队列。

    2.4K31

    说说Event Loop事件循环、微任务、宏任务

    本次队列清空寻找下一个宏任务,重复步骤1以此反复直到清空所以宏任务,这种不断重复的执行机制,就叫做事件循环画了一张图来描述事件循环图片4.易错点(1). promise本身是一个同步的代码(只是容器),只有它后面调用的...then()方法里面的回调才是微任务图片(2). await右边的表达式还是立即执行,表达式之后的代码才是微任务, await微任务可以转换成等价的promise微任务分析图片(3). script标签本身是一个宏任务...执行Promise的then方法里的代码,打印63.微任务执行完毕后,最后执行定时器里的宏任务,打印2,3,4三.图片参考 前端进阶面试题详细解答1.先执行主线程上的同步代码,打印12.执行第9行的函数...,进⼊async1内部,async1其实是声明了⼀个promise,promise是同步代码,顺序⾏打印async2函数里的4 ,只有.then⾥⾯的代码会加⼊微任务队列⾥,这⾥相当于⾏了async2...6.接着执行第二个微任务,也就是16行代码,打印8。第17行的then这个时候会加入微任务队列。

    72120

    面试官:说说Event Loop事件循环、微任务、宏任务_2023-02-28

    本次队列清空寻找下一个宏任务,重复步骤1以此反复直到清空所以宏任务,这种不断重复的执行机制,就叫做事件循环画了一张图来描述事件循环图片4.易错点(1). promise本身是一个同步的代码(只是容器),只有它后面调用的...then()方法里面的回调才是微任务图片(2). await右边的表达式还是立即执行,表达式之后的代码才是微任务, await微任务可以转换成等价的promise微任务分析图片(3). script标签本身是一个宏任务...执行Promise的then方法里的代码,打印63.微任务执行完毕后,最后执行定时器里的宏任务,打印2,3,4三.图片参考 前端进阶面试题详细解答1.先执行主线程上的同步代码,打印12.执行第9行的函数...,进⼊async1内部,async1其实是声明了⼀个promise,promise是同步代码,顺序⾏打印async2函数里的4 ,只有.then⾥⾯的代码会加⼊微任务队列⾥,这⾥相当于⾏了async2...6.接着执行第二个微任务,也就是16行代码,打印8。第17行的then这个时候会加入微任务队列。

    89410

    2021前端面试必备题+答案

    首先我们需要知道: DOM 引擎、JS 引擎 相互独立,但又工作在同一线程(主线程) JS 代码调用 DOM API 必须 挂起 JS 引擎、转换传入参数数据、激活 DOM 引擎,DOM 重绘后再转换可能有的返回值...,最后激活 JS 引擎并继续执行若有频繁的 DOM API 调用,且浏览器厂商不做“批量处理”优化, 引擎间切换的单位代价将迅速积累若其中有强制重绘的 DOM API 调用,重新计算布局、重新绘制图像会引起更大的性能消耗...catch方法,都会触发Promise.all()方法返回的新的实例的catch方法,如果参数中的某个实例本身调用了catch方法,将不会触发Promise.all()方法返回的新实例的catch方法...⾏行行,且应该在 then ⽅方法被调⽤用的那⼀一轮事件循环之后的新⾏行行栈中⾏行行。...$set 的实现原理是: 如果目标是数组,直接使用数组的 splice 方法触发相应式; 如果目标是对象,先判读属性是否存在、对象是否是响应式, 最终如果要对属性进行响应式处理,则是通过调用 defineReactive

    80530

    熬夜整理前端高频面试题(已拿offer)

    确认报文段ACK=1,确认号ack=y+1,序号seq=x+1(初始为seq=x,第二个报文段所以要+1),ACK报文段可以携带数据,携带数据则不消耗序号。那为什么要三次握手呢?两次不行吗?...⽤户浏览器接收到响应后解析⾏,混在其中的恶意代码⾏。恶意代码窃取⽤户数据并发送到攻击者的⽹站,或者冒充⽤户的⾏为,调⽤⽬标⽹站接⼝⾏攻击者指定的操作。...⽤户浏览器接收到响应后解析⾏,混在其中的恶意代码⾏。恶意代码窃取⽤户数据并发送到攻击者的⽹站,或者冒充⽤户的⾏为,调⽤⽬标⽹站接⼝⾏攻击者指定的操作。...Cannot read property ‘prototype’ of undefined解决办法通过浏览器报错提示代码定位问题,解决问题Vue项目中遇到视图更新,方法执行,埋点触发等问题一般解决方案查看浏览器报错...POST不会变成GET 304 Not Modified:表示客户端发送附带条件的请求(GET方法请求报文中的IF…)时,条件不满足。返回304时,包含任何响应主体。

    37830

    【JavaScript】网页交互的灵魂舞者

    这些变量的类型在程序运行的过程中还可能发生改变 var a = 10; a = "nihao" alert(a); 还可以通过控制台打印日志的方式,调用...区分整数和⼩数. string 字符串类型....”的区别 let num1 = 20; let num2 = "20"; console.log(num1 == num2); console.log(num1 === num2); == ⽐较相等(进...var arr = [1, 2, 'haha', false]; 再来看新增,数组下标为 - 1 时的值可以更改,可以按照下标顺序新增,断开的下标都用 empty 表示,但是薪资 -1 下标并不会影响数组的长度...,如果修改所选元素的文本内容的话,就需要传入参数 html( ) html( ) 方法是可以获取并设置 html 标签的,这一点和 text( ) 方法有区别 val( ) 再来看 val() 方法,val

    7510

    Spidermonkey_spider是什么意思

    每​个​s​c​r​i​p​t​或​者​函​数​​行​,​​创​建​一​个​上​下​文​,​引​擎​称​之​为​S​t​a​c​k Frame, js权威指南称之为execution context...Slide 13 JS 原型链: class-based: class:定义对象所需要的方法和数据的类型。 instance:对象的数据。通过class 的 constructor创建。...它​​依​赖​​行​时​的​上​下​文​,​在​编​译​期​已​经​确​定​。...当​函​数​​行​的​时​候​,​t​h​i​s​为​当​前​函​数​的​调​用​对​象​,​如​果​​存​在​,​为​函​数​的​s​c​o​p​e chain的root(global对象)。...GC出发的时候会加锁,其他线程对GC的访问将被阻塞。

    81820

    2022我的前端面试总结

    this指向的是全局作用域,所以会打印出window;obj.say(),谁调用say,say 的this就指向谁,所以此时this指向的是obj对象;obj.pro.getPro(),我们知道,箭头函数时绑定...HTML的解析,阻塞CSS的解析。...Webpack将一切文件视为模块,但是webpack原生是只能解析js文件,如果想将其他文件打包的话,就会用到loader。...⽤户浏览器接收到响应后解析⾏,混在其中的恶意代码⾏。恶意代码窃取⽤户数据并发送到攻击者的⽹站,或者冒充⽤户的⾏为,调⽤⽬标⽹站接⼝⾏攻击者指定的操作。...⽤户浏览器接收到响应后解析⾏,混在其中的恶意代码⾏。恶意代码窃取⽤户数据并发送到攻击者的⽹站,或者冒充⽤户的⾏为,调⽤⽬标⽹站接⼝⾏攻击者指定的操作。

    1.1K30

    前端面试中小型公司都考些什么

    ⽤户浏览器接收到响应后解析⾏,混在其中的恶意代码⾏。恶意代码窃取⽤户数据并发送到攻击者的⽹站,或者冒充⽤户的⾏为,调⽤⽬标⽹站接⼝⾏攻击者指定的操作。...⽤户浏览器接收到响应后解析⾏,混在其中的恶意代码⾏。恶意代码窃取⽤户数据并发送到攻击者的⽹站,或者冒充⽤户的⾏为,调⽤⽬标⽹站接⼝⾏攻击者指定的操作。...方法调用了函数,返回了函数实例对象,此时 Foo 函数内部的属性方法初始化,原型链建立。...obj.a() ; 调用 obj 实例上的方法 a,该实例上目前有两个 a 方法:一个是内部属性方法,另一个是原型上的方法。...浏览器渲染优化(1)针对JavaScript: JavaScript既阻塞HTML的解析,阻塞CSS的解析。

    77130

    小兔JS教程(三)-- 彻底攻略JS回调函数

    我们定义了一个变量a,它的值为100,那么如果我们使用这个a,是不存在什么执行的问题的,直接调用就OK了,这就是所谓的执行了一次右查询。...fun; 你觉得这样子行吗?肯定不会嘛,因为函数它必须要打一个括号才能执行啊!你不打括号的话它就执行不了的。 fun(); 这样子写,它才会执行函数体里面的内容。...我之所以要这么啰嗦,是希望以后如果你看到别人js框架里面,或者某个API文档写callback,你不要再害怕了,不要再恐惧了,觉得哎呀好难,callback是什么东西??它就是一个名字而已。...在js中,我们可以用document.getElementById的方式取到dom元素,现在我们将这个方法单独封装起来。...如果用js方法给dom元素添加一个点击事件,一般我们这么写: dom.onclick = function(){} dom['onclick'] = function(){} 两种写法都可以哈,这样应该比较好理解了吧

    4K70

    前端面试查漏补缺

    this如果函数没有返回其他对象,那么 new 表达式中的函数调用自动返回这个新对象JS 数据类型基本类型:Number、Boolean、String、null、undefined、symbol(ES6...该方法可用于Web站点的身份鉴别,即在HTTPS的连接建立阶段,浏览器检查Web网站的SSL证书的有效性。...⽤户浏览器接收到响应后解析⾏,混在其中的恶意代码⾏。恶意代码窃取⽤户数据并发送到攻击者的⽹站,或者冒充⽤户的⾏为,调⽤⽬标⽹站接⼝⾏攻击者指定的操作。...⽤户浏览器接收到响应后解析⾏,混在其中的恶意代码⾏。恶意代码窃取⽤户数据并发送到攻击者的⽹站,或者冒充⽤户的⾏为,调⽤⽬标⽹站接⼝⾏攻击者指定的操作。...调用之后回返回一个遍历器对象,包含有一个 next 方法,使用 next 方法后有两个返回值 value 和 done 分别表示函数当前执行位置的值和是否遍历完毕。

    58110

    2023秋招前端面试必会的面试题_2023-03-15

    参与 参与 从上表可以看到,cookie 已经建议用于存储。...HTML的解析,阻塞CSS的解析。...调用方式函数式组件可以直接调用,返回一个新的React元素;类组件在调用时是需要创建一个实例的,然后通过调用实例里的render方法来返回一个React元素。3....⽤户浏览器接收到响应后解析⾏,混在其中的恶意代码⾏。恶意代码窃取⽤户数据并发送到攻击者的⽹站,或者冒充⽤户的⾏为,调⽤⽬标⽹站接⼝⾏攻击者指定的操作。...⽤户浏览器接收到响应后解析⾏,混在其中的恶意代码⾏。恶意代码窃取⽤户数据并发送到攻击者的⽹站,或者冒充⽤户的⾏为,调⽤⽬标⽹站接⼝⾏攻击者指定的操作。

    98530
    领券