美文网首页
javascript异步详解1:事件循环机制EventLoop

javascript异步详解1:事件循环机制EventLoop

作者: Fairy_妍 | 来源:发表于2022-02-10 18:14 被阅读0次

    一. js运行机制

    js是单线程,但是存在同步【阻塞】和异步【非阻塞】执行模式

    • 同步:从上到下、从左到右的⽅式执⾏代码逻辑
    • 异步:和同步对⽴,所以异步模式的代码是不会按照默认顺序执⾏的。在解释时,如果遇到异步模式的代码,引擎会将当前的任务“挂起”并略过

    浏览器的线程组成

    1. GUI渲染线程
    2. JavaScript引擎线程
    3. 事件触发线程
    4. 定时器触发线程
    5. http请求线程
    6. 其他线程
    

    在JavaScript代码运⾏的过程中实际执⾏程序时同时只存在⼀个活动线程,这⾥实现同步异步就是靠 多线程切换的形式来进⾏实现的。

    所以我们通常分析时,将上⾯的细分线程归纳为下列两条线程:

    1. 【主线程】:这个线程⽤了执⾏⻚⾯的渲染,JavaScript代码的运⾏,事件的触发等等
    2. 【⼯作线程】:这个线程是在幕后⼯作的,⽤来处理异步任务的执⾏来实现⾮阻塞的运⾏模式

    二. 事件循环机制

    1. 宏任务:

      宏任务是JavaScript中最原始的异步任务,包括setTimeout、setInterVal、AJAX等,在代码执⾏环境中按照同步代码的顺序,逐个进⼊⼯作线程挂起,再按照异步任务到达的时间节点,逐个进⼊异步任务队列,最终按照队列中的顺序进⼊函数执⾏栈进⾏执⾏。

      1 `script`
      2 setTimeout
      3 setInterval
      4 setImmediate(node)
      5 I/O 网络请求完成、文件读写完成事件
      6 UI rendering
      7 requestAnimationFrame(浏览器)
      8 用户交互事件(比如鼠标点击、滚动页面、放大缩小等)
      
    2. 微任务:

      微任务是随着ECMA标准升级提出的新的异步任务,微任务在异步任务队列的基础上增加了【微任务】的概念,每 ⼀个宏任务执⾏前,程序会先检测中是否有当次事件循环未执⾏的微任务,优先清空本次的微任务后,再执⾏下⼀ 个宏任务,每⼀个宏任务内部可注册当次任务的微任务队列,再下⼀个宏任务执⾏前运⾏,微任务也是按照进⼊队列的顺序执⾏的。

      1. process.nextTick(node)
      2. MutationObserver(浏览器)
      3. promise.then/.catch/.finally
      

      【注】:new promise中的function是同步的,promise的.then.catch.finally中的内容才是异步的

    3. 图解

      主线程代码在运⾏时,会按照同步和异步代码将其分成两个去处:如果是同步代码执⾏,就会直接将该任务放在⼀个叫做【函数执⾏栈】的空间进⾏执⾏,执⾏栈是典型的【栈结构】(先进后出),程序在运⾏的时候会将同步代码按顺序⼊栈。将异步代码放到【⼯作线程】中暂时挂起,【⼯作线程】中保存的是定时任务函数、JS的交互事件、JS的⽹络请求等耗时操作。

      当【主线程】将代码块筛选完毕后,进⼊执⾏栈的函数会按照从外到内的顺序依次执行,运⾏中涉及到的对象数据是在堆内存中进⾏保存和管理的。当执⾏栈内的任务全部执⾏完毕 后,执⾏栈就会清空。

      执⾏栈清空后,“事件循环”就会⼯作,“事件循环”会检测本次循环中是否还有微任务执行,若有的话,将所有微任务插入到任务队列后执行清空所有微任务。

      微任务清空后,⼯作线程会把到期的定时任务、返回数据的http 任务等【异步任务】按照先后顺序插⼊到【任务队列】中,等待执⾏栈清空,再检测本次的宏任务中注册的所有微任务进行执行清空。

    代码运行分区 宏任务微任务详解
    1. 所以正确的一次 Event loop 顺序是这样的
    • 执行同步代码,这属于宏任务
    • 执行栈为空,查询本次是否有微任务需要执行
    • 执行所有微任务
    • 必要的话渲染 UI
    • 然后开始下一轮 Event loop,执行宏任务-微任务的循环
    1. 关于执行栈

    先进后出,后进先出。无限制的递归会导致执行栈溢出,eg:

    var i = 0;
    function task(){
     i++
     console.log(`递归了${i}次`)
     task()
    }
    task()
    
    栈溢出

    跨越递归限制:

    var i = 0;
    function task(){
     i++
     console.log(`递归了${i}次`)
     //使⽤异步任务来阻⽌递归的溢出
     setTimeout(function(){
     task()
     },0)
    }
    task()
    

    使用异步任务进行调用,会先把异步内容挂起,等待执行栈清空再进行异步内容的入栈执行和出栈,依次无限循环

    1. 特殊任务

    关于requestAnimationFrame函数的执⾏频率是每秒钟60次左右,是根据浏览器相关的,所以和其他timer类的宏任务的执行时机不确定,可能在之前可能在之后。

    setTimeout(function() {console.log('timer1')}, 0)
    requestAnimationFrame(function(){
     console.log('UI update')
    })
    setTimeout(function() {console.log('timer2')}, 0)
    new Promise(function executor(resolve) {
     console.log('promise1')
     resolve()
     console.log('promise2')
    }).then(function() {
     console.log('promise.then')
    })
    console.log('end')
    // 结果:
    // promise1  promise2  end  promise.then  (UI update)  timer1  timer2  (UI update)
    

    关于事件

    document.addEventListener('click', function(){
     Promise.resolve().then(()=> console.log(1));
     console.log(2);
    })
    document.addEventListener('click', function(){
     Promise.resolve().then(()=> console.log(3));
     console.log(4);
    })
    // 2 1 4 3
    

    解析:当元素被点击时,两个事件会按照先后的注册顺序放⼊异步任务队列中进⾏执⾏,所以事件1和事件2 会按照代码编写的顺序触发。由于事件执⾏时并不会阻断JS默认代码的运⾏,所以事件任务也是异步任务,并且是宏 任务,所以两个事件相当于按顺序执⾏的两个宏任务

    即顺序:同步代码(挂起click事件异步代码)-> 点击触发 -> 执行第一个异步代码宏任务(其中先执行同步代码2再微任务1) -> 执行第二个异步代码宏任务(其中先执行同步代码4再微任务3)

    相关文章

      网友评论

          本文标题:javascript异步详解1:事件循环机制EventLoop

          本文链接:https://www.haomeiwen.com/subject/fwyqkrtx.html