eventloop,又叫事件循环,主要是为了解决js阻塞任务
js是一门单线程的语言,同一时间只能处理一个任务,代码自上而下逐行运行,得益于这种特性,开发过程中就可以在某一任务中通过暂时性设置全局变量,当任务结束在还原全局变量,不会影响其他任务对此变量的影响
但是当遇到需要耗费大量时间或者暂时挂起的任务,如果继续按这种流程执行,就会到这此处js停止住,又因为js渲染引擎与gui渲染引擎互斥,就导致会出现gui渲染dom tree渲染不及时,从而发生页面卡顿
举个简单的例子,当我们创建一个接口发送请求时候,如果按同步执行,一旦接口请求速度过慢,此时这段js就出现了阻塞,会导致浪费大量的时间来等待接口请求成功,这种情况肯定是不正确的,此时就出现了eventloop这个概念
eventloop把js的运行栈系分出来主任务栈以及异步任务栈,在后续的js升级中,又推出了微任务栈
在加持了event loop的情况下,继续按上面的例子,当我们触发了接口请求时候,浏览器会在读取到接口请求的代码之后会立刻结束此代码,并将此代码的回调暂存到webapi队列中,在后台默认等待接口的请求状态,当接口请求成功之后,浏览器会将接口的回调转移到异步队列中,当主任务栈的全部代码都执行成功之后,浏览器会将异步队列中的接口回调转移到主任务栈并执行
setTimeOut,元素事件监听,script标签等都会触发上面的接口请求流程,这里有个概念点,当我们创建了一个setTimeout定时器时候,浏览器同样会把setTimeout转移到后台默认等待到规定的时间,等zh指定时间之后,浏览器会将setTimeout中的callback转移到异步队列,如果此时主任务栈繁忙,就会导致异步队列触发时间延迟,这也就是为什么说setTimeout所设置的1000ms并不是百分百的1000ms