资讯专栏INFORMATION COLUMN

JavaScript调用栈

lushan / 686人阅读

摘要:调用栈是一种栈结构它用来存储计算机程序执行时候其活跃子程序的信息。调用栈是解析器的一种机制。那是如何处理处理函数的调用关系的答案是调用栈。主线程之外存在一个任务队列异步任务有了运行结果会在任务队列之中放置一个任务。

1:基本概念

栈(stack):用来保存简单的数据字段。

堆(heap):用来保存栈中简单的数据字段对指针的引用。

队列:是一种先进先出的线性数据结构。

函数的调用的进栈和出栈的顺序,遵循 先进后出 的原则。

空间分配: 堆:一般由程序员释放,如果程序员不释放就会在结束时由OS回收;
栈:一般由操作系统自动分配释放。

缓存方式: 堆:存放在二级缓存中,生命周期一般是由虚拟机的垃圾回收算法决定的;
栈:存放在一级缓存中,被调用时处于存储空间,调用完立即释放。

操作数据:堆栈(先进后出),队列(先进先出)。

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

调用栈是解析器的一种机制。

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

答案是——调用栈。

2:Event Loop(事件循环)

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

图片描述

事件循环:就是同步任务进入主线程,异步任务加入到任务队列中。等主线程的任务执行完就去执行任务队列中的任务,这个过程会不断重复。所有同步任务都在主线程上执行,形成一个执行栈。主线程之外, 存在一个任务队列(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前会全部执行。

文章版权归作者所有,未经允许请勿转载,若此文章存在违规行为,您可以联系管理员删除。

转载请注明本文地址:https://www.ucloud.cn/yun/105968.html

相关文章

  • [译文] JavaScript工作原理:引擎、运行时、调用概述

    摘要:调用栈是单线程编程语言,意味着它只有单一的调用栈。调用栈是一种数据结构,基本记录了程序运行的位置。举个例子,先来看如下所示的代码当引擎开始执行这段代码时,调用栈将是空的。这正是抛出异常时栈追踪的构造过程这基本上就是异常抛出时调用栈的状态。 原文 How JavaScript works: an overview of the engine, the runtime, and the c...

    PAMPANG 评论0 收藏0
  • 前端进阶系列(七):什么是执行上下文?什么是调用

    摘要:什么是中的调用栈调用栈就像是程序当前执行的日志。当函数执行结束时,将从调用栈中出去。了解全局和局部执行上下文是掌握作用域和闭包的关键。总结引擎创建执行上下文,全局存储器和调用栈。 原文作者:Valentino 原文链接:https://www.valentinog.com/blog/js-execution-context-call-stack 什么是Javascript中的执行上下文...

    leone 评论0 收藏0
  • [译]JavaScript调用、回调队列和事件循环

    摘要:在这个视频中,将的调用栈回调队列和事件循环的内容讲的很清晰。调用栈可以往里面放东西,可以在事件结束的时候把回调函数放进回调队列,然后是事件循环。为的时候这个过程看起来可能不明显,除非考虑到调用栈的执行环境和事件循环的情况。 译者按这篇文章可以看做是对Philip Roberts 2014年在JSConf演讲的《What the heck is the event loop anyway...

    YancyYe 评论0 收藏0
  • JavaScript工作机制:第1部分

    摘要:工作机制第部分本文转载自众成翻译译者网络埋伏纪事链接原文随着越来越受欢迎,开发团队正在将其用在技术栈的各个方面,包括前端后端混合应用嵌入式设备等等。之后,步骤将是如下这样调用栈中的每个条目称为栈帧。 JavaScript工作机制:第1部分 本文转载自:众成翻译译者:网络埋伏纪事链接:http://www.zcfy.cc/article/3965原文:https://blog.sessi...

    xiaodao 评论0 收藏0
  • javasctipt 工作原理之调用

    摘要:译者注翻译一个对新手比较友好的工作原理解析系列文章注意以下全部是概念经验丰富的老鸟可以离场啦正文从这里开始随着的流行团队们正在利用来支持多个级别的技术栈包括前端后端混合开发嵌入式设备以及更多这篇文章旨在成为深入挖掘和实际上他是怎么工作的系列 译者注 翻译一个对新手比较友好的 JavaScript 工作原理解析系列文章 注意: 以下全部是概念,经验丰富的老鸟可以离场啦 正文从这里开始 随...

    Pines_Cheng 评论0 收藏0
  • JavaScript 事件循环(译文JavaScript Event Loop)

    摘要:事件循环了解了在引擎中是如何工作了之后,来看下如何使用异步回调函数来避免代码。从回调函数被放入后秒钟,把移到中。由于事件循环持续地监测调用栈是否已空,此时它一注意到调用栈空了,就调用并创建一个新的调用栈。 听多了JavaScript单线程,异步,V8,便会很想去知道JavaScript是如何利用单线程来实现所谓的异步的。我参考了一些文章,了解到一个很重要的词汇:事件循环(Event L...

    K_B_Z 评论0 收藏0

发表评论

0条评论

最新活动
阅读需要支付1元查看
<