JS 执行机制

作者: lio_zero | 来源:发表于2021-04-20 14:09 被阅读0次

JS 是一门单线程语言,最新的 HTML5 中提出了 Web-Worker,但 JavaScript 是单线程这一核心仍未改变。

JS 单线程基于事件循环:分为异步和同步。同步执行完,在执行异步中的内容

  • 同步的进入主线程,异步的进入 Event Table(事件列表) 并注册函数。
  • 当指定的事情完成时,Event Table 会将这个函数移入 Event Queue(事件队列)。
  • 主线程内的任务执行完毕为空,会去 Event Queue 读取对应的函数,进入主线程执行。
  • 上述过程会不断重复,也就是常说的 Event Loop(事件循环)。

更加精确的定义

任务队列又分为宏任务队列微任务队列

  • 宏任务(MacroTask):整体代码 Script、UI 渲染、I/O、postMessage、MessageChannel、requestAnimationFrame、setTimeout、setInterval、setImmediate(Node.js 环境)
  • 微任务(MicroTask):Promise.then()、catch、finally、process.nextTick(Node.js 环境)、MutaionObserver

事件循环

  1. 进入脚本执行宏任务,自上而下运行
  2. 遇到同步代码按顺序执行,遇到宏任务放入宏任务队列,遇到微任务放入微任务队列
  3. 执行完当前宏任务,执行微任务中执行完并正在等待执行的任务
  4. 执行下一个宏任务,这样周而复始的执行顺序被称为事件循环

JS 的执行顺序和声明以及引用的顺序有关,先声明的顺序先执行,后声明的顺序后执行(如果有两个同名方法,后声明的会覆盖先声明的)

题目

// 以下代码在 Node 环境运行:process.nextTick 由 Node 提供
console.log("1")
setTimeout(function () {
  console.log("2")
  process.nextTick(function () {
    console.log("3")
  })
  new Promise(function (resolve) {
    console.log("4")
    resolve()
  }).then(function () {
    console.log("5")
  })
})

process.nextTick(function () {
  console.log("6")
})

new Promise(function (resolve) {
  console.log("7")
  resolve()
}).then(function () {
  console.log("8")
})

setTimeout(function () {
  console.log("9")
  process.nextTick(function () {
    console.log("10")
  })
  new Promise(function (resolve) {
    console.log("11")
    resolve()
  }).then(function () {
    console.log("12")
  })
})

// 最终输出:1 7 6 8 2 4 3 5 9 11 10 12

相关文章

  • js引擎的执行机制

    js引擎的执行机制 JS的Event Loop是JS的执行机制,理解JS的执行,必须理解Event Loop JS...

  • js执行机制

    js执行机制

  • js定时器

    从JS执行机制说起 浏览器(或者说JS引擎)执行JS的机制是基于事件循环。 由于JS是单线程,所以同一时间只能执行...

  • js执行机制

    JavaScript的一个语言特性(也是这门语言的核心)就是单线程。什么是单线程呢?简单地说就是同一时间只能做一件...

  • JS执行机制

    前言 在稀土掘金上看到这一次,彻底弄懂 JavaScript 执行机制和从浏览器多进程到JS单线程,JS运行机制最...

  • JS执行机制

    1.JS本质是单线程执行任务,但是单线程效率不高,所以将任务分成了同步任务和异步任务。 >(PS:单线程就像银行只...

  • JS执行机制

    一直以来,对JS的执行机制都是模棱两可,知道今天看了文章—《这一次,彻底弄懂JavaScript执行机制》和《Ev...

  • js执行机制

    面试官老喜欢出这种题目问你,请说下这段代码的输出,其中就会有坑,之所以说是坑是因为你不了解,懂了就是云淡风轻,不懂...

  • js执行机制

    JavaScript执行机制,重点有两点: 1.JavaScript是一门单线程语言。2.Event Loop(事...

  • JS执行机制

    引言 众所周知,JS自出生之日起就被设定为了一门单线程的语言,所谓单线程就是指任务执行的顺序需要一个接一个,如果其...

网友评论

    本文标题:JS 执行机制

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