首页 > 其他分享 >什么是event loop

什么是event loop

时间:2022-09-05 17:03:42浏览次数:62  
标签:function setTimeout console log 什么 任务 执行 event loop

经常会被人问到 你来谈一谈什么是event loop,一开始我是一脸懵逼,慢慢的在网上看到很多贴子 才明白是怎么回事.先看一段代码

console.log(0)
setTimeout(function() {
    console.log(1)
}, 1000);
console.log(2)
//打印顺序是 0 2 1

js的事件循环

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

由于js是单线程的,只有当上一个任务完成之后才会继续完成下一个任务,如果前一个任务耗时很长,后一个任务就不得不一直等着。于是,所有任务可以分成两种,一种是同步任务(synchronous),另一种是异步任务(asynchronous)。

同步任务

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

异步任务

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

上面代码中 主线程首先会打印0.遇到setTimeout时按照异步处理,1秒之后,setTimeout的回调函数会进入任务队列,主线程会继续运行 打印2,当主线程中的任务运行完成之后,会运行任务队列中的任务 打印出1
用图来表达


  image.png

文字叙述就是
(1)所有同步任务都在主线程上执行,形成一个执行栈(execution context stack)。
(2)主线程之外,还存在一个"任务队列"(task queue)。只要异步任务有了运行结果,就在"任务队列"之中放置一个事件。
(3)一旦"执行栈"中的所有同步任务执行完毕,系统就会读取"任务队列",看看里面有哪些事件。那些对应的异步任务,于是结束等待状态,进入执行栈,开始执行。
(4)主线程不断重复上面的第三步。
主线程从任务队列中读取事件,这个过程是不断循环的,所以整个的运行机制称为event loop

macro-task(宏任务)和micro-task(微任务)

任务还可以分为宏任务和微任务
宏任务:macrotask 可以理解是每次执行栈执行的代码就是一个宏任务(包括每次从事件队列中获取一个事件回调并放到执行栈中执行,每一个宏任务会从头到尾将这个任务执行完毕,不会执行其它)包括整体代码script,setTimeout,setInterval
微任务:,可以理解是在当前 task 执行结束后立即执行的任务 包括Promise,process.nextTick

上代码

setTimeout(function() {
    console.log('1');
})

new Promise(function(resolve) {
    console.log('2');
}).then(function() {
    console.log('3');
})

console.log('4');

//打印顺序 2 4 3 1

首先整体代码是一个宏任务,遇到setTimeout,会创建另一个宏任务,接着执行当前的宏任务,Promise 新建后就会立即执行。所以会首先打印2,then方法是一个微任务,遇到then,添加到微任务队列,代码接着执行会打印4。此时宏任务执行完毕,接着就会检查当前微任务队列是否有微任务,如果有,立即执行当前的微任务(也就是then 打印3),当前微任务执行完毕之后,开始执行下一轮的宏任务setTimeout,会打印1。

如图

  image.png

 
        setTimeout(function() {
            console.log(1)
        }, 0);
        
        new Promise(function(resolve, reject) {
            console.log(2)
            for(var i = 0; i < 10000; i++) {
                if(i === 800) {
                    console.log(10)
                }
                i == 9999 && resolve();
            }
            console.log(3)
        }).then(function() {
            console.log(4)
        })

        setTimeout(function() {
            console.log(9);
            new Promise(function(resolve) {
                console.log(7);
                resolve();
            }).then(function() {
                console.log(8)
            })
        }, 0);
        console.log(5);
        //最后巩固一下

 



标签:function,setTimeout,console,log,什么,任务,执行,event,loop
From: https://www.cnblogs.com/sexintercourse/p/16658766.html

相关文章

  • 什么是 EventLoop ?
    EventLoop即事件循环,是指浏览器或Node的一种解决javaScript单线程运行时不会阻塞的一种机制,也就是我们经常使用异步的原理。事件循环的进程模型选择当前要执行的任务队......
  • 为什么不用看板来管理日常工作?
    ​了解看板工具的时候,还是之前在公司实施敏捷开的时候关注的。但是后来因为没有好的项目来实践敏捷,我们的敏捷工具用的是Leangoo领歌,看板的方式管理,非常直观,效率也很高,还......
  • 什么是伪共享?
    问题(1)什么是CPU缓存行?(2)什么是内存屏障?(3)什么是伪共享?(4)如何避免伪共享?CPU缓存架构CPU是计算机的心脏,所有运算和程序最终都要由它来执行。主内存(RAM)是数据存放的地......
  • RPC是什么,看完你就知道了
    RPC概述RPC是什么RPC(RemoteProcedureCall)远程过程调用协议,一种通过网络从远程计算机上请求服务,而不需要了解底层网络技术的协议。RPC它假定某些协议的存在,例如TPC/UDP......
  • 什么是链路追踪?分布式系统如何实现链路追踪?
    什么是链路追踪?分布式系统如何实现链路追踪?在分布式系统,尤其是微服务系统中,一次外部请求往往需要内部多个模块,多个中间件,多台机器的相互调用才能完成。在这一系列的调......
  • 前后端分离前端框架的主要内容是什么?
    当前,前后端分离已经成为发展趋势和方向,是互联网项目开发的业界标准使用方式。那么,大家知道什么是前后端分离吗?其实,就是通过nginx+tomcat的方式(也可以中间加一个nodejs)有效......
  • 【Java面试】面试自閟了!工作5年的小伙伴今天面试被吊打问我,并行和并发有什么区别?
    “并行和并发有什么区别?”关于这个问题,很多工作5年以上的同学都回答不出来。或者说,自己有一定的理解,但是不知道怎么表达。大家好,我是Mic,一个工作了14年的Java程序员。......
  • 干货 | 一改测试步骤代码就全写?为什么不试试用 Yaml实现数据驱动?
    ⬇️点击“下方链接”,提升测试核心竞争力!>>更多技术文章分享和免费资料领取理念与同“UI自动化测试框架”中的“测试步骤的数据驱动”相同,接口中的测试步骤的数据驱动就......
  • 浏览器输入URL发生了什么:DNS解析、TCP握手、HTTP缓存、重定向、服务器状态码、渲染引
    输入地址,浏览器查找域名的IP地址。浏览器向该IP地址的web服务器发送一个HTTP请求,在发送请求之前浏览器和服务器建立TCP的三次握手,判断是否是HTTP缓存,如果是强制......
  • SDK究竟是什么?
    最近经常听到同事或开发同事讲到SDK,所以挺好奇SDK到底什么?所以百度了一下,搜索到一篇文章,讲解了很详细,现在跟大家分享一下转载链接:SDK究竟是什么?-知乎(zhihu.com)SDK......