美文网首页
浏览器中的JS事件循环机制

浏览器中的JS事件循环机制

作者: 2016_18点 | 来源:发表于2018-11-26 10:21 被阅读0次

    一、概述

    JavaScript是单线程(只有一个主线程)的语言
    Event Loop是JavaScript的执行机制
    JavaScript的任务分为同步任务和异步任务
    异步任务分为宏任务和微任务

    二、几个概念:

    • 同步任务(synchronous):**指在主线程上排队执行的任务,只有前一个任务执行完毕,才能执行后一个任务。
    • 异步任务(asynchronous):指不进入主线程、而进入"任务队列"的任务
    • 宏任务(macrotask)包括:
      setTimeOut 、 setInterval 、setImmediate 、 I/O 、 各种callback、UI渲染等
      优先级如下:主代码块 > setImmediate >MessageChannel > setTimeOut/setInterval
    • 微任务(microtask):包括process.nextTick 、Promise、MutationObserver 、async(实质上也是promise)
      优先级如下:
      process.nextTick > Promise >MutationOberser
    • 任务队列(task queue/callback queue):包括1个microtask队列和1个或多个macrotask队列

    三、事件循环可以简单描述为:

    主代码块->微任务->宏任务->微任务->宏任务...(主代码块也是一个宏任务)

    详细解释如下

    1. 主代码块入栈
    2. 顺序执行代码块中的同步任务,遇到异步任务则交由浏览器内核的其模块处理,处理完后将异步任务的回调函数加入到任务队列中(一般不同异步任务的回调函数会放入不同的任务队列之中)
    3. 当函数执行栈为空时,若microtask队列中有任务则先将microtask队列中的所有微任务入栈执行,当函数执行栈为空,再从macrotask队列中取出一个宏任务入栈。
    4. 2~3步骤循环,直到所有任务执行完

    图解如下:


    四、代码实例

    console.log(script start)
    setTimeout(function() {
    console.log('timer over')
    },0)
    Promise****.resolve().then(function() {
    console*.log('promise1')
    }).then(function() {
    console.log('promise2')
    })
    console.log('script end')
    
    输出结果:
    // script start
    // script end
    // promise1
    // promise2
    // timer over
    

    相关文章

      网友评论

          本文标题:浏览器中的JS事件循环机制

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