首页
学习
活动
专区
工具
TVP
发布
精选内容/技术社群/优惠产品,尽在小程序
立即前往

JavaScript中的Event Loop

Event Loop规范 HTML5规范里有Event loops这一章节。 每个浏览器环境,至多有一个event loop。 一个event loop可以有1个或多个task queue。...每个(task source对应的)task queue都保证自己队列的先进先出的执行顺序,但event loop的每个turn,是由浏览器决定从哪个task source挑选task。...Jobs and Job Queues规范 本来应该接着上面Event Loop的话题继续深入,讲macro-task和micro-task,但先不急,我们跳到ES2015规范,看看Jobs and Job...单个Job Queue中的PendingJob总是按序(先进先出)执行,但多个Job Queue可能会交错执行。...当所有可执行的micro-task执行完毕之后。循环再次执行macro-task中的一个任务队列,执行完之后再执行所有的micro-task,就这样一直循环。

29510
  • 您找到你想要的搜索结果了吗?
    是的
    没有找到

    JavaScript中的Event Loop机制详解(前端必看)

    单线程是必要的,也是javascript这门语言的基石,原因之一在其最初也是最主要的执行环境——浏览器中,我们需要进行各种各样的dom操作。...因此,为了保证不会 发生类似于这个例子中的情景,javascript选择只用一个主线程来执行代码,这样就保证了程序执行的一致性。...答案就是今天这篇文章的主角——event loop(事件循环)。 注:虽然nodejs中的也存在与传统浏览器环境下的相似的事件循环。然而两者间却有着诸多不同,故把两者分开,单独解释。...正文 浏览器环境下js引擎的事件循环机制 1、执行栈与事件队列 当javascript代码执行的时候会将不同的变量存于内存中的不同位置:堆(heap)和栈(stack)中来加以区分。...这就是这个过程被称为“事件循环(Event Loop)”的原因。

    59920

    全方位理解JavaScript的Event Loop

    JavaScript是单线程 首先我们先了解下进程和线程的概念和关系: 进程: 运行的程序就是一个进程,比如你正在运行的浏览器,它会有一个进程。 线程: 程序中独立运行的代码段。...一个进程 由单个或多个 线程 组成,线程是负责执行代码的。...为了利用多核 CPU 的计算能力,HTML5 提出 Web Worker 标准,允许 JavaScript 脚本创建多个线程,但是子线程完全受主线程控制,且不得操作 DOM。...以上两种运行机制,主线程都从”任务队列”中读取事件,这个过程是循环不断的,所以整个的这种运行机制又称为 Event Loop(事件循环)。...:1 8 9 6 11 12 10 2 3 4 5 13 7 参考资料 javascript中的Event Loop详解 [链接地址(长按选择即可复制): https://zhuanlan.zhihu.com

    32530

    深入理解JavaScript的事件循环(Event Loop)

    更详细的描述可以查看 这篇文章 而JS的运行环境主要有两个:浏览器、Node。 在两个环境下的Event Loop实现是不一样的,在浏览器中基于 规范 来实现,不同浏览器可能有小小区别。... 规范,每个线程都有一个事件循环(Event Loop),在浏览器中除了主要的页面执行线程 外,Web worker是在一个新的线程中运行的,所以可以将其独立看待。...再看上面那个例子,对比起来只是代码多了点,混入了setInterval,多个setTimeout与promise的函数部分,按照上面的思路,应该不难理解 需要注意的三点: 1. clearInterval...(intervalA); 运行的时候,实际上已经执行了 intervalA 的macrotask了 2. promise函数内部是同步处理的,不会放到队列中,放入队列中的是它的then或catch回调...idle, prepare:仅内部使用 poll:最为重要的阶段,执行I/O callback,在适当的条件下会阻塞在这个阶段 check:执行setImmediate的callback close

    1.1K21

    使用 JavaScript 编写更好的条件语句

    在任何编程语言中,代码需要根据不同的条件在给定的输入中做不同的决定和执行相应的动作。...在天气应用中,如果在早上被查看,显示一个日出图片,如果是晚上,则显示星星和月亮。在这篇文章中,我们将探索JavaScript中所谓的条件语句如何工作。...如果你使用JavaScript工作,你将写很多包含条件调用的代码。条件调用可能初学很简单,但是还有比写一对对if/else更多的东西。这里有些编写更好更清晰的条件代码的有用提示。...想象如果代码有更复杂的逻辑会怎么样?大量的if..else语句。 我们能用三元运算符、&&条件等语法重构上面的功能,但让我们用多个返回语句编写更清晰的代码。...使用可选链和空值合并 这有两个为编写更清晰的条件语句而即将成为 JavaScript 增强的功能。当写这篇文章时,它们还没有被完全支持,你需要使用 Babel 来编译。

    1.6K30

    你可能不知道的 JavaScript Event Loop

    一、最初理解的 Event Loop 实际上,谈到任务队列,绝大多数人第一反应就是 同步任务/异步任务、宏任务/微任务,在很多博客和帖子中也有详细的说明。...二、真实的 Event Loop JavaScript 语言的一大特点就是单线程,需要执行多个任务总要有一定的规则限制执行的先后顺序,而这个规则就是我们的 Event Loop 机制,在 node 中我们可以称之为事件循环...这样我们就能总结出解决事件循环问题的一般步骤: 确定宏任务数量; 确定宏任务中微任务的数量和调用次序; 确定宏任务的调用次序; 再回头看上面那道题,是不是很清晰: 同步执行 console.log("a...是前端同学面试的时候必过的一关,也属于非常基础的内容了,单实际上只是简单理解,如果Event Loop 和 Promise 等知识结合,从百度一搜,往往会搜到很多看起来令人“头大”的面试题: // 写出输出顺序...,实际上工作中完全触碰不到这里的知识,总结就是深入思考才能从原理了解知识。

    28510

    JavaScript 中 的this

    变幻莫测的 this 在JavaScript中,this的指向变幻莫测。...如果函数中包含多个对象,尽管这个函数是被最外层的对象所调用,this指向的也只是它上一级的对象。...总结:this永远指向的是最后调用它的对象,也就是看它执行的时候是谁调用的 严格模式 在严格模式中,this的指向稍有不同 'use strict'; var name = 'window'; var...此时仅仅只是创建,并没有执行,而调用这个函数Fn的是对象a,那么this指向的自然是对象a。 this 与 return 如果 new 出来的对象中return一个新对象的时候,情况会有所不同。...如果一个函数中有this,这个函数中包含多个对象,尽管这个函数是被最外层的对象所调用,this指向的也只是它上一级的对象 如果一个函数中有this,当使用「new + 函数」实例化一个对象时,如果函数的返回值是一个对象

    1.4K40

    10 - JavaScript 中的函数 & 11 - JavaScript 中函数的种类

    原文地址:https://dev.to/bhagatparwinder/functions-in-javascript-5ehm 什么是函数?它在 JavaScript 中扮演什么角色?...函数就是 JavaScript 中可以被执行的代码块。函数有如下必备部分: 1. 使用 function 关键字声明; 2. 函数名字紧跟其后,它就是被调用时使用的名字。 3....JavaScript 自带的函数 你不是要经常写函数,JavaScript 自带了许多可以直接使用的方法。...函数声明在其他代码执行之前被加载,然而函数表达式只有等到 JavaScript 解释器执行到所在代码行时才被加载。这就是 JavaScript 中 hoisting[1] 的原理。...,它们没有与 this、arguments、super、new.target,我们将在接下来的 JavaScript 文章中温习这写概念。

    2.8K20

    JavaScript中的this(你不知道的JavaScript)

    JavaScript中的this,刚接触JavaScript时大家都在大肆渲染说其多么多么的灵巧重要,然而自己并不关心;随着自己对JavaScript一步步深入了解,突然恍然大悟,原来它真的很重要!...大家都JavaScript中this存在两个误解: (1)this指向函数自身 (2)this指向函数的作用域 作用域无法通过JavaScript代码访问,它存在于JavaScript引擎内部。...每当把this和词法作用域的查找混合使用时,一定要提醒自己,这是无法实现的! this是在运行时进行绑定的,并不是在编写时绑定,它的上下文取决于函数调用时的各种条件。...使用new为函数创建多个实例的时候,这些实例会共享prototype。 当在一个实例里直接给this添加属性的时,会隐藏prototype中与之同名的属性。...柯里化 把接受多个参数的函数变换成接受一个单一参数(最初函数的第一个参数)的函数,如果其他的参数是必要的,返回接受余下的参数且返回结果的新函数 var sum = function(x, y){

    45851

    JavaScript 中的对象

    对象 JavaScript 中的对象,Object,可以简单理解成“名称 - 值”对(而不是键值对:现在,ES 2015 的映射表(Map),比对象更接近键值对),不难联想 JavaScript 中的对象与下面这些概念类似...: Python 中的字典(Dictionary) Perl 和 Ruby 中的散列/哈希(Hash) C/C++ 中的散列表(Hash table) Java 中的散列映射表(HashMap) PHP...中的关联数组(Associative array) 这样的数据结构设计合理,能应付各类复杂需求,所以被各类编程语言广泛采用。...正因为 JavaScript 中的一切(除了核心类型,core object)都是对象,所以 JavaScript 程序必然与大量的散列表查找操作有着千丝万缕的联系,而散列表擅长的正是高速查找。...“名称”部分是一个 JavaScript 字符串,“值”部分可以是任何 JavaScript 的数据类型——包括对象。这使用户可以根据具体需求,创建出相当复杂的数据结构。

    2.4K20
    领券