浏览器环境

执行栈

所有的 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. FTP工具-FileZilla安装使用教程

    1.首先,百度搜索“FileZilla”,进入官网,下载地址:https://www.filezilla.cn/download/client  ,根据自己电脑配置去下载 2.下载本地,双击运行安装程 ...

  2. 转载 | Sublime Text3 安装以及初次配置

    本文引自:http://blog.csdn.net/u011272513/article/details/52088800 工具:官网下载:Sublime Text3 安装:直接运行安装.http:/ ...

  3. C++这么难,为什么还要学习C++呢?如何学?

    在大多数开发或者准开发人员的认识中,C/C++ 是一门非常难的编程语言,很多人知道它的强大,但因为认为“难”造成的恐惧让很多人放弃. 这个世界本来就是残酷的,所以你不能怪C++向你展示了世界的本质 大 ...

  4. 最简单的DWR例子

    什么是DWR? DWR是一个Open Source的 java项目.DWR可以让JavaScript调用运行在Web服务器里面的JAVA程序.简单一点或者专业一点就是Easy AJAX for JAV ...

  5. android ——网络编程

    一.WebView 这个View就是一个浏览器,用于展示网页的. 布局文件: <LinearLayout xmlns:android="http://schemas.android.c ...

  6. 三步理解--门控循环单元(GRU),TensorFlow实现

    1. 什么是GRU 在循环神经⽹络中的梯度计算⽅法中,我们发现,当时间步数较⼤或者时间步较小时,循环神经⽹络的梯度较容易出现衰减或爆炸.虽然裁剪梯度可以应对梯度爆炸,但⽆法解决梯度衰减的问题.通常由于 ...

  7. (三十三)c#Winform自定义控件-日期控件

    前提 入行已经7,8年了,一直想做一套漂亮点的自定义控件,于是就有了本系列文章. 开源地址:https://gitee.com/kwwwvagaa/net_winform_custom_control ...

  8. 帝国CMS(EmpireCMS) v7.5配置文件写入漏洞分析

    帝国CMS(EmpireCMS) v7.5配置文件写入漏洞分析 一.漏洞描述 该漏洞是由于安装程序时没有对用户的输入做严格过滤,导致用户输入的可控参数被写入配置文件,造成任意代码执行漏洞. 二.漏洞复 ...

  9. cmd命令行界面运行python脚本显示的中文不正确

    在notepad++中编写了一个脚本(如图一),在cmd命令行界面中运行却发现显示的中文不正确(如图2).图3显示的是cmd界面的默认编码. 解决方案:将脚本的注释语言改为GBK,编码格式改为ANSI ...

  10. tomcat9 web manager的配置使用

    本地链接tomcat web manager服务时,只需修改tomcat/conf/tomcat-user.xml文件,如图所示: 远程链接tomcat web manager服务时,需要在tomca ...