当前位置: 首页 > Web前端 > JavaScript

为什么任务分为同步和异步?宏任务和微任务有什么区别?(从面试题中理解)

时间:2023-03-26 22:53:45 JavaScript

JavaScript是单线程的。A。1、为什么JavaScript是单线程的?js是一种运行在浏览器上的脚本语言,因为它经常涉及操作dom。如果是多线程,就意味着可以同时执行多个任务。试想一下,如果一个线程修改了dom,另一个线程删除了dom,那么浏览器不知道先执行哪个操作。所以js在执行的时候,会一个任务执行。2、为什么任务分为同步任务和异步任务?试想一下,如果js任务都是同步的,那么定时器、网络请求等需要延迟执行的任务会怎样呢?页面可能会瘫痪,需要暂停等待执行时间较长的代码。因此引入了异步任务。同步任务:同步任务不需要等待立即看到执行结果,比如console异步任务:异步任务需要等待一定时间才能看到结果,比如setTimeout,网络请求异步任务,可以分为宏观任务和微观任务。以下是到目前为止学习的宏任务和微任务的列表。任务(代码)宏/微任务环境脚本宏任务浏览器事件宏任务浏览器网络请求(Ajax)宏任务浏览器setTimeout()定时器宏任务浏览器/Nodefs.readFile()读取文件宏任务NodePromise。then()microtaskbrowser/Node的执行过程是怎样的?比如去银行排队办业务,每个人的业务相当于一个宏观任务;比如一个人做存钱、购买纪念币、购买理财产品、申请信用卡等业务,这些都叫做微任务。执行顺序:概念1、宏任务:当前调用栈中执行的代码成为宏任务。(主代码快,定时器等)。2、微任务:当前(本事件循环中)宏任务执行完毕后,在下一个宏任务开始之前需要执行的任务,可以理解为回调事件。(承诺。然后,承诺。nextTick等)。3、宏任务中的事件放入回调队列,由事件触发线程维护;微任务的事件放在微任务队列中,由js引擎线程维护。事件循环(EventLoop)事件循环是一个无限循环,在“JavaScript引擎等待任务”、“正在执行任务”和“进入休眠等待更多任务”的状态之间转换。引擎的通用算法:当有任务时:从第一个进入的任务开始执行。睡眠直到任务出现,然后转到第1步。面试常见问题1.console.log(1)setTimeout(function(){//定时器是一个宏任务console.log(2)},0)constp=newPromise((resolve,reject)=>{resolve(1000)//微任务})p.then(data=>{console.log(data)})console.log(3)//运行结果:1,3,1000,2面试题分析:先分析有多少第二个事件循环?有两个事件循环:第一次先运行script标签里的内容,运行到执行栈后,先打印1、3;运行过程中遇到的microtask要加入到micro任务队列中等待,当执行栈中的tasks运行完毕后,执行microtask,即打印1000,此时第一个循环结束,第二次循环运行执行栈中的定时器,总输出结果为:1,3,1000,22.console.log(1)setTimeout(function(){console.log(2)newPromise(function(resolve){console.log(3)resolve()}).then(function(){console.log(4)})})newPromise(function(resolve){console.log(5)resolve()}).然后(function(){console.log(6)})setTimeout(function(){console.log(7)newPromise(function(resolve){console.log(8)resolve()}).then(function(){console.log(9)})})控制台。log(10)//运行结果:151062347893.console.log(1)setTimeout(function(){console.log(2)},0)constp=newPromise((解决,拒绝ect)=>{console.log(3)resolve(1000)//标记为成功console.log(4)})p.then(data=>{console.log(data)})console.log(5)//运行结果:1345100024.setTimeout(()=>{console.log(1)},0)newPromise((resolve,reject)=>{console.log(2)resolve('p1')newPromise((resolve,reject)=>{console.log(3)setTimeout(()=>{resolve('setTimeout2')console.log(4)},0)resolve('p2')}).then(data=>{console.log(data)})setTimeout(()=>{resolve('setTimeout1')console.log(5)},0)}).then(data=>{console.log(data)})console.log(6)//运行结果:236p2p1145可以做点题加强理解