Javascript运行机制之Event Loop

目录
  • 一、四个概念
    • 1、Javascript是单线程
    • 2、任务队列
    • 3、同步任务、异步任务
    • 4、Javascript执行栈
  • 二、Event Loop
  • 三、实战

一、四个概念

1、Javascript是单线程

单线程意味着我们的js代码只能从上往下同步执行,同一时间只能执行一个任务,这会导致某些执行时间较长或者执行时间不确定的任务会卡住其它任务的正常执行,Event Loop出现的原因正是为了解决此问题。

2、任务队列

为了解决上述的排队问题,有了任务队列,浏览器在异步任务有了结果后,将其添加到任务队列,以待将来执行,其他任务就在主线程上同步执行。

这里要注意的是,向任务队列中添加任务的时机是异步任务有结果后。其实任务队列中存在的就是异步任务的回调函数。

3、同步任务、异步任务

Js程序中的同步任务是指在主线程中执行的任务,异步任务是指进入任务队列中的任务

4、Javascript执行栈

所有的同步任务都在主线程上执行,行成一个执行栈。当主线程上任务执行完毕后,从任务队列中取出任务执行。

var name = "zhouwei";

setTimeout(() => {
    console.log(1);
}, 1000);

console.log(name);

上面代码在浏览器中执行如下,我们将程序全局执行环境的代码理解为包裹在一个main函数中的代码,这段代码的执行栈变化如下图:

  • 开始执行代码,将main任务(全局代码入栈执行),当遇到异步任务(setTimeout后)。
  • 浏览器接管异步任务,并在1s后将异步任务的结果(回调函数)添加到任务队列。
  • 执行栈中的同步任务执行完毕,此时任务队列为空(未到1s),执行栈也为空
  • 异步任务有结果后,首先进入任务队列排队(因为可能有很多异步任务)。
  • 执行栈从任务队列中取出任务开始同步执行。
  • 重复执行第5步。

二、Event Loop

Js执行栈不断的从任务队列中读取任务并执行的过程就是Event Loop

我们知道任务队列中存放的是异步任务的结果,那么异步任务都有哪些了?

  • 1、事件

Javascript中的事件有很多,都是属于异步任务。由浏览器接管,当事件触发时,将事件的回调加入的任务队列中,在Js执行栈中没有任务时执行。

  • 2、Http请求
  • 3、定时器
  • 4、requestAnimationFrame等

宏任务(macrotask)和微任务(microtask)
在了解了任务队列和Event Loop后,我们知道了Js执行栈从任务队列中读取任务执行,但这个具体工程我们任务不清楚,这里引出了宏任务和微任务的的概念,帮助我们理解Event Loop。

进入任务队列中的异步任务回调分为了宏任务和微任务, Js执行栈执行宏任务和微任务的规则如下图所示。

Js执行栈首先执行一个宏任务(全局代码) -> 从任务队列中读取所有微任务执行 -> UI rendering(浏览器渲染界面) -> 从任务队列读取一个宏任务 -> 所有微任务 -> UI rendering -> …

在每一轮的Event Loop结束后(1个宏任务 + 所有微任务),浏览器开始渲染界面(如果有需要渲染的UI,否则不执行UI rendering),在UI rendering结束后,开始下一轮Event Loop。

哪些是宏任务?

  • setTimeout
  • setInterval
  • setImmediate (Node)
  • requestAnimationFrame (浏览器)
  • I/O (事件回调)
  • UI rendering (浏览器渲染)

哪些是微任务?

  • Promise
  • process.nextTick (Node)
  • MutationObserver (现代浏览器提供的用来检测 DOM 变化的网页接口)

setTimeout延时问题

一般来说在代码中setTimeout中回调的执行时间都是大于设置的时间。 这是因为在setTimeout指定时间到达后,虽然回调函数被添加到了任务队列,但是此时Js执行栈中可能有正在执行的任务,此回调需要等待Js执行栈的任务执行完毕后才有机会执行,这就是setTimeout延时问题。

三、实战

练习下下方代码输出结果吧:

console.log(1);

