JavaScript调用栈

1:基本概念

栈(stack):用来保存简单的数据字段。
堆(heap):用来保存栈中简单的数据字段对指针的引用。
队列:是一种先进先出的线性数据结构。函数的调用的进栈和出栈的顺序,遵循 先进后出 的原则。
空间分配
堆:一般由程序员释放,如果程序员不释放就会在结束时由OS回收;
栈:一般由操作系统自动分配释放。
缓存方式
堆:存放在二级缓存中,生命周期一般是由虚拟机的垃圾回收算法决定的;
栈:存放在一级缓存中,被调用时处于存储空间,调用完立即释放。
操作数据:堆栈(先进后出),队列(先进先出)。

调用栈是一种栈结构,它用来存储计算机程序执行时候其活跃子程序的信息。它是一种LIFO的数据结构,将记录代码运行时的执行上下文。当遇到某个函数的调用语句时,它将会记录当前的执行上下文,将函数入栈,并为其创建一个新的执行上下文。(比如什么函数正在执行,什么函数正在被这个函数调用等等信息)。调用栈是解析器的一种机制。

javascript是一门单线程语言,主线程在同一时间只能处理一件事。那javascript是如何处理处理函数的调用关系的?答案是——调用栈。

2:Event Loop(事件循环)

JavaScript是一个单线程,它执行的所有代码都放在下面这个Call Stack里面,当Call Stack执行完毕之后,就会再右侧的队列里面找任务,如果有微任务,就会先执行微任务,再去执行宏任务。

eventloop2.png

事件循环:就是同步任务进入主线程,异步任务加入到任务队列中。等主线程的任务执行完就去执行任务队列中的任务,这个过程会不断重复。所有同步任务都在主线程上执行,形成一个执行栈。主线程之外, 存在一个任务队列(task queue), 异步任务有了运行结果会在任务队列之中放置一个任务。执行栈中的所有同步任务执行完毕后读取任务队列(先读取微任务、宏任务)不断重复上面的第三步。

js既然是单线程那么肯定是排队执行代码,怎么去排这个队就是Event Loop,虽然js是单线程但是浏览器不是单线程。

console.log('script start');
​
setTimeout(function() {
 console.log('timeout1');
}, 10);
​
new Promise(resolve => {
 console.log('promise1');
 resolve();
 setTimeout(() => console.log('timeout2'), 10);
}).then(function() {
 console.log('then1')
})
​
console.log('script end');
​
//
* script start
* promise1
* script end
* then1
* timeout1
* timeout2

3:宏任务(Mask-task)

  • setTimeout
  • setInterval
  • I/O

特点:由JavaScript线程外的宿主线程执行,比如,定时器触发线程setTimeout、setInterval,异步http请求线程。JavaScript线程不空闲宏任务永远没有执行机会。

for(let i=0; i<100000000; i++) {}
​
setTimeout(function() {
 console.log('setTimeout1');
}, 1000);
​
setTimeout(function() {
 console.log('setTimeout2');
}, 2000);

4:微任务(Mask-task)

  • promise

特点:由JavaScript线程维护,它的执行时机是在主线程所有可执行代码执行完成后执行,浏览器渲染DOM前会全部执行。

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