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

认识JavaScriptEventLoop

时间:2023-04-05 18:28:40 HTML5

EventLoop是指计算机系统的一种运行机制。JavaScript就是利用这种机制来解决单线程带来的问题。浏览器中的Web应用会涉及到JavaScript引擎、WebAPI、EventLoop、TaskQueue(MacroTask、MicroTask)。因此,我们要想了解EventQueue,就必须把以上的都了解了。JavaScript引擎:Google的V8引擎是目前市场上最高效的JavaScript文件解析器。它主要由两部分组成:内存堆:负责内存分配发生的地方。调用栈:代码执行时的栈帧(是记录程序基本位置的数据结构,先进后出)functionmultiply(x,y){returnx*y;}functionprintSquare(x){vars=乘法(x,x);console.log(s);}printSquare(5);当引擎开始执行这段代码时,调用堆栈将为空。之后的步骤如下并发和事件循环JavaScript是一种单线程语言。所以只有一个调用栈,一次只能做一件事,当我们做一些复杂的耗时操作(图形转换)时。浏览器不能做其他事情,不能渲染任何内容,不能运行其他代码。为了解决浏览器被阻塞的问题,JavaScript提供了解决方案异步回调函数(asynchronouscallbackfunctions)。异步函数在解析过程中不会被解析,会立即执行,会被浏览器放入TaskQueue。TaskQueue分为Macrotask,MicrotaskEventLoop每次执行时从Macrotask队列中拉取一个。然后检查微任务队列是否为空。依次执行,直到清空队列。Macrotask主要包括:setTimeout、setInterval、setImmediate、I/O、UI交互事件microtask主要包括:Promise、process.nextTick、MutaionObserverprocess.nextTick总是大于promise.then.Node,TaskQueue中的每个task执行完后调用_tickCallback,而这个_tickCallback其实做了两件事:nextTickQueue中的所有task都执行完(最大长度1e4,Node版本v6.9.1)执行完第一步后,执行_runMicrotasks函数,microtask中的部分(promise.then注册回调)自测console.log('1');process.nextTick(function(){console.log('4');});setTimeout(function(){console.log('6');process.nextTick(function(){console.log('7');});},0);newPromise(function(resolve,reject){console.log('2');resolve();}).然后(函数(){console.log('5');});console.log('3');当setImmediate和setTimeout的延迟设置为0或1时,它们的执行顺序是随机的setTimeout(()=>{console.log(2)},2)setTimeout(()=>{console.log(1)},1)setTimeout(()=>{console.log(0)},0)//GoogleChrome环境下的执行顺序是102.//Node环境下的执行顺序是随机的什么是JavaScript事件循环?JavaScript工作原理:引擎、运行时、调用栈概览这一次,彻底理解JavaScript执行机制EventLoop的规范和实现