JavaScript - 并发模式和 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 framebar (包含参数7和本地变量);当 bar 调用 foo 时候,建立了第二个 stack framefoo(包含参数 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 需要等待所有其他消息队列的代码执行完之后,才会执行,即时你设置了特殊的时间间隔。

©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 217,907评论 6 506
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 92,987评论 3 395
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 164,298评论 0 354
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 58,586评论 1 293
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 67,633评论 6 392
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 51,488评论 1 302
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 40,275评论 3 418
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 39,176评论 0 276
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 45,619评论 1 314
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 37,819评论 3 336
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 39,932评论 1 348
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 35,655评论 5 346
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 41,265评论 3 329
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 31,871评论 0 22
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 32,994评论 1 269
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 48,095评论 3 370
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 44,884评论 2 354

推荐阅读更多精彩内容