事件循环 event loop 究竟是什么

事件循环 event loop 究竟是什么

一些概念

  • 浏览器运行时是多进程,从任务管理器或者活动监视器上可以验证。 打开新标签页和增加一个插件都会增加一个进程,如下图:
    BCDDE685-0E43-44D3-912B-87D58B92F611

  • 浏览器渲染进程是多线程,包含GUI渲染线程,js引擎线程,事件触发线程,定时器线程,异步请求线程等, 平时说js是单线程就是指js引擎线程。

  • 事件触发线程:用来控制事件循环,管理着一个任务队列,会将鼠标点击,ajax异步请求等任务(通俗的讲就是绑定的方法或回调函数)添加到线程中,当对应的事件触发,该线程会将任务添加到任务队列中,等待js引擎处理

  • js分为同步和异步,在js引擎线程(主线程)上执行,创建执行栈,一旦执行栈中所有的同步任务执行完毕,js引擎空闲下来,就会读取任务队列,按照一定的优先级放置到执行栈中,继续执行。

event loop 在代码层面应该类似于while(true){}的循环【纯属猜测 ('∀') 】

但是为什么事件循环不会造成浏览器卡死?
浏览器使用事件触发线程接收鼠标click点击或滚动,网络的异步返回,定时器的回调等,所以js引擎线程执行即便是一个死循环也不会造成浏览器卡死。
但是如果任务队列中的某一项任务处于死循环或者执行时间过长,会导致js引擎不能进入下一轮任务轮询,无法对用户的交互作出反馈,在用户看来就像浏览器卡死了一样。

任务队列 : microtask(微任务) macrotask(宏任务)

macrotask : 主代码块、setTimeout、setInterval会添加到宏任务队列,在执行完本轮macrotask之后会对页面重新渲染,所以在某些情况下我们会写出如下代码:

    // jquery操作dom
    setTimeout(function(){
        // 在此处获取更新后的dom
    },10)

microtask :promise 在本次渲染之前执行,所以比macrotask执行要早

总结下运行机制:

  • 执行一个宏任务(栈中没有就从事件队列中获取)
  • 执行过程中如果遇到微任务,就将它添加到微任务的任务队列中
  • 宏任务执行完毕后,立即执行当前微任务队列中的所有微任务(依次执行)
  • 当前宏任务执行完毕,开始检查渲染,然后GUI线程接管渲染
  • 渲染完毕后,JS线程继续接管,开始下一个宏任务(从事件队列中获取)
posted @ 2019-10-18 19:04  空山与新雨  阅读(704)  评论(0编辑  收藏  举报