setTimeout(() => {
    console.log(2);
    Promise.resolve().then(() => {
        console.log(3)
    });
});

new Promise(resolve => {
    console.log(4);
    setTimeout(() => {
        console.log(5);
    });
    resolve(6)
}).then(data => {
    console.log(data);
})

setTimeout(() => {
    console.log(7);
})

console.log(8);

用上方的我们说过的js执行机制来分析这道题:

1: 执行全局任务中的同步代码输出:

1
4
8

这里需要注意的是Promise接受的handle函数是同步任务,而then方法是异步任务,所以会直接输出4。

2: 这时的任务队列中有三个setTimeout的宏任务,和一个Promise的微任务

// 此时的宏任务是

setTimeout(() => {
    console.log(2);
    Promise.resolve().then(() => {
        console.log(3)
    });
});

setTimeout(() => {
    console.log(5);
});

setTimeout(() => {
    console.log(7);
})

// 此时微任务是
then(data => {
    console.log(data);
})

执行一个微任务, 输出:6

3: 接着执行第一个宏任务

setTimeout(() => {
    console.log(2);
    Promise.resolve().then(() => {
        console.log(3)
    });
});

输出:2

在此宏任务中,向任务 队列添加了一个微任务。此时任务队列有了新的微任务。

4:执行一个微任务,输出:3

then(() => {
   console.log(3)
});

5: 继续按照规则执行任务, 输出: 5、7

整体输出情况是:

1、4、8、6、2、3、5、7

你的答案是不是这样呢?

总结:

  • javascritp的任务分为同步任务和异步任务
  • 同步任务在主线程(Js执行栈)中执行,异步任务被其他线程接管,并在异步任务有结果后,将其回调添加到任务队列。
  • 任务队列中的任务分为了宏任务和微任务。Js执行栈总是先执行一个宏任务,再执行完所有微任务…

到此这篇关于Javascript运行机制之Event Loop的文章就介绍到这了,更多相关Javascript运行机制Event Loop内容请搜索我们以前的文章或继续浏览下面的相关文章希望大家以后多多支持我们!

(0)

