浏览器环境

执行栈

所有的 JS 代码在运行是都是在执行上下文中进行的。执行上下文是一个抽象的概念,JS 中有三种执行上下文:

  • 全局执行上下文,默认的,在浏览器中是 window 对象
  • 函数执行上下文, JS 函数每当调用时都会创建一个上下文
  • Eval 执行上下文, eval 函数会产生自己的上下文

通常,我们代码中都不值一个上下文。

栈,是一种数据结构,具有先进后出的原则。JS 中的执行栈就具有这样的结构,当引擎第一次遇到 JS 代码时, 会产生一个全局执行上下文并压入执行栈,每当遇到一个函数调用,就会忘栈中压入一个新的上下文。引擎执行栈顶的函数,执行完毕,弹出当前执行上下文。

Task

我们把 JS 在浏览器中运行主要废物一下集中类型的任务:

  • 同步任务(MainTask) :同步任务是指 JS 按照正常顺序执行代码, 比如:函数调用,数值运算等,只要是执行后立即能够得到结果的就是同步任务。
  • 宏任务(MacoTask):setTimeout、setInterval、I/O、UI渲染
  • 微任务(MicoTask):Promise、Object.obsever、MutationObsever
  • 用户交互事件(User Interaction Event):点击事件 onclick、键盘事件onkeydown、鼠标事件 onmouserover等

Event Loop 执行顺序

  • 首先执行同步任务
  • 取出微任务(MicoTask)中任务执行,直到清空
  • 取出宏任务(MacoTask)中的一个任务执行
  • 取出当前宏任务(MacoTask)中的微任务(MicoTask)任务执行, 直到清空

为了方便记忆 可以把第一个同步任务理解为一个大的 宏任务(MacoTask), 即同步代码执行后, 执行一个宏任务,所以微任务; 一个宏任务,所以微任务。

Event Loop js 事件循环初理解的更多相关文章

  1. event loop js事件循环 microtask macrotask

    转: 原文 http://blog.csdn.net/sjn0503/article/details/76087631 ---------------------------------------- ...

  2. 详解JavaScript中的Event Loop(事件循环)机制

    前言 我们都知道,javascript从诞生之日起就是一门单线程的非阻塞的脚本语言.这是由其最初的用途来决定的:与浏览器交互. 单线程意味着,javascript代码在执行的任何时候,都只有一个主线程 ...

  3. JavaScript 运行机制以及Event Loop(事件循环)

    一.JavaScript单线程 众所周知JavaScript是一门单线程语言,也就是说,在同一时间内JS只能做一件事.为什么JavaScript不能有多个线程呢?这样不是能够提高效率吗? JavaSc ...

  4. 理解js事件循环(event loop)

    队列:先进先出 栈:后进先出 javascript的Event Loop 和 Node.js的Event Loop 区别: js(运行在浏览器),有主线程.异步任务队列的概念: node.js使用li ...

  5. js事件循环机制(Event Loop)

    javascript从诞生之日起就是一门  单线程的  非阻塞的  脚本语言,单线程意味着,javascript代码在执行的任何时候,都只有一个主线程来处理所有的任务,非阻塞靠的就是 event lo ...

  6. js 事件循环机制 EventLoop

    js 的非阻塞I/O  就是由事件循环机制实现的 众所周知  js是单线程的 也就是上一个任务完成后才能开始新的任务 那js碰到ajxa和定时器.promise这些异步任务怎么办那?这时候就出现了事件 ...

  7. Node.js 事件循环(Event Loop)介绍

    Node.js 事件循环(Event Loop)介绍 JavaScript是一种单线程运行但又绝不会阻塞的语言,其实现非阻塞的关键是“事件循环”和“回调机制”.Node.js在JavaScript的基 ...

  8. Node.js事件循环

    Node JS是单线程应用程序,但它通过事件和回调概念,支持并发. 由于Node JS每一个API是异步的,作为一个单独的线程,它使用异步函数调用,以保持并发性.Node JS使用观察者模式.Node ...

  9. js事件循环机制辨析

     对于新接触js语言的人来说,最令人困惑的大概就是事件循环机制了.最开始这也困惑了我好久,花了我几个月时间通过书本,打代码,查阅资料不停地渐进地理解他.接下来我想要和大家分享一下,虽然可能有些许错误的 ...

随机推荐

  1. hashCode和equals的区别

    关注公众号,大家可以在公众号后台回复“博客园”,免费获得作者 Java 知识体系/面试必看资料. 有面试官会问:你重写过 hashcode 和 equals 么,为什么重写equals时必须重写has ...

  2. STM32实现Airplay音乐播放器

    AirPlay是苹果公司推出的一套无线音乐解决方案,我们手里的iPhone.iPad甚至是Apple Watch等设备还有电脑上的iTunes都支持AirPlay,但是支持AirPlay功能的音响设备 ...

  3. 基于python语言使用余弦相似性算法进行文本相似度分析

    编写此脚本的目的: 本人从事软件测试工作,近两年发现项目成员总会提出一些内容相似的问题,导致开发抱怨.一开始想搜索一下是否有此类工具能支持查重的工作,但并没找到,因此写了这个工具.通过从纸上谈兵到着手 ...

  4. 大白话5分钟带你走进人工智能-第32节集成学习之最通俗理解XGBoost原理和过程

    目录 1.回顾: 1.1 有监督学习中的相关概念 1.2  回归树概念 1.3 树的优点 2.怎么训练模型: 2.1 案例引入 2.2 XGBoost目标函数求解 3.XGBoost中正则项的显式表达 ...

  5. python之爬虫-必应壁纸

    python之爬虫-必应壁纸 import re import requests """ @author RansySun @create 2019-07-19-20:2 ...

  6. aabccd统计每个字符出现的次数,结果显示{ a: 2, b: 1, c: 2, d: 1 };去掉重复的字符,使结果显示abcd

    遍历字符串的方式和遍历数组的方式有点相似,或者说就是相同的.在学习数组的遍历方法之前,可以通过for循环去遍历数组,同样,字符串也可以:字符串跟数组都有一个length的属性.下面代码奉上,个人思路! ...

  7. MySQL多表关联数据同时删除

    MySQL多表关联时的多表删除: DELETE t1, t2FROM    t1LEFT JOIN t2 ON t1.id = t2.idWHERE    t1.id = 25

  8. Hive的安装及配置

    title: Hive的安装及配置 summary: 关键词:Hive ubuntu 安装和配置 Derby MySQL PostgreSQL 数据库连接 date: 2019-5-19 13:25 ...

  9. linux 如何初始化密码(解决mysql root用户登录不了的问题)

    这是我遇到的问题 然后就想这可能是mysql安全模式的问题,解决思路:首先改变mysql的安全模式及密码校验问题,jinrumysql后在更改用户名密码. 1.首先将my.ini中加入在[mysqld ...

  10. HDU 6044

    题意略. 思路: I.对于整个区间a1,....,an,必然有一个区间[1,n]与之对应,因为a1,...,an是1,...,n的一个排列,所以在[1,n]中定然有一个最小的数字1, 如果最大的区间[ ...