JavaScript - 并发模式和 Event Loop 事件循环解读
2019-06-08 16:36
393 查看
版权声明:本文为博主原创文章,遵循 CC 4.0 by-sa 版权协议,转载请附上原文出处链接和本声明。
本文链接:https://blog.csdn.net/qq_26003101/article/details/91345709
2、Event Loop 事件循环
文章目录
1、Runtime concepts 执行相关的概念
Javascript有一个基于
Event Loop事件循环的并发模型;
下面讲解一个理论模型,讲解现代浏览器javascript 引擎实现机制和讲解一下描述的一些语义词;
可视模型代表:
stack 栈
函数调用形成了一个栈帧
function foo(b) { var a = 10; return a + b + 11; } function bar(x) { var y = 3; return foo(x * y); } console.log(bar(7)); // 返回 42
简单介绍下函数调用的过程:
当调用
bar(7)时,建立了第一个
stack frame是
bar(包含参数
7和本地变量);当
bar调用
foo时候,建立了第二个
stack frame是
foo(包含参数
3* 7和本地变量), 并且放置在
bar的
上方,也就是
栈的顶部了。
当
foo(21)执行完毕 返回 42 的时候,
foo这个栈帧会被移除掉,只剩下了
bar(7);然后再执行
bar, 有返回后,整个栈都是空的。
Heap 堆
对象都被关联在
Heap里面,即用于表示一大块非结构化的内存区域。
Queue 队列
一个
Javascript运行时使用一系列待处理消息的消息队列。每个消息关联一个函数去处理消息。
在事件循环的一些时刻,
运行时从最先进入队列的消息开始处理队列中的消息。这样做的话,消息从队列中被移除,并作为输入参数调用与之关联的函数。就如上面所说,调用一个函数总是为其创造一个的栈帧。
函数的执行一直会持续到
stack变成 空的。然后如果消息队列还有消息的话,事件循环将会执行消息队列的下一个消息。
2、Event Loop 事件循环
之所以称为事件循环,是因为他的执行实现的方式如下:
while (queue.waitForMessage()) { queue.processNextMessage(); }
如果当前没有消息,
queue.waitForMessage()会同步等待消息的到达。
Run-to-completion 运行到结束
每一个消息都被完全执行结束后,才回去执行下一个消息的处理。
这为程序的分析提供了一些优秀的特性,包括:无论何时执行一个函数,都不会被抢占,并且会在其他代码执行之前就已经被完全执行(并且可以修改函数操作的数量)。
这个和 C语言不太一样,比如,如果一个函数运行在一个线程中,一些时候,会被执行系统因在别的线程执行其他代码中断。
这个模型的缺点时,当一个消息需要太长时间去执行的时候,web用户就无法处理一些,比如
click,
srcoll的交互。浏览器会弹出一个
“a script is taking too long to run”这样的对话框来缓解这个情况。一个好的解决办法就是,
缩短消息处理的时间,或者把一个消息分割成多个消息。
Adding messages 添加消息
在web浏览器里面,
只要有事件发生并且有监听器绑定的时候,一定会增加一个消息。如果没有监听器,则事件消失。所以,一个元素的点击并且带有点击事件处理,一定会增加一个消息到消息队列中去。
setTimeout 函数有两个参数:
添加队列的消息和
时间(默认 0 ),这个时间值代表着这个消息被添加到消息队列最小的延迟时间。如果消息队列中,没有别的消息,这个消息会在延迟时间达到之后,立马会被处理。如果消息队列有别的消息,
setTimeout这个消息一定要等到别的消息被处理完后才能执行。由于这个原因,所以第二参数表明了
最小的时间间隔,而
非确切的时间。
举例说明,当第二个参数的时间过期后,setTimeout 不会被执行:
const s = new Date().getSeconds(); setTimeout(function() { // prints out "2", meaning that the callback is not called immediately after 500 milliseconds. console.log("Ran after " + (new Date().getSeconds() - s) + " seconds"); }, 500); while(true) { if(new Date().getSeconds() - s >= 2) { console.log("Good, looped for 2 seconds"); break; } }
Zero delays 零延迟
零延迟不是真实代表着在0毫秒后回调函数会执行。
setTimeout 的零延迟,在给定的时间间隔后不会执行回调函数。
是否执行决定于消息队列中的等待任务的数量。
举例说明:
(function() { console.log('this is the start'); setTimeout(function cb() { console.log('Callback 1: this is a msg from call back'); }); console.log('this is just a message'); setTimeout(function cb1() { console.log('Callback 2: this is a msg from call back'); }, 0); console.log('this is the end'); })(); // "this is the start" // "this is just a message" // "this is the end" // 当前函数 note that function return, which is undefined, happens here // "Callback 1: this is a msg from call back" // "Callback 2: this is a msg from call back"
‘this is just a message’ 虽然在回调之后,却会在回调之前输出到打印台上,这是因为这个零延迟只是处理请求的最小延迟,并非一个保证的精确的时间。
一般地,setTimeout 需要等待所有其他消息队列的代码执行完之后,才会执行,即时你设置了特殊的时间间隔。
相关文章推荐
- JavaScript基础知识1.并发模型和事件循环(event Loop)
- 异步调度机制——Javascript事件循环(Event Loop)机制解析
- JavaScript:彻底理解同步、异步和事件循环(Event Loop) (转)
- [转] JavaScript:彻底理解同步、异步和事件循环(Event Loop)
- javascript中的event loop事件循环详解
- JavaScript并发模型和事件循环
- 深入理解 JavaScript 事件循环(一)— event loop
- JavaScript:彻底理解同步、异步和事件循环(Event Loop)
- JavaScript:彻底理解同步、异步和事件循环(Event Loop)
- JavaScript Concurrency model and Event Loop 并发模型和事件循环机制
- 深入理解JavaScript的事件循环(Event Loop)
- JavaScript运行机制之事件循环(Event Loop)详解
- JavaScript:彻底理解同步、异步和事件循环(Event Loop)
- JavaScript:彻底理解同步、异步和事件循环(Event Loop)
- JavaScript事件循环(Event Loop)机制
- Javascript并发模型和事件循环
- Javascript 事件循环(Event Loop)
- 浅谈javascript的Event Loop(事件循环)
- JavaScript并发模型和事件循环
- 从浏览器中的Event Loop(事件循环)机制探索JavaScript异步