相关推荐

  • JavaScript运行机制之事件循环(Event Loop)详解

    一.为什么JavaScript是单线程? JavaScript语言的一大特点就是单线程,也就是说,同一个时间只能做一件事.那么,为什么JavaScript不能有多个线程呢?这样能提高效率啊. JavaScript的单线程,与它的用途有关.作为浏览器脚本语言,JavaScript的主要用途是与用户互动,以及操作DOM.这决定了它只能是单线程,否则会带来很复杂的同步问题.比如,假定JavaScript同时有两个线程,一个线程在某个DOM节点上添加内容,另一个线程删除了这个节点,这时浏览器应该以哪个线

  • JavaScript 运行机制详解再浅谈Event Loop

    目录 一.为什么JavaScript是单线程? 二.任务队列 三.事件和回调函数 四.Event Loop 五.定时器 六.Node.js的Event Loop 一.为什么JavaScript是单线程? JavaScript语言的一大特点就是单线程,也就是说,同一个时间只能做一件事.那么,为什么JavaScript不能有多个线程呢?这样能提高效率啊. JavaScript的单线程,与它的用途有关.作为浏览器脚本语言,JavaScript的主要用途是与用户互动,以及操作DOM.这决定了它只能是单线

  • Javascript运行机制之Event Loop

    目录 一.四个概念 1.Javascript是单线程 2.任务队列 3.同步任务.异步任务 4.Javascript执行栈 二.Event Loop 三.实战 一.四个概念 1.Javascript是单线程 单线程意味着我们的js代码只能从上往下同步执行,同一时间只能执行一个任务,这会导致某些执行时间较长或者执行时间不确定的任务会卡住其它任务的正常执行,Event Loop出现的原因正是为了解决此问题. 2.任务队列 为了解决上述的排队问题,有了任务队列,浏览器在异步任务有了结果后,将其添加到任

  • JavaScript运行机制实例分析

    本文实例讲述了JavaScript运行机制.分享给大家供大家参考,具体如下: 第一次写博客 目前研一第二学期,大二开始入门前端,然而长久以来都是对于框架的简单调用,并未对其进行深入研究,因此,这个博客是作为自我督促的开始.这篇博客的内容源于前段时间写一个微信小程序前端,发现页面的渲染顺序总与自己的预想相违背,因此近期看了一些关于JavaScript运行机制的博客及文档,有了一些基本的框架,接下来就来详细看一下我所了解到的内容. JavaScript执行顺序 首先,JavaScript是按照顺序,

  • javascript运行机制之执行顺序理解

    JavaScript是一种描述型脚本语言,它不同于java或C#等编译性语言,它不需要进行编译成中间语言,而是由浏览器进行动态地解析与执行.如果你不能理解javaScript语言的运行机制,或者简单地说,你不能掌握javascript的执行顺序,那你就犹如伯乐驾驭不了千里马,让千里马脱缰而出,四处乱窜. 那么JavaScript是怎么来进行解析的吗?它的执行顺序又是如何的呢?在了解这些之前,我们先来认识几个重要的术语:       1.代码块 JavaScript中的代码块是指由<script>

  • javascript运行机制之this详细介绍

    this是面向对象语言中一个重要的关键字,理解并掌握该关键字的使用对于我们代码的健壮性及优美性至关重要.而javascript的this又有区别于Java.C#等纯面向对象的语言,这使得this更加扑朔迷离,让人迷惑. this使用到的情况:1. 纯函数2. 对象方法调用3. 使用new调用构造函数4. 内部函数5. 使用call / apply 6.事件绑定 1. 纯函数 复制代码 代码如下: var name = 'this is window';  //定义window的name属性  f

  • 如何通过setTimeout理解JS运行机制详解

    序 setTimeout()函数:用来指定某个函数或某段代码在多少毫秒之后执行.它返回一个整数,表示定时器timer的编号,可以用来取消该定时器. 例子 console.log(1); setTimeout(function () { console.log(2); }, 0); console.log(3); 问:最后的打印顺序是什么?(如果不了解js的运行机制就会答错) 正确答案:1 3 2 解析:无论setTimeout的执行时间是0还是1000,结果都是先输出3后输出2,这就是面试官常常

  • node.js中对Event Loop事件循环的理解与应用实例分析

    本文实例讲述了node.js中对Event Loop事件循环的理解与应用.分享给大家供大家参考,具体如下: javascript是单线程的,所以任务的执行都需要排队,任务分为两种,一种是同步任务,一种是异步任务. 同步任务是进入主线程上排队执行的任务,上一个任务执行完了,下一个任务才会执行. 异步任务是不进入主线程,而是进入一个 "任务队列" 里,"任务队列" 通知主线程,该异步任务才会进入主线程执行. 任务的运行机制如下: 1.所有同步任务在主线程上执行,形成一个

  • JavaScript Event Loop相关原理解析

    1.单线程模型 单线程模型指的是,JavaScript只能在一个线程上运行,也就是说只能同时指向一个任务,其他任务都必须在后面排队等待.注意:虽然JavaScript只在一个线程上运行,但并不代码JavaScript引擎只有一个线程.事实上,JavaScript引擎有多个线程,单个脚本只能在一个线程上运行(主线程),其他线程都是在后台配合. JavaScript为什么要采用单线程,而不是多线程? 不想让浏览器变得复杂(避免复杂性),因为多线程需要共享资源.且可能修改彼此运行的结果. 该模式会导致

  • 深入分析JavaScript 事件循环(Event Loop)

    事件循环(Event Loop),是每个JS开发者都会接触到的概念,但是刚接触时可能会存在各种疑惑. 众所周知,JS是单线程的,即同一时间只能运行一个任务.一般情况下这不会引发问题,但是如果我们有一个耗时较多的任务,我们必须等该任务执行完毕才能进入下一个任务,然而等待的这段时间常常让我们无法忍受,因为我们这段时间什么都不能做,包括页面也是锁死状态. 好在,时代在进步,浏览器向我们提供了JS引擎不具备的特性:Web API.Web API包括DOM API.定时器.HTTP请求等特性,可以帮助我们

随机推荐