1. EventLoop 1.1 调用栈 当一个方法执行时内部调用另外的方法,则会形成调用栈,如图: 1.2 任务队列 JavaScript有一个主线程执行当前任务,主线程的代码同步执行,并把遇到的事件和回调注册到事件表中. 当事件表中的事件被触发时,将会把对应的处理函数推送到任务队列当中. 每一次EventLoop会从任务队列中获取最前面的事件处理函数进行执行. macrotasks queue(图中task queue) 包括: 整体代码script,setTimeout,setInterv

本文基于node 0.10.22版本 关于EventLoop是什么,请看阮老师写的什么是EventLoop 本文讲述的是EventLoop中的执行顺序(着重讲setImmediate, setTimeout/setInterval, I/O的顺序) 首先看看github上看到的nodejs eventloop 的图解, 来源于https://github.com/joyent/node/issues/6034#issuecomment-30017889 (注意图中timers处process.n

浏览器环境 执行栈 所有的 JS 代码在运行是都是在执行上下文中进行的.执行上下文是一个抽象的概念,JS 中有三种执行上下文: 全局执行上下文,默认的,在浏览器中是 window 对象 函数执行上下文, JS 函数每当调用时都会创建一个上下文 Eval 执行上下文, eval 函数会产生自己的上下文 通常,我们代码中都不值一个上下文. 栈,是一种数据结构,具有先进后出的原则.JS 中的执行栈就具有这样的结构,当引擎第一次遇到 JS 代码时, 会产生一个全局执行上下文并压入执行栈,每当遇到一个函数

当我们执行 JS 代码的时候其实就是往执行栈中放入函数,那么遇到异步代码的时候该怎么办?其实当遇到异步的代码时,会被挂起并在需要执行的时候加入到 Task(有多种 Task) 队列中.一旦执行栈为空,Event Loop 就会从 Task 队列中拿出需要执行的代码并放入执行栈中执行,所以本质上来说 JS 中的异步还是同步行为. 不同的任务源会被分配到不同的 Task 队列中,任务源可以分为 微任务(microtask) 和 宏任务(macrotask).在 ES6 规范中,microtask 称

(本文从掘金小册整理) 首先介绍一下几个概念 进程与线程 相信大家经常会听到 JS 是单线程执行的,但是你是否疑惑过什么是线程? 讲到线程,那么肯定也得说一下进程.本质上来说,两个名词都是 CPU 工作时间片的一个描述. 进程描述了 CPU 在运行指令及加载和保存上下文所需的时间,放在应用上来说就代表了一个程序.线程是进程中的更小单位,描述了执行一段指令所需的时间. 把这些概念拿到浏览器中来说,当你打开一个 Tab 页时,其实就是创建了一个进程,一个进程中可以有多个线程,比如渲染线程.JS 引擎

灵魂三问 JS为什么是单线程的 我们都知道,JS是单线程的语言,那为什么呢?我的理解是JS设计之初就是为了在浏览器端完成DOM操作和一些简单交互的,既然涉及到DOM操作如果是多线程就会带来复杂的同步问题,比较极端的例子就是两个线程可能一个在删除某个DOM节点一个却在修改这个DOM节点,这是浏览器以哪个线程为准呢? 为什么需要异步 如果没有异步,单线程的JS从上到下执行遇到一段代码需要执行比较久时就会阻塞页面的渲染,造成页面假死,这显然是一种很差的用户体验 单线程又是如何实现异步的呢 单线程之所以

异步的思考 event loops隐藏得比较深,很多人对它很陌生.但提起异步,相信每个人都知道.异步背后的“靠山”就是event loops.这里的异步准确的说应该叫浏览器的event loops或者说是javaScript运行环境的event loops,因为ECMAScript中没有event loops,event loops是在HTML Standard定义的. event loops规范中定义了浏览器何时进行渲染更新,了解它有助于性能优化. 思考下边的代码运行顺序: console.l

最近在看<Node.js调试指南>的时候遇到有意思的几道题,是关于setTimeout, promise.then, process.nextTick, setImmediate的执行顺序.今天抽空记录下这道题的分析过程及背后的原理与知识点. 题目如下: // 题目一: setTimeout(()=>{ console.log('setTimeout') },0) setImmediate(()=>{ console.log('setImmediate') }) // 题目二: c

