js eventloop

Posted lin-fighting

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了js eventloop相关的知识,希望对你有一定的参考价值。

浏览器事件环

为了实现js的异步概念。js是单线程的(主线层),内部是多线程的,比如setTimeout,ajax。

  • 进程:计算机分配任务的最小单位
  • 线程:进程里包含多个线程
  • 浏览器是由多个进程运行的,每个网页都是一个进程。浏览器也有一个主进程(用户界面),网络进程(处理请求),渲染进程,GPU进程(3d绘制),第三方插件的进程等等

渲染进程(包含多个线程)

  • GUI渲染线程(渲染页面)
  • js引擎线程,和GUI线程互斥。(跟gui共用同个线程,只能通个时间开启一个,也叫”单线程“)
  • 事件触发线程,独立的线程(EventLoop)
    EventLoop解决的是js执行时可能会调用异步方法,这些方法是怎样调度执行的。
  • 事件click,setTimeout,ajax也是一个独立线程。
    代码的执行过程:

事件循环

  • js引擎线程执行代码,遇到类似于ajax setTimeout evnet等类型会调用浏览器api放入宏任务队列去维护,如setTimeout是时间到了才会放入任务队列,(先进先出的原则),而遇到promise.then等就会存放入微任务队列。
  • 等待js主线程任务完成后先执行微任务队列,微任务队列执行完毕后,再渲染页面。
  • 每次宏任务的时候,会创建单独的微任务队列,微任务在执行完毕之后,浏览器会检测是否要重新渲染(有刷新频率,看有时间渲染没有)
  • 再去宏任务中取出一个任务进行,这时候又会创建一个新的微任务队列。即每次循环都会执行一次宏任务,都会清空微任务队,每一次循环都不一定会渲染)
  • 渲染完页面后才会执行宏任务队列(不停的扫描队列,将队列的任务拿到主线程进行运行,而这个事情就是事件循环线程做的事eventloop[事件循环就是检测当前执行栈是否为空,如果为空就取出来执行。])。
  • react的useEffect与useLayoutEffect也是这个区别,一个是宏任务,一个是微任务。
  • 注意:微任务中又产生了微任务,会继续放入当前的微任务队列,在本轮直接清空。 事件按钮是宏任务,但如果在代码直接写xx.click()。据相当于直接运行,并不是宏仁无,只有点击页面的按钮之后才会开启宏任务。

以上是关于js eventloop的主要内容,如果未能解决你的问题,请参考以下文章

不要混淆nodejs和浏览器中的event loop

批量修改JS文件名称.

比较Backbone.js, Angular.js, Ember.js, Knockout.js

如何在一个js中调用另一个js,以及载入多个有依赖关系的js

js文件如何引用外部js

在js中获取作成者