浏览器Event Loop 是个什么鬼

首先我建议你去看看阮神的相关blog

下面我只想拿一些例子来说明问题,我不是很喜欢艰深的理论,那不够直接.

look:

setTimeout(function(){console.log(1)},0);

console.log(2)

上面的代码执行的顺序是  2 1

尽管定时器是0秒,还是延迟执行了,而且这个规则不会变.

look:

setTimeout(function(){console.log(1)},0);

console.log(2);

setTimeout(function(){console.log(3)},0);

上面的运行顺序是: 2 1 3

look:

setTimeout(function(){
console.log(1)

setTimeout(function(){console.log(3)},0);

},0);

console.log(2);

这个还是 2 1 3

look 更复杂的:

setTimeout(function(){
console.log(1);

setTimeout(function(){console.log(3);},0);

},0);

console.log(2);

setTimeout(function(){
console.log(4);

setTimeout(function(){console.log(5);},0);

},0);

结果是 2 1 4 3 5

怎么解释呢:

console.log 是在主任务栈中执行的,而setTimeout 则是先在任务队列中排队的.

等主任务栈执行完毕了,才会按照任务队列去执行任务队列的任务.

上面setTimeout 排队会先排 1 4 然后排 3 5.所以 执行了 2 14 35.

这个也是javascript 被用于nodejs 的一个核心特性.

时间: 2024-08-28 06:43:18

浏览器Event Loop 是个什么鬼的相关文章

JavaScript的Event Loop(浏览器)

春节的时候看到奇舞周刊发的关于Event Loop的文章https://mp.weixin.qq.com/s/KEl_IxMrJzI8wxbkKti5vg,看的也是迷迷糊糊. 昨天准备写一下几个Promise的小例子,发现理解起来还是要懂得Event Loop,所以又在网上找了几篇文章看了一下,发现各有各的说法,不过关于基础的部分都是一致的, 本着学习记录的心态,我这里简单地把我对Event Loop的理解说明一下,当然还是有很多不到位的地方,欢迎大家一起交流学习. 首先我们来看一张图片:(<L

浏览器中的event loop, 简单了解。

简单 了解 Event Loop 相关知识,知道 JS 异步运行代码的原理. Event Loop 执行顺序如下所示: 执行全局Script同步代码,(这属于宏任务) 全局Script代码执行完毕后,调用栈Stack会清空: 执行微任务,如果在执行microtask的过程中,又产生了microtask,加入到队列的末尾,也会在这个周期被调用执行: microtask queue中的所有任务都执行完,微任务后,如有必要会渲染页面 然后开始下一轮 Event Loop 取出宏队列macrotask 

【朴灵评注】JavaScript 运行机制详解:再谈Event Loop

PS: 我先旁观下大师们的讨论,得多看书了~ 别人说的:“看了一下不觉得评注对到哪里去,只有吹毛求疵之感. 比如同步异步介绍,本来就无大错:比如node图里面的OS operation,推敲一下就可以猜到那是指同步操作(自然不走event loop了):至于watcher啥的,显然只是实现上的特色,即使用同一个queue实现也未尝不可” [原帖: http://www.ruanyifeng.com/blog/2014/10/event-loop.html 作者:阮一峰] 一年前,我写了一篇<什么

【repost】JavaScript 运行机制详解:再谈Event Loop

一年前,我写了一篇<什么是 Event Loop?>,谈了我对Event Loop的理解. 上个月,我偶然看到了Philip Roberts的演讲<Help, I'm stuck in an event-loop>.这才尴尬地发现,自己的理解是错的.我决定重写这个题目,详细.完整.正确地描述JavaScript引擎的内部运行机制.下面就是我的重写. 进入正文之前,插播一条消息.我的新书<ECMAScript 6入门>出版了(版权页,内页1,内页2),铜版纸全彩印刷,非常

JavaScript 运行机制详解:再谈Event Loop

原文地址:http://www.ruanyifeng.com/blog/2014/10/event-loop.html 一年前,我写了一篇<什么是 Event Loop?>,谈了我对Event Loop的理解. 上个月,我偶然看到了Philip Roberts的演讲<Help, I'm stuck in an event-loop>.这才尴尬地发现,自己的理解是错的.我决定重写这个题目,详细.完整.正确地描述JavaScript引擎的内部运行机制.下面就是我的重写. 进入正文之前,

Javascript Event Loop

Event Loop 是一个很重要的概念,指的是计算机系统的一种运行机制. JavaScript语言就采用这种机制,来解决单线程运行带来的一些问题. 本文参考C. Aaron Cois的<Understanding The Node.js Event Loop>,解释什么是Event Loop,以及它与JavaScript语言的单线程模型有何关系. 想要理解Event Loop,就要从程序的运行模式讲起.运行以后的程序叫做"进程"(process),一般情况下,一个进程一次

深入理解Javascript单线程谈Event Loop

假如面试回答js的运行机制时,你可能说出这么一段话:"Javascript的事件分同步任务和异步任务,遇到同步任务就放在执行栈中执行,而碰到异步任务就放到任务队列之中,等到执行栈执行完毕之后再去执行任务队列之中的事件."但你能说出背后的原因吗? 1.线程与进程 进程:是系统资源分配和调度的单元.一个运行着的程序就对应了一个进程.一个进程包括了运行中的程序和程序所使用到的内存和系统资源. 线程:线程是进程下的执行者,一个进程至少会开启一个线程(主线程),也可以开启多个线程. 2.同步和异

(转载)JavaScript 运行机制详解:再谈Event Loop

source: http://www.ruanyifeng.com/blog/2014/10/event-loop.html  一年前,我写了一篇<什么是 Event Loop?>,谈了我对Event Loop的理解. 上个月,我偶然看到了Philip Roberts的演讲<Help, I'm stuck in an event-loop>.这才尴尬地发现,自己的理解是错的.我决定重写这个题目,详细.完整.正确地描述JavaScript引擎的内部运行机制.下面就是我的重写. 进入正

从一个例子引发对JS运行机制之 Event Loop 的思考

栗子如下: for (var i = 0; i < 5; i++) { setTimeout(function() { console.log('i: ',i); //一秒之后输出几乎没有时间间隔依次输出5个5 }, 1000); } console.log(i); //立即输出5 想必很多人看到立马能看出答案吧,但是为什么定时器不能依次打印出1,2,3,4,5呢?答案稍后分晓. 那到底怎么才能依次输出我们想要的结果呢?大家可能都想到是利用闭包,或者是利ES6中的let声明,但是今天我们不讲这个