既然今天要谈的是javascript的事件循环机制,要理解事件循环,首先要知道事件循环是什么. 我们先从一个例子来看一下javascript的执行顺序. <script> setTimeout(function() { console.log('定时器开始了.'); },0) new Promise(function(resolve) { console.log('马上执行for循环了'); for (let i = 0; i < 10000; i++) { i == 99 &&

笔者以前面试的时候经常遇到写一堆setTimeout,setImmediate来问哪个先执行.本文主要就是来讲这个问题的,但是不是简单的讲讲哪个先,哪个后.笼统的知道setImmediate比setTimeout(fn, 0)先执行是不够的,因为有些情况下setTimeout(fn, 0)是会比setImmediate先执行的.要彻底搞明白这个问题,我们需要系统的学习JS的异步机制和底层原理.本文就会从异步基本概念出发,一直讲到Event Loop的底层原理,让你彻底搞懂setTimeout,s

看了阮一峰老师的JavaScript 运行机制详解:再谈Event Loop和[朴灵评注]的文章,查阅网上相关资料,把自己对javascript运行模式和EVENT loop的理解整理下,不一定对,日后再看做个回顾. MDN上有张图很形象, function f(b){ var a = 12; return a+b+35; } function g(x){ var m = 4; return f(m*x); } g(21); 上面函数调g用形成了一个 frames 的栈.调用g的时候,创建了第一

Node.js在官网上是这样定义的:“一个搭建在Chrome JavaScript运行时上的平台,用于构建高速.可伸缩的网络程序.Node.js采用的事件驱动.非阻塞I/O模型使它既轻量又高效,是构建运行在分布式设备上的数据密集型实时程序的完美选择.”Web站点早已不仅限于内容的呈现,很多交互性和协作型环境也逐渐被搬到了网站上,而且这种需求还在不断地增长.这就是所谓的数据密集型实时(data-intensive real-time)应用程序,比如在线协作的白板,多人在线游戏等,这种web应用程序

平时的工作中,也许你会经常用到setTimeout这个方法,可是你真的了解setTimeout吗?本文想通过总结setTimeout的用法,顺便来探索javascript里面的事件执行机制. setTimeout基本用法 1. setTimeout(code,millisec) setTimeout函数接受两个参数,第一个参数code是将要推迟执行的函数名或者一段代码,第二个参数millisec是推迟执行的毫秒数. 例如: setTimeout(‘console.log(2)’,100); se

引言 相信所有学过 JavaScript 都知道它是一门单线程的语言,这也就意味着 JS 无法进行多线程编程,但是 JS 当中却有着无处不在的异步概念 .在初期许多人会把异步理解成类似多线程的编程模式,其实他们中有着很大的差别,要完全理解异步,就需要了解 JS 的运行核心——事件循环(event loop).在之前我对事件循环的认识也是一知半解的,直到我看了 Philip Roberts 的演讲 What the heck is the event loop anyway?,我才对事件循环有了一

聊聊同步.异步和回调 同步,异步,回调,我们傻傻分不清楚, 有一天,你找到公司刚来的程序员小T,跟他说:“我们要加个需求,你放下手里的事情优先支持,我会一直等你做完再离开”.小T微笑着答应了,眼角却滑过一丝不易觉察的杀意. 世界上的所有事情大致可以分为同步去做和异步去做两种.你打电话去订酒店,电话另一边的工作人员需要查下他们的管理系统才能告诉你有没有房间. 这时候你有两种选择:一种是不挂电话一直等待,直到工作人员查到为止(可能几分钟也可能几个小时,取决于他们的办事效率),这就是同步的. 另一种是

目录 浅析Node.js的Event Loop 引出问题 Node.js的基本架构 Libuv Event Loop Event Loop Phases Overview Poll Phase The Heart Of Event Loop MacroTask VS MicroTask 它是如何工作的? 推荐阅读 参考 浅析Node.js的Event Loop 引出问题 首先看两段代码,下面两段代码的执行结果是什么?为什么? // event-loop-1.js setTimeout(() =>

event loop这东西,确实把我坑了一把,面试的时候被问到这个问题的时候,我是懵逼的,完全不知道怎么回答,而当我回来查到原来这个听起来如此玄乎又厉害的名字就是异步和单线程那块的知识的时候,我心情又变得很复杂,怪我,不知道它有这么个高级的名字. 其实这玩意相当简单,首先,js是一门单线程的语言,所谓单线程,一句话就可以讲清楚---"js不能同时做两件事,只能按顺序一件一件做". 这个顺序就比较通俗易懂了--"先同步,后异步",js在执行代码的时候,会从上到下执行,

* { color: #3e3e3e } body { font-family: "Helvetica Neue", Helvetica, "Hiragino Sans GB", "Microsoft YaHei", Arial, sans-serif; font-size: 15px } p { line-height: 25.6px; text-align: justify; margin: 23.7px 0 } blockquote { b

先看段代码: console.log(1); setTimeout(function () { console.log(2); new Promise(function (resolve, reject) { console.log(3); resolve(); console.log(4); }).then(function () { console.log(5); }); }); function fn() { console.log(6); setTimeout(function () {

先来思考一个问题,JS 是单线程的还是多线程的?如果是单线程,为什么JavaScript能让AJAX异步发送和回调请求,还有setTimeout也看起来像是多线程的?还有non-blocking IO, event loop等概念. 目录: 单线程的 JS 引擎 多线程的浏览器 setTimeout(func, 0) 的应用场景 setTimeout与setInterval [更新]参考资料 [更新]深入:JS并发模型与 Event Loop 1. 单线程的 JS 引擎 浏览器无论在什么时候都只

问题 考察如下代码,脑回路中运行并输出结果: console.log("1"); setTimeout(function setTimeout1() { console.log("2"); process.nextTick(function nextTick1() { console.log("3"); }); new Promise(function promise1(resolve) { console.log("4");