资讯专栏INFORMATION COLUMN

js运行机制-事件循环EventLoop

jayce / 1124人阅读

js运行机制-事件循环EventLoop

先来看看一段js代码:

console.log("script begin")
setTimeout(() => {
    console.log("setTimeout")
},0)

new Promise((resolve) => {
    console.log("promise begin")
    for(let i = 0; i < 1000; i++) {
        i == 999 && resolve()
    }
}).then(() => {
    console.log("promise then")
})

console.log("script end")

在node命令行里执行这段js代码,输出的情况为script begin-promise begin——script end——promise then——setTimeout,为什么会这样呢?我们先来了解几个概念.

js单线程如何理解

js单线程意思就是同一时间只能做一件事,按照先后顺序执行.那么,为什么JavaScript不能有多个线程呢?这样能提高效率啊.

JavaScript的单线程,与它的用途有关。作为浏览器脚本语言,JavaScript的主要用途是与用户互动,以及操作DOM。这决定了它只能是单线程,否则会带来很复杂的同步问题。比如,假定JavaScript同时有两个线程,一个线程在某个DOM节点上添加内容,另一个线程删除了这个节点,这时浏览器应该以哪个线程为准?

所以,为了避免复杂性,从一诞生,JavaScript就是单线程。

主线程和任务队列

单线程就意味着,所有任务需要排队。所有任务可以分成两种,一种是同步任务(synchronous),另一种是异步任务(asynchronous)。

同步任务:在主线程上排队执行的任务,只有前一个任务执行完毕,才能执行后一个任务;

异步任务:不进入主线程、而进入"任务队列"(task queue)的任务,只有"任务队列"通知主线程,某个异步任务可以执行了,该任务才会进入主线程执行。

下图是主线程和任务队列的示意图:

宏任务和微任务

了解完主线程,还要了解一下任务,任务有宏任务(MacroTask)和微任务(MicroTask)之分。

宏任务主要有:script代码段、setTimeout、setInterval、Promise的构造函数、setImmediate、I/O等.

微任务主要有:process.nextTick和Promise的回调这两种情况.

如果宏任务在本轮Event Loop中执行,则微任务在本轮Event Loop的所有宏任务结束后执行(Event Loop下面会讲到)。下面为宏任务和微任务的执行示意图:

Event Loop

主线程从"任务队列"中读取事件,这个过程是循环不断的,所以整个的这种运行机制又称为Event Loop(事件循环)

我们再回头看看开始的一段代码:

首先任务进入执行栈,除了setTimeout,其他的进入主线程执行,setTimeout则进入任务队列;
然后主线程里面的任务又有宏任务和微任务,先执行宏任务,微任务在所有宏任务结束后执行;
所以先输出script begin-promise begin——script end——promise then;
最后主线程读任务队列的异步任务,最后输出setTimeout

文章版权归作者所有,未经允许请勿转载,若此文章存在违规行为,您可以联系管理员删除。

转载请注明本文地址:https://www.ucloud.cn/yun/109051.html

相关文章

  • 前端中的事件循环eventloop机制

    摘要:宏任务主要有整体代码交互事件环境。按照中的定义告诉浏览器你希望执行一个动画,并且要求浏览器在下次重绘之前调用指定的回调函数更新动画。总结我们要记住最重要的两点是单线程和的循环机制。 showImg(https://segmentfault.com/img/bVbsEQs?w=900&h=540); 我们知道 js 是单线程执行的,那么异步的代码 js 是怎么处理的呢?例如下面的代码是如...

    jsyzchen 评论0 收藏0
  • JS核心知识点梳理——异步,单线程,运行机制

    摘要:引言学习的时候,经常听人说,即是异步的,又是单线程的。所以我们说是异步单线程的。参考从浏览器多进程到单线程,运行机制最全面的一次梳理运行机制详解再谈异步机制详解运行原理解析并发模型与事件循环 showImg(https://segmentfault.com/img/bVbo4hv?w=1800&h=1000); 引言 学习javascipt的时候,经常听人说,javascipt即是异步...

    TANKING 评论0 收藏0
  • 【Node.js】理解事件循环机制

    摘要:前沿是基于引擎的运行环境具有事件驱动非阻塞等特点结合具有网络编程文件系统等服务端的功能用库进行异步事件处理线程的单线程含义实际上说的是执行同步代码的主线程一个程序的启动不止是分配了一个线程,而是我们只能在一个线程执行代码当出现资源调用连接等 前沿 Node.js 是基于V8引擎的javascript运行环境. Node.js具有事件驱动, 非阻塞I/O等特点. 结合Node API, ...

    Riddler 评论0 收藏0
  • Javascript系列之javascript机制

    摘要:异步任务必须指定回调函数,当异步任务从任务队列回到执行栈,回调函数就会执行。事件循环主线程从任务队列中读取事件,这个过程是循环不断的,所以整个的这种运行机制又称为。事件循环事件循环是指主线程重复从消息队列中取消息执行的过程。 参考链接:这一次,彻底弄懂 JavaScript 执行机制https://zhuanlan.zhihu.com/p/...从浏览器多进程到JS单线程,JS运行机制...

    13651657101 评论0 收藏0
  • 浅析 JS 中的 EventLoop 事件循环(新手向)

    摘要:同时,如果执行的过程中发现其他函数,继续入栈然后执行。上面我们讨论的其实都是同步代码,代码在运行的时候只用调用栈解释就可以了。 序 Event Loop 这个概念相信大家或多或少都了解过,但是有一次被一个小伙伴问到它具体的原理的时候,感觉自己只知道个大概印象,于是计划着写一篇文章,用输出倒逼输入,让自己重新学习这个概念,同时也能帮助更多的人理解它~ 概念 JavaScript 是一门 ...

    chadLi 评论0 收藏0

发表评论

0条评论

jayce

|高级讲师

TA的文章

阅读更多
最新活动
阅读需要支付1元查看
<